How To Add Advance Photo Gallery Widget in Blogger

Photo galleries do add lots of colors to a website. However, Blogger doesn’t have any flexible photo gallery widget that could amuse visitors. Therefore, we have to make use of some external scripts to formulate a sparkling image gallery widget. We were not 100 percent sure that we would be able to formulate an Image Gallery widget, but thanks to the AIO Banner which made everything look pretty straightforward. Here, we have utilized the power of Jquery which has given some extraordinary transection effects to the gallery widget. Those who are searching for a widget that could hold their images together then, today we will be sharing a Photo gallery widget for Blogger enabled sites.

Photo Gallery Widget (DEMO)

Why To Use Photo Gallery Widget:

Readers do get tired after reading back to back articles. They need a bit rest so why not integrate a widget that would offer some glimpse pictures, which will spread smile on everyone’s faces. On the other hand, bloggers can utilize it to add their personal snaps. For Example, a Blogger can add his snaps that he clicked during a Tech Talk, Blogger conference or blogging events. It’s just like having a small box, where a person can share his personal snaps or something related to his interest.

Where This Photo Gallery Will Appear:

It’s up to you, where you want to see this widget. However, we would recommend using it into your Sidebar, where people can easily check it whenever they like. On the other hand, a person can also attach it into his article to endorse few glimpse images. Following is the interactive screenshot of the Gallery widget. 

Some Tremendous Features of MBL Gallery Widget:

We have tried our best to furnish this widget with some of the most adoring features. Following are the few of its features.

• Add unlimited images to the gallery no restrictions whatsoever.
• Rotate images automatically with the help of powerful JavaScript.
• It Has Small Thumb images through which users can select the best pictures.
• Some splendid image transections integrated (More than 4 different Transections).

How To Install MBL Photo Gallery Plugin in Blogger:

We have tried over level best to make the tutorial as straightforward as we can. The tutorial consists of 3 steps, so it will hardly soak 10 minutes to complete the integration. Follow the following instructions.

• Go To Blogger.com >> Template.
• Take Backup in case anything goes wrong.
• Select Edit HTML >> Proceed.
• Now in your Theme Search for ]]></b:skin> and above it paste the following CSS Coding.

/*-- MBL ADVANCE Photo Gallery Widget For BLOGGER---*/
.allinone_thumbnailsBanner {
position:relative;
}
.allinone_thumbnailsBanner img {
position:absolute;
top:0px;
left:0px;
max-width:none;
max-height:none;
}
.allinone_thumbnailsBanner_list {
margin:0;
padding:0;
list-style:none;
display:none;
}
.allinone_thumbnailsBanner .stripe {
position:absolute;
display:block; height:100%;
z-index:1;
overflow:hidden;
}
.allinone_thumbnailsBanner .block {
position:absolute;
display:block; z-index:1;
overflow:hidden;
}
.mycanvas {
position:absolute;
top:8px;
right:10px;
z-index:10;
}
/**MBL SKIN***/
.allinone_thumbnailsBanner.mbl .bannerControls {
position:absolute;
left:0;
top:0;
z-index:2;
width:100%;
}
.allinone_thumbnailsBanner.mbl .leftNav {
position:absolute;
left:0px;
top:50%;
/*margin-top:-20px;  height/2 */
width:22px;
height:75px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG8z4zz0IrEacmhfeHkdcCNcyvL5MdT4jirNFvcGi2l_vlYjCOMdMA9ubM8xs8x0gjx4JzL_FiyLzXYllgFXR0puisuhoM5e0jPboyTrEBEAVHjkoZmXrdiGYfCl0Hxx8RMq6dUj0J36c/s1600/leftNavOFF.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_thumbnailsBanner.mbl .leftNav:hover {
background:url(http://www.responsivejqueryslider.com/skins/cool/leftNavON.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.mbl .rightNav {
position:absolute;
right:0px;
top:50%;
/*margin-top:-20px;  height/2 */
width:22px;
height:75px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1LY53g6dqnmuG4CWCggEd9ECgcXJiQaV-MviPwTz0J-0gg5adkD_EcbWDJ8NGqVqn6BLO5Kvrt9KBy2W-Kt_L7yFhq9Wn76oq7yW4__JzBnjbzTp1S4scM7HhFs8WOCt4VEYotV9Z9dI/s1600/rightNavOFF.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_thumbnailsBanner.mbl .rightNav:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTFyHtM9QiyRT2BfbdA6_oNMPDGOIW0emvdSa3tDGEwl8wjHeo_l_vIY7j8DHTDqu6mVunALz_ADUFUbmQDhLfF7h27G1qGVYQM08NEh50eTqV_5R31yt5ax8IoWwirOCNL8rI5A_gNpI/s1600/rightNavON.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.mbl .thumbsHolderWrapper {
position:absolute;
background:#000000;
border-top:1px solid #e66b19;
height:121px;
width:100%;
overflow:hidden;
z-index:10;
}
.allinone_thumbnailsBanner.mbl .thumbsHolderVisibleWrapper {
position:absolute;
width:100%;
height:121px;
overflow:hidden;
}
.allinone_thumbnailsBanner.mbl .thumbsHolder {
position:absolute;
}
.allinone_thumbnailsBanner.mbl .thumbsHolder_ThumbOFF {
float:left;
display:block;
width:110px;
height:65px;
cursor: pointer;
}
.allinone_thumbnailsBanner.mbl .thumbsHolder_ThumbOFF img {
position:relative;
}
.allinone_thumbnailsBanner.mbl .thumbsHolder_ThumbON {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis41edrdBSNpq9IDgewQCrCEP5x1ibtP6NTjdaeM12GsfWw9VmD2nBaks4ZMrYTJybdIda-hVYDtstreyH0AONWR3nDCI0SjQgp3-KTip5yFUY2u-Skl23GDmQHj_riAjz_qBPoxsABmw/s1600/carouselLeftNavOn.png) center 0px no-repeat; }
.allinone_thumbnailsBanner.mbl .carouselLeftNav {
position:absolute;
width:29px;
height:120px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis41edrdBSNpq9IDgewQCrCEP5x1ibtP6NTjdaeM12GsfWw9VmD2nBaks4ZMrYTJybdIda-hVYDtstreyH0AONWR3nDCI0SjQgp3-KTip5yFUY2u-Skl23GDmQHj_riAjz_qBPoxsABmw/s1600/carouselLeftNavOn.png) 0 0 no-repeat;
cursor: pointer; }
.allinone_thumbnailsBanner.mbl .carouselLeftNav:hover {
background:url(http://www.responsivejqueryslider.com/skins/cool/carouselLeftNavOn.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.mbl .carouselLeftNavDisabled {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioHj1pwyjsRo2KxGwbZ79Q7aIksCAb0QlcRps3yktzOgFu3Nk9ghGhKYf1EC3hlovQTBeypmcE2gua4Wy2ey9JAJbO2A9oNHCDf2c09qV7FnZNY7jRxv2X2bTBNXRUuJRfQW-GnJY6YWY/s1600/carouselLeftNavDisable.png) 0 0 no-repeat;
cursor:default;
}
.allinone_thumbnailsBanner.mbl .carouselLeftNavDisabled:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioHj1pwyjsRo2KxGwbZ79Q7aIksCAb0QlcRps3yktzOgFu3Nk9ghGhKYf1EC3hlovQTBeypmcE2gua4Wy2ey9JAJbO2A9oNHCDf2c09qV7FnZNY7jRxv2X2bTBNXRUuJRfQW-GnJY6YWY/s1600/carouselLeftNavDisable.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.mbl .carouselRightNav {
position:absolute;
width:29px;
height:120px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jVtHRdD_aPThGSGy5LdiVArgBZXoZA_ilj7Qywb0NMNNzII4U_duIwpe7l2sD6L1DxpKxT7_3s1PEYos7a1oYTJ3AxrJ7O3wZY-Kwa64SkI40d5TAfMPpX1BkaWzcZ5AYHNEHSGd0v4/s1600/carouselRightNavOn.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_thumbnailsBanner.mbl .carouselRightNav:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jVtHRdD_aPThGSGy5LdiVArgBZXoZA_ilj7Qywb0NMNNzII4U_duIwpe7l2sD6L1DxpKxT7_3s1PEYos7a1oYTJ3AxrJ7O3wZY-Kwa64SkI40d5TAfMPpX1BkaWzcZ5AYHNEHSGd0v4/s1600/carouselRightNavOn.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.mbl .carouselRightNavDisabled {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBQFIHhBk5Y3TsWGiLGDQeXQ92GCxZO-h__ZvSBd7oImgQp4fFf_9d52mSc-2UfQTOoMSJf63TnZb92w1M4QhnmVMGDbjSf_ObVdQy2aTbXB6BiWOpI_757J37br1aC6QBWQ3D1LVoGQ/s1600/carouselRightNavDisable.png) 0 0 no-repeat;
cursor:default;
}
.allinone_thumbnailsBanner.mbl .carouselRightNavDisabled:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBQFIHhBk5Y3TsWGiLGDQeXQ92GCxZO-h__ZvSBd7oImgQp4fFf_9d52mSc-2UfQTOoMSJf63TnZb92w1M4QhnmVMGDbjSf_ObVdQy2aTbXB6BiWOpI_757J37br1aC6QBWQ3D1LVoGQ/s1600/carouselRightNavDisable.png) 0 0 no-repeat;
}

• Now once again within the template search for </head> and above it paste the following JavaScript coding.    

<script src="http://bsresearcher.blogspot.com/Scripts/allinone_thumbnailsBanner.js" type="text/javascript" charset="utf-8"></script>
<script src="http://bsresearcher.blogspot.com/Scripts/reflection.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#allinone_thumbnailsBanner_sidebar3').allinone_thumbnailsBanner({
skin: 'mbl',
numberOfThumbsPerScreen:2,
numberOfStripes:4,
numberOfRows:5,
numberOfColumns:5,
showOnInitNavArrows:false,
width: 295,
height: 200, });
});
</script>   

• Now after adding both CSS and JavaScript coding go ahead and save your template.

Adding MBL Photo Gallery Widget To Blogger:

• Go to Blogger >> Your Site. 
• Layout >> Add a Gadget >> HTML/JavaScript.
• Now paste the following Coding in the HTML Box. 

<div id="latest-newsz" class="float-block">
<div id="allinone_thumbnailsBanner_sidebar3">
<ul class="allinone_thumbnailsBanner_list">
<!-- IMAGES -->
<li  data-bottom-thumb="Thumbnail-Here"><img src="Full-Image-Here" alt="" /></li>

<li data-bottom-thumb="Thumbnail-Here"><img src="Full-Image-Here" alt="" /></li>

<li data-bottom-thumb="Thumbnail-Here"><img src="Full-Image-here" alt="" /></li>

<li data-bottom-thumb="Thumbnail-Here"><img src="Full-Image-here" alt="" /></li>

<li data-bottom-thumb="Thumbnail-Here" ><img src="Full-Image-here" alt="" /></li>
                     
</ul>                                        
                         
</div>          
         
 </div>
       
</br> </br> </br> </br> </br> </br> </br> </br>

• Now replace Thumbnail-Here with the thumbnails of your images and Full-Image-here with the full stretched images.

Important TIPS: 

• Make sure the Thumbnails should be not be more than 100px width and 60px height.

• Make sure to re-size your gallery images to 295px width and 110px height.

All Done: After customizing your gallery, go ahead and save your widget by pressing Save Template button. Finally, jump to your website and enjoy the feast of true designing. 

From The Editor's Desk:

Hope you have enjoyed the roller-coaster ride. We are up and sharing our best widgets, hoping that our readers would be happy with it. As we are getting close to our first anniversary, we are thinking to have a massive giveaway. Take a lot care of yourself and your family members till then Peace, Blessings and happy blogging.

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

How To Add Advance Photo Gallery Widget in Blogger

4/ 5

By Editorial Board

Posted By Editorial Team On October 28, 2012 Comment