Master Blogging Tips: Slideshow Widgets

How To Create Stunning Slideshows In Blogger?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgWnH6w6vRbmgTG08i9KmKGWJJ7EZqfZY_dpyABZvoOf3qvKWp3tXTKsZofzQItkh6nXvStYJyPq717ZOI0dcCM_yuqFCsEbvrQbkSL3R5b2aVWnXbxqHlERVCQxuIizgs-X1eJSpDi0/s1600/Blogger-Slideshow%5B28%5D.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgWnH6w6vRbmgTG08i9KmKGWJJ7EZqfZY_dpyABZvoOf3qvKWp3tXTKsZofzQItkh6nXvStYJyPq717ZOI0dcCM_yuqFCsEbvrQbkSL3R5b2aVWnXbxqHlERVCQxuIizgs-X1eJSpDi0/s1600/Blogger-Slideshow%5B28%5D.gif" width="320" /></a></div>
<h3 style="text-align: left;">
<i style="font-weight: normal;"><span style="background-color: white; color: #333333; font-family: Verdana, arial; line-height: 20.796875px; text-align: justify;">Well this is surely gona cheer up us all. After a lot of struggle a simple coded Slideshow came across my mind while reading </span><a href="http://www.serie3.info/s3slider/" style="background-color: white; color: #289728; font-family: Verdana, arial; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">Boban Karišik’s</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; line-height: 20.796875px; text-align: justify;"> article on Jquery Slideshow. The code that he created is in fact plausible and after tweaking a portion of the CSS and some HTML provided by him, I was able to create a compatible version of the Slide Show for Blogger. </span></i></h3>
<div>
<span style="background-color: #38761d; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Note:</span><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> A More updated version can be found here -> </span><a href="http://www.mybloggertricks.com/2011/06/jquery-image-slider-for-blogger-v3.html" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-decoration: none;" target="_blank">jQuery Image Slider For Blogger - V3</a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
How To Add Jquery SlideShow To Blogger Templates?</h4>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
I have tried my best to make the code installation as easier as possible. You just need to copy the code and paste it in the HTML/Javascript widget. Thats it!</div>
<ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<li>Go To <a href="http://blogger.com/" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Blogger</a> > <strong>Design</strong></li>
<li>Choose <strong>Add a Page Element</strong></li>
<li>Then choose <strong>HTML/JavaScript</strong> widget</li>
<li>Inside the widget paste the code below,</li>
</ol>
<div>
<span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="background-color: #f3f3f3; line-height: 20.796875px;"><br /></span></span></div>
<div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script><br /><script type="text/javascript"><br />    $(document).ready(function() {<br />   $('#MBT-slider').s3Slider({<br />      <span style="color: teal; font-size: x-small;"><strong>timeOut: 3000</strong></span><br />   });<br />});<br /></script></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><style></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">#MBT-slider {<br />   <strong><span style="font-size: x-small;">width: 590px</span></strong>; /* Keep it 20px-40PX greater than ACTUAL Image size */<br />   <strong><span style="font-size: x-small;">height: 335px</span></strong>;<br />   position: relative;<br />   overflow: hidden;<br />   margin-left: 0;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">#MBT-sliderContent {<br />   <strong><span style="font-size: x-small;">width: 590px</span></strong>;<br />   position: absolute;<br />   top: 0;<br />   margin-left: 0;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.MBT-sliderImage {<br />   float: left;<br />   position: relative;<br />   display: none;  top: 0;<br />   border:1px solid #ddd;</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.MBT-sliderImage span {<br />position: absolute;<br />    font: 10px/15px sans-serif,Arial, Helvetica;<br />    padding: 10px 10px;<br />    background-color: #000;<br />    color: #fff;<br />    filter:'alpha(opacity=70)';<br />    -moz-opacity: .5;<br />    -khtml-opacity: .5;<br />    opacity: .5;<br />    text-align:justify;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.MBT-sliderImage span a {</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">text-decoration:underline;<br />color:#FE6602;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.clear {<br />   clear: both;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.top {<br />    top: 0;<br />    left: 0;<br />    width: 570px !important;<br />    height: 70px;<br />}<br />.bottom {<br />    bottom: 0;<br />    left: 0;<br />    width: 570px !important;<br />    height:90px;<br />}<br />.left {<br />    left: 0;<br />    top: 0;<br />    width: 110px !important;<br />    height: 335px;<br />}<br />.right {<br />    right: 0;<br />    bottom: 0;<br />    width: 80px !important;<br />    height: 319px;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"></style><br /><br /><div id="MBT-slider"><br /><ul id="MBT-sliderContent"></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><li class="MBT-sliderImage"><br /><img src="<span style="color: green; font-size: x-small;"><strong>URL OF IMAGE</strong></span>" /><br /><span class="<span style="color: #0080ff; font-size: small;"><strong>right</strong></span>"><h3><strong>HEADING-1 GOES HERE</strong></h3><strong>DESCRIPTION GOES HERE</strong></span><br /></li></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><li class="MBT-sliderImage"><br /><img src="<span style="color: green; font-size: x-small;"><strong>URL OF IMAGE</strong></span>" /><br /><span class="<span style="color: #0080ff; font-size: small;"><strong>left</strong></span>"><h3><strong>HEADING-2 GOES HERE</strong></h3><strong>DESCRIPTION GOES HERE</strong></span><br /></li></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><br /><li class="MBT-sliderImage"><br /><img src="<span style="color: green; font-size: x-small;"><strong>URL OF IMAGE</strong></span>" /><br /><span class="<span style="color: #0080ff; font-size: small;"><strong>top</strong></span>"><h3><strong>HEADING-3 GOES HERE</strong></h3><strong>DESCRIPTION GOES HERE</strong></span></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"></li><br /><li class="MBT-sliderImage"><br /><img src="<span style="color: green; font-size: x-small;"><strong>URL OF IMAGE</strong></span>" /><br /><span class="<span style="color: #0080ff; font-size: small;"><strong>bottom</strong></span>"><h3><strong>HEADING-4 GOES HERE</strong></h3><strong>DESCRIPTION GOES HERE</strong></span><br /></li></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><br /><li class="MBT-sliderImage"><br /><img src="<span style="color: green; font-size: x-small;"><strong>URL OF IMAGE</strong></span>" /><br /><span class="<span style="color: #0080ff; font-size: small;"><strong>bottom</strong></span>"><h3><strong>HEADING-5 GOES HERE</strong></h3><strong>DESCRIPTION GOES HERE</strong></span></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"></li><br /><span style="color: purple; font-size: x-small;"><strong><div class="clear MBT-sliderImage"></div> </strong></span></ul><br /></div></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><br/> </span></div>
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
How To Customize The Slideshow Code?</h4>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Simply replace <span style="color: green; font-size: x-small;"><strong>URL OF IMAGE</strong></span> with the Image link and replace <strong>bolded black texts</strong> with your preferred headings and descriptions. You can play around how the slider appears. If you want the slider to appear from bottom then change the class to <span style="color: #0080ff; font-size: small;"><strong>bottom</strong></span> if you want the slider to appear from right then change it to <span style="color: #0080ff; font-size: small;"><strong>right</strong></span> and so on. If you wish you can set all sliders to bottom or top or to any position you wish.</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
If you want to slow down the speed with which the slider come and go then set <span style="color: teal; font-size: x-small;"><strong>timeOut: 3000</strong></span> to a higher value like 4000 or 5000.</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
The default size of all images that I have used in this tutorial is having a width=550px and height=335px. So take images of equal size and then play around the sizes  <span style="font-size: x-small;"><strong>width: 590px</strong>and<strong> </strong><span style="font-size: x-small;"><strong>height: 335px </strong>You can note that the width size i.e (590px) is greater than the actual image size of 550px. You will have to keep the width 20-40px greater than the actual image size so that the image may perfectly fit into the slide. </span></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="font-size: x-small;"><span style="font-size: x-small;"><br /></span></span></div>
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
How To Add More Images Or Remove an Image From the Slider?</h4>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
To add an extra image just above <span style="color: purple; font-size: x-small;"><strong><div class="clear MBT-sliderImage"></div></strong> <span style="color: black;">add this code, </span></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="color: purple; font-size: x-small;"><span style="color: black;"><br /></span></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><li class="MBT-sliderImage"> </span><br />
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><img src="</span><span style="background-color: #f2f1f1; color: green; font-size: x-small; line-height: 15.203125px;"><strong>URL OF IMAGE</strong></span><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">" /> </span><br />
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><span class="</span><span style="background-color: #f2f1f1; color: #0080ff; font-size: small; line-height: 15.203125px;"><strong>bottom</strong></span><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">"><h3></span><strong style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">HEADING GOES HERE</strong><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"></h3></span><strong style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">DESCRIPTION GOES HERE</strong><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"></span> </span><br />
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"></li></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Since you now know how to add an image then you will have certainly figured it out how to remove an image from the slide. I leave it on you. I know you guys are no less than Eienstein! =p</div>
<div align="center" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="color: #0080ff; font-size: small;"><strong><br /></strong></span></div>
<div align="center" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="color: #0080ff; font-size: small;"><strong>That’s All!</strong></span></div>
<div align="center" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="color: #0080ff; font-size: small;"><strong><br /></strong></span></div>
<div align="left" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="color: #0080ff; font-size: small;"><span style="color: black; font-size: x-small;"><a href="http://www.serie3.info/s3slider/demonstration.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Click here to see a Demo at Boban Karišik’s website</a></span><span style="color: black; font-size: x-small;"></span> </span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
I just hope you may find the tutorial useful and worth trying. If you find anything unclear then kindly do not hesitate to let me know. Peace out! :)</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span>
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<div style="text-align: right;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">By Ashley LArrimore</span></div>
<div style="text-align: right;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">***</span></div>
</div>
</div>
</div>
</div>

How To Create Stunning Slideshows In Blogger?

Well this is surely gona cheer up us all. After a lot of struggle a simple coded Slideshow came across my mind while reading Boban Kari...

Create a Mind Blowing Slideshow In Blogger With Navigation

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSmYgepNKH8BTwYF5NfvO_EBOcfoDvEl5wtlCBi1wpYOdwd53QLJSegQJpMaVexGGMjVM281mw6Xx4_9mELJ8Wj1FjoHUyo9jfJT-UqGWYgC9bGQmZJ1pNVp-ICOSiY2ukLIbSYkxvgM/s1600/Blogger-Slideshow_thumb%5B12%5D.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSmYgepNKH8BTwYF5NfvO_EBOcfoDvEl5wtlCBi1wpYOdwd53QLJSegQJpMaVexGGMjVM281mw6Xx4_9mELJ8Wj1FjoHUyo9jfJT-UqGWYgC9bGQmZJ1pNVp-ICOSiY2ukLIbSYkxvgM/s1600/Blogger-Slideshow_thumb%5B12%5D.gif" width="400" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Last day I shared a simple tutorial which tells </span><a href="http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-decoration: none;" target="_blank">how to a create Slideshow For Blogger</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">. Today we have yet another more advanced slider that has some awesome effects added to it. You can navigate between images and the slideshow has opacity plus slice image effects. All adds up just more spice to the slideshow. This slider is created by</span><a href="http://dev7studios.com/" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-decoration: none;" target="_blank" title="http://dev7studios.com/">dev7studios.com</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> and modified by us. Kindly have a look at the demo before we may start learning how to create this new Jquery slider.</span><br />
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: #38761d; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">Note:</span><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> A More Updated version can be found here -> </span><a href="http://www.mybloggertricks.com/2011/06/jquery-image-slider-for-blogger-v3.html" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">jQuery Image Slider For Blogger - V3</a><br />
<br />
<div style="color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #cc0000;">NB:</span><span style="background-color: white;"> If you have slow network connection then kindly have patience till the slideshow loads.</span></div>
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
How to add the Slideshow to blogger?</h4>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
The methods as usual are more easy than you can imagine. Follow up,</div>
<ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<li>Go To <a href="http://blogger.com/" style="color: #289728; outline: none; text-decoration: none;">Blogger</a> > <strong>Design</strong></li>
<li>Choose <strong>Add a Page Element</strong></li>
<li>Then choose <strong>HTML/JavaScript</strong> widget</li>
<li>Inside the widget paste the code below,</li>
</ol>
<div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><script type="text/javascript"><br />$(window).load(function() {<br />    $('#slider').nivoSlider();<br />});<br /></script></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><style><br />#slider {<br />    position:relative;<br />}<br />#slider img {<br />        position:absolute;<br />    top:0px;<br />    left:0px;<br />    display:none;<br />}<br />#slider a {<br />    border:0;<br />    display:block;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.nivo-controlNav {<br />    position:absolute;<br />    left:260px;<br />    bottom:-42px;<br />}<br />.nivo-controlNav a {<br />    display:block;<br />    width:22px;<br />    height:22px;<br />    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0X2nKWHVR51vG2LbYcu-vNaz-Ch0reqNPlxELySsj3ME9QVR4BrZfHO1z47Bldg-W4Qmf4Vn6KI-3WZaiWmeOHl3fwhRyPiAVlB-RvfDSjCkBHu18YkCHBF7GSh-g9Kq5OguNkghdY4/s400/bullets.png) no-repeat;<br />    text-indent:-9999px;<br />    border:0;<br />    margin-right:3px;<br />    float:left;<br />}<br />.nivo-controlNav a.active {<br />    background-position:0 -22px;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.nivo-directionNav a {<br />    display:block;<br />    width:30px;<br />    height:30px;<br />    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiox-NSA6ja9Iuq4Ysw9ZObnOXqJHgt0pV72w7lDTOypaNGcExNpB1PfUXtsJc-JqMUI_QD7u81TfD5bB6S77SO0hmVEuxFi-TEPYsponWSCdXhdrQ8f5ltvXJOKczUUVdSGooLUTUGaos/s400/arrows.png) no-repeat;<br />    text-indent:-9999px;<br />    border:0;<br />}<br />a.nivo-nextNav {<br />    background-position:-30px 0;<br />    right:15px;<br />}<br />a.nivo-prevNav {<br />    left:15px;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.nivo-caption {<br />    text-shadow:none;<br />    font-family: Helvetica, Arial, sans-serif;<br />    font-size:16px;<br />    padding: 10px 0px;<br />}<br />.nivo-caption a {<br />    color:#efe9d1;<br />    text-decoration:underline;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.clear {<br />    clear:both;<br />}</span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;">.nivoSlider {<br />    position:relative;<br />}<br />.nivoSlider img {<br />    position:absolute;<br />    top:0px;<br />    left:0px;<br />}<br />.nivoSlider a.nivo-imageLink {<br />    position:absolute;<br />    top:0px;<br />    left:0px;<br />    width:100%;<br />    height:100%;<br />    border:0;<br />    padding:0;<br />    margin:0;<br />    z-index:60;<br />    display:none;<br />}<br /><br />.nivo-slice {<br />    display:block;<br />    position:absolute;<br />    z-index:50;<br />    height:100%;<br />}<br />.nivo-caption {<br />    position:absolute;<br />    left:0px;<br />    bottom:0px;<br />    background:#000;<br />    color:#fff;<br />    opacity:0.7; /* Overridden by captionOpacity setting */<br />    width:100%;<br />    z-index:89;<br />}<br />.nivo-caption p {<br />    padding:5px;<br />    margin:0;<br />}<br />.nivo-caption a {<br />    display:inline !important;<br />}<br />.nivo-html-caption {<br />    display:none;<br />}<br /><br />.nivo-directionNav a {<br />    position:absolute;<br />    top:45%;<br />    z-index:99;<br />    cursor:pointer;<br />}<br />.nivo-prevNav {<br />    left:0px;<br />}<br />.nivo-nextNav {<br />    right:0px;<br />}<br />.nivo-controlNav a {<br />    position:relative;<br />    z-index:99;<br />    cursor:pointer;<br />}<br />.nivo-controlNav a.active {<br />    font-weight:bold;<br />}<br /></style></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><div id="slider"></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><br /><img src="<strong>URL Of Image</strong>" alt="" <strong>title="Description Goes Here"</strong> /></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><img src="<strong>URL Of Image</strong>" alt="" <strong>title="Description Goes Here"</strong> /></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><img src="<strong>URL Of Image</strong>" alt="" <strong>title="Description Goes Here"</strong> /></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><img src="<strong>URL Of Image</strong>" alt="" <strong>title="Description Goes Here"</strong> /></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><img src="<strong>URL Of Image</strong>" alt="" <span style="color: #0080ff;"><strong>title="#htmlcaption"</strong></span> /></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<strong><span style="background-color: #f3f3f3; color: green; font-size: x-small;"></div></span></strong></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><span style="color: #0080ff;"><!—Write Descriptoon With Links In this Part—></span><br /><div id="<span style="color: #0080ff;"><strong>htmlcaption</strong></span>" class="nivo-html-caption"><br /><strong>Cool na? :) Now Learn How to create one by <a href="</strong><a href="http://masterbloggingtips.blogspot.com/" rel="nofollow" target="_blank">http://masterbloggingtips.blogspot.com</a><strong>">Clicking here</a> </strong></div></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><br /><br/><br /><br/></span></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px;">
<span style="background-color: #f3f3f3;"><br /></span></div>
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
How To Customize the Slider?</h4>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Of course its fun to customize it first using <a href="http://www.mdn.fm/files/90628_ivtxl/MBTHTMLEditor.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">MBT HTML Editor</a> :)</div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Replace <strong>URL Of Image</strong> with image link and <strong>Description Goes Here</strong> with any stuff that you may write. If you want to show no caption/description then simply delete<strong>title="Description Goes Here"</strong></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
If you wish to add effects to text or use a link then use <span style="color: #0080ff;"><strong>title="#htmlcaption"</strong></span>  instead and then add your description as I have done after <div id="<span style="color: #0080ff;"><strong>htmlcaption</strong></span>" class="nivo-html-caption"> . If you are finding this part difficult then let me know to which image do you want to add the effect. I will provide you with the code required. </div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<u><span style="color: red; font-size: small;"><strong>Note:</strong></span></u>  Please Note that you will need to use Images with equal sizes. The default size of all images used in this tutorial is 618 x 270. To learn how to adjust image sizes using Photoshop read this tutorial. <a href="http://www.mybloggertricks.com/2010/01/photoshop-image-editing-basics-for.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Photoshop Image Editing Basics For bloggers</a></div>
<h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;">
How To add More Images?</h4>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
To add another image simply paste the code below just above <strong><span style="color: green; font-size: x-small;"></div></span></strong></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<strong><span style="color: green; font-size: x-small;"><br /></span></strong></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><img src="</span><strong style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">URL Of Image</strong><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">" alt="" </span><strong style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">title="Description Goes Here"</strong><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"> /></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<strong style="color: #0080ff; font-size: small; text-align: -webkit-center;">                                                                 That’s it! Enjoy :)</strong></div>
<div style="font-family: Verdana, arial; line-height: 20.796875px; text-align: right;">
<span style="background-color: #f3f3f3; color: #0080ff; font-size: x-small;">BY Ashley Larrimore</span></div>
<div style="font-family: Verdana, arial; line-height: 20.796875px; text-align: right;">
<span style="background-color: #f3f3f3; color: #0080ff; font-size: x-small;">*** ***</span></div>
</div>
</div>

Create a Mind Blowing Slideshow In Blogger With Navigation

Last day I shared a simple tutorial which tells how to a create Slideshow For Blogger . Today we have yet another more advanced slide...

jQuery Image Slider For Blogger - V3

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXYyat4DFMEs-L1629sleEfw4nE-liaD32Uz2_soRIyN5PRaPrfVYc9gy6q7USSh74WQbxhYXsdD_uWecA-WjzqCk0jyr2dBl8ui3GB7d9w4N6K1B3f9c6UbRL5zld77OaD1HCmE7qKQ/s1600/Jquery-Blogger-slider%255B14%255D.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="361" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXYyat4DFMEs-L1629sleEfw4nE-liaD32Uz2_soRIyN5PRaPrfVYc9gy6q7USSh74WQbxhYXsdD_uWecA-WjzqCk0jyr2dBl8ui3GB7d9w4N6K1B3f9c6UbRL5zld77OaD1HCmE7qKQ/s1600/Jquery-Blogger-slider%255B14%255D.jpg" width="640" /></a></div>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">As per your requests we are glad to present yet another stunning version of Image slideshow Widget for BlogSpot blogs. This widget is different from its previous versions with regard to speed, load time, navigation and control options. You can use it to display even your </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">Featured Posts</i><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> using the Featured post title and description. This widget is again an extracted code from a WordPress template. The slider is coded such that it will appear on your homepage only. </span><br />
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span>
<br />
<h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;">
Adding the Slider To Blogger:</h3>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Kindly follow these steps:</span><br />
<ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<li>Go To Blogger > Design > Edit HTML</li>
<li>Backup your template</li>
<li>Search for <b></head></b></li>
<li>Just above it paste the jQuery code in this page -> <a href="https://sites.google.com/site/mybloggertricks/Home/MBTSlider.txt?attredirects=0&d=1" rel="nofollow" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Slider jQuery Code</a></li>
<li>Then search for <b>]]></b:skin></b></li>
<li>Just above it paste the CSS code below,</li>
</ol>
<div>
<span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 20.796875px;"><br /></span></span></div>
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">/*-------------------- MBT jQuery Image Slider -------------*/</span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.featuredposts{border:1px solid #E9E7DE;</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">width:608px</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">;background:#FFF;margin:0 0 10px 0;</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">height:400px</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">;overflow:hidden;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-slides{} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-post{padding:13px;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-thumbnail:hover{border:3px solid #CAC9C9;</span><span style="color: #9b00d3; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><b>width:580px</b>;<b>height:266px</b></span><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">;margin-bottom:10px;overflow:hidden;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-title a{color:#000;text-decoration:none;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-title a:hover{color:#0080fF;text-decoration:none;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-nav{width:590px;padding:0px 10px;height:14px;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFpLZbQtZvSFcXu2mj2KBVYvf09UBo2C-bhddwD01m_Ihwoght3oz8MXrLePExYn04CaEGUYYkiV9vptVvElzb3gs7OuZobcpGyMOj707Ak6RcUMdFWzoJlTgIMCZsGywcOb_7yVm2V0/s1600/featured-pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jeZ-TPXSqBoTVOd8i6NE3QX1QtVEuNGQ_wC_vppCB99eIyzLMERCSAcqr-Y0cBeG78Z5-TovqIOLR-TGZLPwitqQt5nr5vB9Rb25MxNuUS0wjJ-v2bPq2BAPpLtj24cS3zW-NkXGSsc/s1600/featured-prev.png) top left no-repeat;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-prev:hover{opacity:1;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-prev:active{opacity:0.7;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI1Jf05lPihgBcNJeiY6pGqdELI7Iy_2NCrnEGhr0LZ9bkx2DeqPL3_p8ugRPonU4FjbgvoTkCyAd7EvxIsUaEcUrbpPj_9bTqv93h1VDWwtcWcUShYFEDHFpYRpIzAE7MOsLVfH3zPCU/s1600/featured-next.png;) top left no-repeat} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-next:hover{opacity:1;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">.fp-next:active{opacity:0.7;}</span></div>
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">7.   Now Search for this, </span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span></div>
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div id='main-wrapper'></span></div>
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div>
<span style="background-color: white; color: green; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><b>Hint:</b></span><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> This code is located near </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><div id='content-wrapper'></i></div>
<div>
<i><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /></i><b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">NB:</b><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">In this part most of you will face problems as the coding for each template differ. If you could not find this code then do not panic and simply post your Blog URL in the comments.</i></div>
<div>
<i><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /></i><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">8.   and just below it add the HTML code below,</span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span></div>
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><b:if cond='data:blog.pageType != &quot;static_page&quot;'> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><b:if cond='data:blog.pageType != &quot;item&quot;'></span><br />
<br style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;" />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='featuredposts clearfix'></span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-slides'></span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-post'> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-thumbnail'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-1 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'><img src='</span><span style="color: #9b00d3; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><b>ADD IMAGE-1 LINK HERE</b></span><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'/></a></div><h3 class='fp-title'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-1 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'></span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><span style="color: #4bacc6;">WRITE POST TITLE HERE...</span></b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></a></h3> <p></span><span style="color: green; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> <b>WRITE POST DESCRIPTION HERE...</b></span><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> </p> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></div></span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-post'> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-thumbnail'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-2 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'><img src='</span><span style="color: #9b00d3; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><b>ADD IMAGE-2 LINK HERE</b></span><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'/></a></div> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><h3 class='fp-title'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-2 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'></span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><span style="color: #4bacc6;">WRITE POST TITLE HERE...</span></b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></a></h3> <p></span><span style="color: green; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> <b>WRITE POST DESCRIPTION HERE...</b></span><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> </p> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></div></span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-post'> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-thumbnail'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-3 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'><img src='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><span style="color: #9b00d3;">ADD IMAGE-3 LINK HERE</span></b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'/></a></div> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><h3 class='fp-title'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-3 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'></span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><span style="color: #4bacc6;">WRITE POST TITLE HERE...</span></b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></a></h3> <p></span><span style="color: green; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> <b>WRITE POST DESCRIPTION HERE...</b></span><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> </p> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></div></span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-post'> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-thumbnail'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-4 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'><img src='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><span style="color: #9b00d3;">ADD IMAGE-4 LINK HERE</span></b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'/></a></div> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><h3 class='fp-title'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-4 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'></span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><span style="color: #4bacc6;">WRITE POST TITLE HERE...</span></b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></a></h3> <p></span><span style="color: green; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> <b>WRITE POST DESCRIPTION HERE...</b></span><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> </p> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></div></span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-post'> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-thumbnail'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-5 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'><img src='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><span style="color: #9b00d3;">ADD IMAGE-5 LINK HERE</span></b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'/></a></div> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><h3 class='fp-title'><a href='</span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">ADD POST URL-5 HERE</b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">'></span><b style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><span style="color: #4bacc6;">WRITE POST TITLE HERE...</span></b><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></a></h3> <p></span><span style="color: green; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> <b>WRITE POST DESCRIPTION HERE...</b></span><span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"> </p> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></div></span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></div>           </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><div class='fp-nav clearfix'> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><span class='fp-pager'/>                </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><a class='fp-next' href='#fp-next'/> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><a class='fp-prev' href='#fp-prev'/> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></div> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;">          </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></div></span><br />
<br style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;" />
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"></b:if></b:if></span></div>
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Make these changes:</span><br />
<ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <b>ADD POST URL-1, 2, 3, 4, 5 HERE </b>with the URL of your post pages one by one. These URLs will be added twice for each slide. Once for the image and second time for the Post title.</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <b><span style="color: #9b00d3;">ADD IMAGE-5 LINK HERE </span></b>with the Image link of the Featured post. By default all images have <span style="color: #9b00d3;"><b>width:580px</b>; <b>height:266px</b></span>; You can edit the image size by editing the width and height in the CSS code shared in step#6. Make sure all your images must have same size</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <b><span style="color: #4bacc6;">WRITE POST TITLE HERE... </span></b>with the title of your Post Page</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace<span style="color: green;"> <b>WRITE POST DESCRIPTION HERE</b></span> with the Post Page description. You can write the first few lines of your post here and the readers can read the full post by clicking the title.</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">To Change the Overall size of the slider container then edit in step#6 the following two codes -> <b>width:608px </b>and <b>height:400px</b></li>
</ul>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">   9.   Save your template and you are done! Visit your blog and say Bingo! :></span><br />
<h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;">
Previous Versions:</h3>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">You can also check the old versions here,</span><br />
<ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><a href="http://masterbloggingtips.blogspot.com/2013/10/how-to-create-stunning-slideshows-in.html" rel="nofollow" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Create Slideshow in Blogger -V1</a></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><a href="http://masterbloggingtips.blogspot.com/2013/10/create-mind-blowing-slideshow-in.html" rel="nofollow" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Create Image Slideshow For Blogger Blogs -V2</a></li>
</ul>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">If you faced any problem implementing this tutorial then please do not hesitate to </span>post your question<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">. Would be a pleasure helping you. Have Fun! :></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span></div>
<div>
<div style="text-align: center;">
<span style="background-color: #f2f1f1; color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; text-align: right;">                                                                                                                                By Ashley LArrimore</span></div>
</div>
</div>

jQuery Image Slider For Blogger - V3

As per your requests we are glad to present yet another stunning version of Image slideshow Widget for BlogSpot blogs. This ...