How To Add JQuery Image Slider For Blogger
In today's posts we would discuss about adding jQuery image slider for blogger. This image slider for blogger has many features like navigation, fast load time and control option. You can also display a featured posts title and description. The slider is coded to display featured posts only on the blog homepage. This slider was converted from wordpress to blogger by MBT. You can just give it a try.
10. That's all dudes! You're through on adding adding image slider for blogger.
Add jQuery Image Slider To Blogger Blogspot
Follow this easy steps to add the image slider to your blog:
1. Go to Blogger Dashboard => Template => Edit HTML
2. Press Ctrl + F and search for </head>
3. Download the jQuery image slider codes Here
4. Paste the downloaded jQuery codes just above/before the </head> tag.
5. Now press Ctrl + F and search for ]]></b:skin>
6. Paste the below CSS codes above/before ]]></b:skin>
/*-----BlogStable.com jQuery Image Slider For Blogger------*/7. Press Ctrl + F and search for the following:
.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/AVvXsEi1VKko-kZlET2X0L5ntrwRc5RmwMeaP1xG4om-u8vL3YMEkd1RmIpMn2kwuX4ISltGy6ooPjX9s4hpmLlmkqg1MBzzQgxlNXLcb4pIt564Z3KSq3zDmBPRvtLqhyphenhyphenvdkpZuAq6RB23ieYw/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/AVvXsEisauHpJ-Aw_sqVSvl02jiZSM3tbm-xKz3-iYFIST1_CCQRtMm1zDkbzIGVHFTWFvehaCeMslPR8a2Q2kmbl0psziqRukPmwYLUH3S_-4ew8y02ughZdTN22rEkJqd6fvaJpfknCB9NxQk/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/AVvXsEhwbXZVrJ1kA4phn_2UvF-dqtcMA0moBkAWnLSTOKrK4-kB886MDmJn2Z-FbE8vL4_Wqzi_6IhNoOcZp6gF3AKNsJxbRgp5glTEsAQ8K2r05sKzmdk9ouqceMKwnfquhmER_iccFrNoQ9Q/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}
<div id='main-wrapper'>8. Just below it paste the below HTML codes:
<b:if cond='data:blog.pageType != "static_page"'>9. Note: You must have to make this necessary changes before saving your template:
<b:if cond='data:blog.pageType != "item"'>
<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>
- Replace WRITE POST DESCRIPTION HERE with the post page description.
- Replace ADD POST URL-5 HERE with the address (url) of your post pages
- Replace WRITE POST TITLE HERE with the main title of your post pages
- Replace ADD IMAGE-5 LINK HERE with the images url of the featured posts.
10. That's all dudes! You're through on adding adding image slider for blogger.
Feedback!
If you experienced any difficulties adding jQuery image slider to your blog, kindly leave a query below through comment. Also remember to subscribe to our rss feeds to get our latest posts delivered directly to your email inbox.
Be Social: Don't just read and work away, consider sharing this tutorial with your social networking friends.
.gif)
.jpg)
.jpg)
.jpg)
.jpg)