Professional JQuery Slideshow Widget for Blogger

Professional JQuery Slideshow Widget for Blogger

Today we are going to present you an amazing & stunning available slideshow widget for Blogspot blog. However we know that you may familiar with this specific widget earlier but the biggest advantage of by using this slideshow will never increase your blog load time. This slideshow gadget is created using jquery which can be latest and lightest scripting words. By using jquery slip show in blogger blog you can easily get dozens associated with benefits. This slider will script anyone to one image which you may easily turnout for your latest post. You can easily show the newest & popular posts through this blogger slideshow. There can also be uncountable features by making use of jquery slideshow on your blog. Most of Pro blogger using it for introduce them or their newest posts. So you can easily use it on your blogger blog. So in this article we will guide to add professional
jquery slideshow in blogger.

5 Basic SEO Settings for Blogger Blogs

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

Demo

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/AVvXsEiGkDlX5X_yryW6qQFDp2axNUWV0c_-QMucUcVIeqxAc2yov345BD55_R_C7vsChILQ5ZEPGSKU1831EoDzGtWVzk6HaKmSKr2aDvAptKhoiEToZdSMyYhMl_70JnID_q1AMlOOsXLif_8/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/AVvXsEgg0Bws42I8lbb44M2n5NCDJgwAWEkA0ffpzZapQxbm7PqPjDJBec7LaTxgFPGdZvygUfua0cKKY5qVwHm2VomflboPeqMAZytJlPzUbQHvR3T2RniFkiigENK67Ad0u4Gkwo0xeWaAxO0/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/AVvXsEiqEnFOjZsYp5XXNMVvKpP3XE9DXPSeyS6tdSfzRySE1YrLoeVPXqUxa_7HRkFw16S2y1sOEltav8SXjjEaEXMLJQfUWMU6q4WKXxLW-ER9CsaJAT9doe-Na_UyrzqMUlG5zddS7iGX57w/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!

How to Add Featured Images in Blogger Posts

Final Touches:

First of all Let me introduce that this wonderful Slideshow widget is designed by Mohammad Mustafa Ahmedzai of MBT. So all credits goes to him. Let me know your views about this widget in comments till then Peace, Blessings and Happy Blessings.