How To Add Advance Photo Gallery Widget in Blogger

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




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/AVvXsEgUOUwn9nJZA30YP-Bl8IojdIYQmWSRBT0rB8CAmmp_cuZeU4zdCbnjiiqkAIctVuo-43_9WcL5Vc-5eOesF9ggUpwqekMlb7S0AbfcJ5vBFIg4UrrZOoFOEqEzjjTrcjRjU8yz_-d_1kA/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/AVvXsEjJrmjgLc1tEEvS0dP45RV6ni4ThsBfyoh9GWDbsK63bmyMawrqTk6GYPMxqCzHGTMEwwh-tLoSgDqTl8X-TVnrTr7eYv7u97lKIjNLhuYexW-OghMfnkUq6q570Sxh2oSvOjO8PMO0FZM/s1600/rightNavOFF.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_thumbnailsBanner.mbl .rightNav:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmNHgsyXwk_k0u9nbNkpRpwtwufPeyJM-Z7lUgtdb_ZbxebBKMsPD5Kxpu8IcV56Va9RAqFyH8fL12mVvnRd9YCKVOGf2trndtDEZKQ85_cG-ECqPhIDMVGLT2Wxe3Oc2hGMyNKK9V8U8/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/AVvXsEhUJnrEU6ra1oOJN8tzXYS7-QQtqiarDslxzlZncrUaFYNudL1zESpgNuIbdziKdhdtvhyphenhyphenx4KwxDpOmj5ypFVfuV3qsejoqgr7wGIY0wQWxvsZWtV-9BhiuB4D3MyrF_ef8upwJ0MaTCxs/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/AVvXsEhUJnrEU6ra1oOJN8tzXYS7-QQtqiarDslxzlZncrUaFYNudL1zESpgNuIbdziKdhdtvhyphenhyphenx4KwxDpOmj5ypFVfuV3qsejoqgr7wGIY0wQWxvsZWtV-9BhiuB4D3MyrF_ef8upwJ0MaTCxs/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/AVvXsEhZ5dhWonNSy8iajoj8Nr6xWZglT30l7SeqCHDXUTr865TirnpDsG2D2QiAyQwIT70gqbcUysQPwPtHagBcYqRJRWel2xISfVJO7rnW-o45L9KZKJVbjzgwKONu8TTaRc5P3cRR796dJWY/s1600/carouselLeftNavDisable.png) 0 0 no-repeat;
cursor:default;
}
.allinone_thumbnailsBanner.mbl .carouselLeftNavDisabled:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5dhWonNSy8iajoj8Nr6xWZglT30l7SeqCHDXUTr865TirnpDsG2D2QiAyQwIT70gqbcUysQPwPtHagBcYqRJRWel2xISfVJO7rnW-o45L9KZKJVbjzgwKONu8TTaRc5P3cRR796dJWY/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/AVvXsEhPK3XxSyfYB1Add9Gcg9G0xUfDwHvoi7ZPPDQLWDXkT0Kt8bVBNLPqzA42QsFThxzkMs7vhCXOJAfGuC0Y2s5AgcucWGbOSAxBOawjih4HlSvX8Ax1sVNN9ql79SkkIMOFr3VLtEm2RtM/s1600/carouselRightNavOn.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_thumbnailsBanner.mbl .carouselRightNav:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPK3XxSyfYB1Add9Gcg9G0xUfDwHvoi7ZPPDQLWDXkT0Kt8bVBNLPqzA42QsFThxzkMs7vhCXOJAfGuC0Y2s5AgcucWGbOSAxBOawjih4HlSvX8Ax1sVNN9ql79SkkIMOFr3VLtEm2RtM/s1600/carouselRightNavOn.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.mbl .carouselRightNavDisabled {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUgG7Cr9LU4MpUsf0zlsRPH8lmVZYH_iYRjgfNtsEJ1lOlUcV3KNGnNpr8_BRhSjuxt7BFlfgx1_64mtMNztSnSDcRQtwS9HMcM_4JXYz8txuGOVLQfksvtZndEDU_-4F7vEbbVCAUJrE/s1600/carouselRightNavDisable.png) 0 0 no-repeat;
cursor:default;
}
.allinone_thumbnailsBanner.mbl .carouselRightNavDisabled:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUgG7Cr9LU4MpUsf0zlsRPH8lmVZYH_iYRjgfNtsEJ1lOlUcV3KNGnNpr8_BRhSjuxt7BFlfgx1_64mtMNztSnSDcRQtwS9HMcM_4JXYz8txuGOVLQfksvtZndEDU_-4F7vEbbVCAUJrE/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://mybloggerlab.com/Scripts/allinone_thumbnailsBanner.js" type="text/javascript" charset="utf-8"></script>
<script src="http://mybloggerlab.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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

9 comments

October 28, 2012 at 12:22 PM

sayed hi, Greetings. Nothing I want to ask you but rather strayed from the topic of this article, I want to ask what software you used to create the image screen shoot on this article, and if you do not mind that I want you to make the article, thank you for your response and sorry if the grammar my english is not good ....

Editorial Team MOD
October 28, 2012 at 12:25 PM

Well! Thanks for liking the Screenshot we Provide. Actually, we are using Adobe Photoshop To Design all these Screenshot. Sure, Why not we will Try our best to curate an article on it. Thanks for leaving your response. Peace

October 28, 2012 at 7:19 PM

Bro still I can't understand the use of this widget and one thing I want to give you one quality guest post can you tell me a suitable topic on which I write :)

October 28, 2012 at 8:48 PM

Here's a suitable topic: How to add these great effects to blogger without editing your template's html. I am sick of always having to do that6. Can't you develop a widget? Sheesh,

October 29, 2012 at 12:41 AM

Awesome Photo gallery widget thanks for sharing this :)

Regards
Rahul Kashyap
Blog: SDMMovies.com | Movies4u.us

Editorial Team MOD
October 29, 2012 at 12:59 AM

@Sunil Dude, Its a Gallery Widget. For instance You Went to a Blogger Conference and You Gave a Speech. So in this widget you can add those images so your visitors can enjoy the glimpse. Peace

@Tech Gyrl Well There is no as such widget but we will surely introduce something which will help you to insert all such HTML without editing the Theme.

October 29, 2012 at 6:49 PM

@ Sayed : Whoaa ..... images you create very nice, I did not think that the picture was made ​​with adobe photoshop. I also used to create animation with photoshop but the result was not that good, if you have a blog that discusses tutorial create images like the above ..?, sorry if my english is not good, I am not proficient in English, and the last ... greeting of peace from Indonesia, hopefully MBL more successful in the future ...

Editorial Team MOD
October 30, 2012 at 12:55 AM

Well! All the images are Created in Photoshop and few of adobe illustrator. We don't use any other software than that. In coming days we will surely write a tutorial on it. Peace

October 31, 2012 at 2:46 AM

Nice widget ..Keep it up and hope to see more great widget on future also.
Blogging Tips & Tricks

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.