Attractive Jquery Image Slider Widget For Blogger

Socialize It →

Tweet

47

Advertisements

After the success of Sliding on Hover Jquery Featured Post Slider For Blogger and as per your request we are really delighted to present you yet another dynamic version of image slider widget for blogger blogspot blogs. This image slider is totally different as it is well optimized and hence the speed of this image slider is comparatively faster. Another great feature of this widget is that you can also use it as your Featured post widget which makes it Two in One. This widget is exactly coded from WordPress themes. The Slider is optimizing really well that it will only appear on your home page.

In this Image Slider you can add 5 images with there respective Titles, Descriptions, Images and Post URL. This slider has a forward and backward tool which allows your visitors you take quick look at the featured posts.So instead of chatting, let us start rolling our fingers on Attractive jQuery Image Slider For Blogger. But first I know you would love to preview The Widget so first see the demo

Attractive Jquery Image Slider Widget 

Adding jQuery Of Image Slider in Blogger:

To insert slider in your blog do as follows.

• Go To Blogger.com >> Your Blog
• Now Template >> Back up your Template incase any thing goes wrong
• Now after taking Backup >> Edit Html >> Proceed
• Now Search For </head> (You can search by pressing CTRL+F)
• When you find it Just above it Paste the JQuery Code >> Download Code From Mediafire Or Download Jquery Directly
• Now after pasting the jQuery Code Press Save Template button

Adding Style Sheet Css Of Image Slider in Blogger:

Now we will insert Style sheet CSS in blogger template.

• Go to Blogger.com >> Your Blog
• Now Template >> Edit Html >> Proceed
• Now Search for ]]></b:skin> and just above it paste the following code.

 /*-------------------- MBL 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/AVvXsEjPGdDfbZOxp7S9l5JpCSUx1uf9ILJfmxoMaABHPBf52m_CoGc-HrIqJsR-TIN4WUWB-foBdMKifq8VWzv8gGotE-Gpp2aMRhTHJsbsy3c9_r6VPnUzi4FPKjVZE49E379A1U00ZOS6Tz4/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/AVvXsEiTa-HBVwnWAEgKUrTcTR1aKpxnqqWYPxzr_FzTxOr1wjmleZqLApn3OZIATvipHorcQisN_BDeFhaBl-eXv0fDG1uRoSMBgy_mq9KqvwilPbQChl00XR5gIBeoTM7GiD0zFJxcmfEnHG8/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/AVvXsEhC22NtDEwIlQv1079ul5wwB7xRlzgvWrmNLYy_8Oy8BJWx78PKablLdSZutCYRbaSEM4CAQZiX76hXywu9mCJyWil6O-A_8CSloIrwHUF82YbGrwMyAy1NOh4b7g0wiXZMgHjCfn18-EE/s1600/featured-next.png;) top left no-repeat} .fp-next:hover{opacity:1;} .fp-next:active{opacity:0.7;}

• Now After pasting the style sheet code simply press Save Template. 

Adding The Slider To Blogger Template:

Now we will insert the Slider in our blogger template.

• Now Go To Blogger.com >> Your Blog 
• Then Template >> Edit Html >> Proceed
• Now in the template search for 

<div id='main-wrapper'>

Hint:In the Template you can Find this code near <div id='content-wrapper'>

Note: This is the most important part of our tutorial if you face any problem then simply leave your blog url in comment below and we will solve your problem

• And Just below it <div id='main-wrapper'> paste the following code

• Just below it <div id='main-wrapper'> paste the following 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 '> POST-TITLE HERE-1 </a></h3> <p> POST-DESCRIPTION-HERE-1 </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 '> POST-TITLE HERE-2 </a></h3> <p> POST-DESCRIPTION-HERE-2 </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 '> POST-TITLE HERE-3 </a></h3> <p> POST-DESCRIPTION-HERE-3 </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 '> POST-TITLE HERE-4 </a></h3> <p> POST-DESCRIPTION-HERE-4 </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 '> POST-TITLE HERE-5 </a></h3> <p> POST-DESCRIPTION-HERE-5 </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>

Customization:

To customize your widget do as follows.

For First Image Slider:
Replace ADD-POST-URL-1-HERE  with the URL of your post
Replace ADD-IMAGE-1-LINK-HERE with the image link of your post
Replace POST-TITLE HERE-1 with the title of your post
Replace POST-DESCRIPTION-HERE-1 With the description of your post

---

For Second Image Slider:
Replace ADD-POST-URL-2-HERE with the URL of your post
Replace ADD-IMAGE-2-LINK-HERE with the image link of your post
Replace POST-TITLE HERE-2 with the title of your post
Replace POST-DESCRIPTION-HERE-2 With the description of your post

---

For Third Image Slider:
Replace ADD-POST-URL-3 HERE with the URL of your post
Replace ADD-IMAGE-3-LINK-HERE with the image link of your post
Replace POST-TITLE HERE-3 with the title of your post
Replace POST-DESCRIPTION-HERE-3 With the description of your post

---

For Fourth Image Slider:
Replace ADD-POST-URL-4-HERE with the URL of your post
Replace ADD-IMAGE-4-LINK-HERE with the image link of your post
Replace POST-TITLE HERE-4 with the title of your post
Replace POST-DESCRIPTION-HERE-4 With the description of your post

---

For Fifth Image Slider:
Replace ADD-POST-URL-5-HERE with the URL of your post
Replace ADD-IMAGE-5-LINK-HERE with the image link of your post
Replace POST-TITLE HERE-5 with the title of your post
Replace POST-DESCRIPTION-HERE-5 With the description of your post

---

• Now after personalizing your slider save your template by pressing Save Template button.

If you face any problem during the implementation of this widget feel free to ask. Just leave your comment below and I will try my best to resolve your problem. Till then peace, blessings and happy optimizing.

Credits:www.MyBloggerTricks.com

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).