Get Latest Tricks Alert Daily
Follow Readers

jQuery Image Slider For Blogger - V3


SHARE:

Jquery-Blogger-slider
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 Featured Posts 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. So lets first see a demo,


Live Demo


Adding the Slider To Blogger:

Kindly follow these steps:
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for </head>
  4. Just above it paste the jQuery code in this page -> Slider jQuery Code
  5. Then search for ]]></b:skin>
  6. Just above it paste the CSS code below,
/*-------------------- MMK 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/AVvXsEjsNsrJXnsb2t2zxkWbX_G8YctoKhieeI7xA5bkQKRNv-TQFQCk9y3guvCedD3Y6RJ6pO-iO_l7RgpW9nXN0FgHAZwZlMoQQSl6y4kLydiDk-c7_fLMVT6B0WQegWXoboFsCEchZR8NWDE/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/AVvXsEg3_5TnaKTjd10bkKxJRXsXOGSHzR6t1ZLAPAecKCJIr8j8iaqfDuHyq8jPPu2F9RB-a-4QimUJOqvgLnHWfvaQsOzpynVQsXo_VtvEuWSoAIGBH9Ux3mNEupuVIsjrZnCKbcju4eQV88k/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/AVvXsEiqJdgk81El5ySkMYuLVIH6_ynQG361MHWf4cXgjYasf_2f16tGfJh40DTKi9nE9feSVuogiZGEvf_D4vfGICKZQcgEm671_99ToGiALKklbjPWDa5YOFgzXj0dGwUajNSbSMhmSwauzJM/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}

7. Now Search for this,

<div id='main-wrapper'>
Hint: This code is located near <div id='content-wrapper'>
PS: 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.
   8.   and just below it add the HTML code below,



<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 these changes:
   9.   Save your template and you are done! Visit your blog and say Bingo! :>

Previous Versions:

You can also check the old versions here,
If you faced any problem implementing this tutorial then please do not hesitate to post your question. Would be a pleasure helping you. Have Fun! :>




SHARE:



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!

 

1 comment:

  1. very informative articular, Thanks for sharing this
    http://www.mybloggertools.com/

    ReplyDelete