Logo

Hvis du ønsker at tilføje et meget attraktivt galleri til din blog du bør læse denne tutorial,

Gennem denne tutorial, kun 3 trin vil du være i stand til at gøre dit eget galleri widget med jQuery, for at føje det til din Blogger blog,

du tilføje føje det til header, sidebar, ovennævnte stillinger område, på footer kolonner, og alle andre steder på din skabelon,

Så lad os se trin et.

Gå til dit Blogger instrumentbrættet, layout>> Rediger html>>
Og finde denne kode,

]]></b:skin>

Og før det, Tilføj den næste kode,

/* Blogger Zoom Gallery By AllBlogTools.com */ ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0sG0eednmjeHC5Tn6Yj5oiBcan8ove2p43jypcrHckJGhzjh4HlW7uSADwIDcM2u3h4g2NepuY0J9jq_GS2V3e6VAKjQZdm317Cup66PzW01xTXAzFqfqwQQMVQZgWLjdxwQWccU1u1v_/) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }

Så få dette tag

lt;/head>

Og tilføje den næste kode før det.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $(&quot;ul.thumb li&quot;).hover(function() { $(this).css({&#39;z-index&#39; : &#39;10&#39;}); $(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop() .animate({ marginTop: &#39;-110px&#39;, marginLeft: &#39;-110px&#39;, top: &#39;50%&#39;, left: &#39;50%&#39;, width: &#39;174px&#39;, height: &#39;174px&#39;, padding: &#39;20px&#39; }, 200); } , function() { $(this).css({&#39;z-index&#39; : &#39;0&#39;}); $(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop() .animate({ marginTop: &#39;0&#39;, marginLeft: &#39;0&#39;, top: &#39;0&#39;, left: &#39;0&#39;, width: &#39;100px&#39;, height: &#39;100px&#39;, padding: &#39;5px&#39; }, 400); }); //Swap Image on Click $(&quot;ul.thumb li a&quot;).click(function() { var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name $(&quot;#main_view img&quot;).attr({ src: mainImage }); return false; }); }); </script>

Nu er vi færdig med at redigere skabelonen, klik Gem skabelon,

Og lad os se det næste skridt.

Gå til Layout>> sideelementer og på din skabelon sidebjælke, sidehovedet eller sidefoden Klik på 'Tilføj en Gadget«.

derefter Vælg HTML / Javascript

Et nyt vindue vises, i feltet Titel Skriv dit galleri titel, og i indhold, afskrift og opklæbe den næste kode

<p dir="ltr"><ul class="thumb"> <li><a href="<font color="#66CCFF"><b>#</b>"</font>><img src="<font color="#66CCFF"><b>picture 1 Link</b></font>" alt="" /></a></li> <li><a href="<font color="#66CCFF"><b>#</b>"</font>><img src="<font color="#66CCFF"><b>picture 2 Link</b></font>" alt="" /></a></li> <li><a href="<font color="#66CCFF"><b>#</b>"</font>><img src="<font color="#66CCFF"><b>picture 3 Link</b></font>" alt="" /></a></li> <li><a href="<font color="#66CCFF"><b>#</b>"</font>><img src="<font color="#66CCFF"><b>picture 4 Link</b></font>" alt="" /></a></li> </ul>

Så i stedet for billede 1 Link Skriv dit Billedwebadresse,
og hvis du ønsker at gøre billedet link til en anden side eller URL i stedet for # Tilføj målet url.

Hver gang du ønsker at tilføje et nyt billede til galleriet, skal du blot gentage denne kode.

<li><a href="<font color="#66CCFF"><b>URL 1 #</b>"</font>><img src="<font color="#66CCFF"><b>picture 1 Link</b></font>" alt="" /></a></li>

That's it.

Klik her for at se Demo Blogger Galleri

Behage lod og efterlade kommentarer, hvis du finder det nyttigt.