Professional JQuery Slideshow Widget for Blogger

Today we give you an amazing and wonderful to Blogspot blog are going to present the slide show widget. However, we know that this particular widget, but your blog will not increase the load time of the slide show by using the greatest benefit may be familiar with. This shows the latest gadgets and lightweight script can be the words which is created by using jQuery. Blogger blog by using jQuery slip show you easily can get dozens connected with benefits. You can easily post your latest can illuminate an image slider to a custom script. You can easily show that the blogger can show the latest and most popular posts. JQuery slide show on your blog by using a number of features that can be. Or the introduction of new lines mostly use Pro Blogger. So you can easily use it on your blog blogger can. In this article, we include jQuery slideshow to blogger professional will guide.

Slideshow Features For Blogger Blog:

Below are the best features of this JQuery Slideshow widget for blogger:

• Helps in increasing pageviews
• Attracted more & more visitors
• Reducing blog bounce rate
• Turning the blog into professional view
• Show popular posts
• Scripting Blog author Bio with Images

How To add Skype Contact Widget In Blogger

How To Add Jquery Slideshow In Blogger Blog

 Step1: 
This is a very simple process just follow all the below given step carefully. Hope you will not face any difficulty one you follow all the steps correctly. Lets go to add this gadget to blogger.

• Go to blogger dashboard:
• Go to template/editor:
• Now find for </head> :
• Now paste the below code before </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='https://www.googledrive.com/host/0B2ww3WS8P1MJS2RNVkFmbkZZWkU' type='text/javascript'/>

Step2:

• Go to blogger dashboard:
• Go to template editor:
• Now find for ]]></b:skin>
• Now paste the below given code before ]]></b:skin>

/*-------------------- MBB jQuery Image Slider -------------*/
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9;width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6fgPJ8FwkU5bl1F0ou5CaKdi_LiA8ALgGlbwNlMmLD6on4Ay5uIwz40bjkqRuP0ArL0c-8Dp2Gd-pPkbhvjVcfcRbtuP2TtXuEdMnTtWxXuVksjUAEBPdbZSevEsRUlPvhUgEpvgkdUE/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;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigb2vO_R-5-3TlXzNb3wpz5QzTFomATJ_d2dEfTVEUzPO4fMLw2ZGMpEeRQSiOF3EyIq6gTADRWx-GTrwCEo_7lajnwWJXO8Kvg7IPQd9vndgNGSBJr8djahie_oRsbwh_ehhELyLfvXg/s1600/featured-prev.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEVmNPbUaH9YhBBL-PucB38rOFfi0vxIQ-ZM1n8zKrXsNdDM7TcsCRKKyRi4OGtRsJDvAmvpu6DQStFVSvH7WkLwLA6WGX3BC7OMdARQemZLAeqTspVUBAh59ZtIy76bN6_mjHpVNFymg/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}

Step3:  
       

• Now search for this code

             <div id='main-wrapper'>

• And Below this code paste the following given code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='featuredposts clearfix'>
<div class='fp-slides'>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='ADD IMAGE-1 LINK HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div>
<h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
</div>
</div>   
<div class='fp-nav clearfix'>
<span class='fp-pager'/>        
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
  
</div>

</b:if></b:if>

Make All These Changes:

• Replace all these ADD POST URL-1, 2, 3, 4, 5 HERE with the URL of your blog post pages. Remember all These URLs will be added twice for each slides. Once for the image and second time for the Post title.
• Replace all these ADD IMAGE-5 LINK HERE with Your Post Image link of the Featured post. Default all these images having width:580px; height:266px; You can easily edit these image size by do editing in the width and height in the CSS code which we shared in step#2. Remember: All your images having Same Size. otherwise it will not work well.
• Replace this >> WRITE POST TITLE HERE... with the title of your own Blog Post Page
• Replace all these >> WRITE POST DESCRIPTION HERE with Post Page Description. You can write 1 or 2  lines of your post here and  the readers could easily read full post by clicking on the title tag.
• If you want to Change the Overall size of the slider widget then simply in step#2 change following two codes and give your own values width:608px and height:400px   
• Now you are done!