Why To Use Photo Gallery Widget:
Where This Photo Gallery Will Appear:
Some Tremendous Features of MBL Gallery Widget:
- Add unlimited images to the gallery no restrictions whatsoever.
- Rotate images automatically amongst the help of powerful JavaScript.
- It Has Small Thumb images through which users tin direct the best pictures.
- Some first-class prototype transections integrated (More than four dissimilar Transections).
How To Install MBL Photo Gallery Plugin inwards Blogger:
- Go To Blogger.com >> Template.
- Take Backup inwards instance anything goes wrong.
- Select Edit HTML >> Proceed.
- Now inwards your Theme Search for ]]></b:skin> and inwards a higher identify it glue the next 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(http://2.bp.blogspot.com/-pdLg36QC8mk/UIvXF94QZ7I/AAAAAAAAGwk/TiCma_laCX4/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(http://2.bp.blogspot.com/-Qs29cLTxWwc/UIvW7mNocHI/AAAAAAAAGwc/o2knuVw0DGc/s1600/rightNavOFF.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_thumbnailsBanner.mbl .rightNav:hover {
background:url(http://4.bp.blogspot.com/-ZjZcPQIFbLw/UIvWw1TAp-I/AAAAAAAAGwU/OYd6pbNi6Zk/s1600/rightNavON.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.mbl .thumbsHolderWrapper {
position:absolute;
background:#000000;
border-top:1px enterprise #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(http://4.bp.blogspot.com/-_AbyLeD-o6s/UIvWoNibtHI/AAAAAAAAGwM/tUkkFIT9XNY/s1600/carouselLeftNavOn.png) middle 0px no-repeat; }
.allinone_thumbnailsBanner.mbl .carouselLeftNav {
position:absolute;
width:29px;
height:120px;
background:url(http://4.bp.blogspot.com/-_AbyLeD-o6s/UIvWoNibtHI/AAAAAAAAGwM/tUkkFIT9XNY/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(http://4.bp.blogspot.com/-5DKkw5nikZQ/UIvWc91GRRI/AAAAAAAAGwE/-jtMsu4PKnA/s1600/carouselLeftNavDisable.png) 0 0 no-repeat;
cursor:default;
}
.allinone_thumbnailsBanner.mbl .carouselLeftNavDisabled:hover {
background:url(http://4.bp.blogspot.com/-5DKkw5nikZQ/UIvWc91GRRI/AAAAAAAAGwE/-jtMsu4PKnA/s1600/carouselLeftNavDisable.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.mbl .carouselRightNav {
position:absolute;
width:29px;
height:120px;
background:url(http://1.bp.blogspot.com/-5UyTrF06Xcw/UIvWVzUaLeI/AAAAAAAAGv8/bpsfdTPNkRM/s1600/carouselRightNavOn.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_thumbnailsBanner.mbl .carouselRightNav:hover {
background:url(http://1.bp.blogspot.com/-5UyTrF06Xcw/UIvWVzUaLeI/AAAAAAAAGv8/bpsfdTPNkRM/s1600/carouselRightNavOn.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.mbl .carouselRightNavDisabled {
background:url(http://1.bp.blogspot.com/-pevDHKjxqBI/UIvWGpZ49lI/AAAAAAAAGv0/tCN7Z95zTRE/s1600/carouselRightNavDisable.png) 0 0 no-repeat;
cursor:default;
}
.allinone_thumbnailsBanner.mbl .carouselRightNavDisabled:hover {
background:url(http://1.bp.blogspot.com/-pevDHKjxqBI/UIvWGpZ49lI/AAAAAAAAGv0/tCN7Z95zTRE/s1600/carouselRightNavDisable.png) 0 0 no-repeat;
}
- Now in ane lawsuit once to a greater extent than inside the template search for </head> together with inwards a higher identify it glue the next 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 afterwards adding both CSS together with JavaScript coding larn ahead together with relieve your template.
Adding MBL Photo Gallery Widget To Blogger:
- Go to Blogger >> Your Site.
- Layout >> Add a Gadget >> HTML/JavaScript.
- Now glue the next Coding inwards 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=”Photo galleries create add together lots of colors to a website How To Add Advance Photo Gallery Widget inwards Blogger” /></li>
<li data-bottom-thumb=”Thumbnail-Here“><img src=”Full-Image-Here” alt=”Photo galleries create add together lots of colors to a website How To Add Advance Photo Gallery Widget inwards Blogger” /></li>
<li data-bottom-thumb=”Thumbnail-Here“><img src=”Full-Image-here” alt=”Photo galleries create add together lots of colors to a website How To Add Advance Photo Gallery Widget inwards Blogger” /></li>
<li data-bottom-thumb=”Thumbnail-Here“><img src=”Full-Image-here” alt=”Photo galleries create add together lots of colors to a website How To Add Advance Photo Gallery Widget inwards Blogger” /></li>
<li data-bottom-thumb=”Thumbnail-Here” ><img src=”Full-Image-here” alt=”Photo galleries create add together lots of colors to a website How To Add Advance Photo Gallery Widget inwards Blogger” /></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 certain the Thumbnails should move non move to a greater extent than than 100px width together with 60px height.
- Make certain to re-size your gallery images to 295px width together with 110px height.
All Done: After customizing your gallery, larn ahead together with relieve your widget past times pressing Save Template button. Finally, bound to your website together with taste the feast of truthful designing.
From The Editor’s Desk:
Sumber http://www.mybloggerlab.com