How To Add JQuery Image Slider For Blogger

Home » WIDGETS » How To Add JQuery Image Slider For Blogger

How To Add JQuery Image Slider For Blogger

Posted by Unknown Wednesday 24 July 2013 0 comments

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.

Must Read:- How To Add Related Posts With Thumbnail To 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------*/
.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;}

7. Press Ctrl + F and search for the following:

<div id='main-wrapper'>

8. Just below it paste the below HTML codes:

<b:if cond='data:blog.pageType != "static_page"'>
<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>

9. Note: You must have to make this necessary changes before saving your template:

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.

Categories: WIDGETS

bollywood latest news