How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger.

If you want to add a very attractive gallery to your blog you should read this tutorial,
Through this tutorial, only 3 steps you’ll be able to make your own gallery widget with jQuery, to add it for your blogger blog,
you add add it to header, sidebar, above posts area, on footer columns, and any where else on your template,
So let’s see step one.

Step 1. Adding The Gallery Codes To Your Template.

Go To your blogger dashboard, layout >> Edit html >>
And find this code,

]]></b:skin>

And Before it, Add the next code,

/* 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/AVvXsEhEXON-uVh4pa0ROKkn0cW1fK5sGD-P0ZvwbupqRSXmPlUw1t4gZ9la7b3c9QC8K8v3ebz6BKH2FtCWIbHfDrR_wf7rR_HqVgzN6Ya7xPHAXhzYr9e0U0dMAznXNgmVI63gA1PizwCMerOT/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Then Find this Tag

</head>

And add the next code before it.

<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>

Now we finished editing template, Click Save template,
And lets see the next step.

Step 2. Adding The Gallery To your template.

Go to Layout >> page elements and on your template’s sidebar, header or footer Click on ‘Add a Gadget‘.
then Select HTML/Javascript
A new window will appear, in title box Type your gallery title, and in content area Copy and Paste the next code

<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>

Then instead Of picture 1 Link Type Your Image Url,
and if you want to make the image link to another page or url instead of # Add the target url.
Each time you want to add a new image to the gallery, just repeat this code.

<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>

That’s it.

Demo. See How is this gallery looks like on a blogger blog.

Click Here To See Demo Blogger Gallery
Please share and leave comments if you find it useful.
To become IT networking professional, you can go for ccent certification which will give you title of Cisco certified entry networking technician while ccde will entitle you certified design expert and ccna will enhance your expertise as a certified network associate.