You are Here : / / Attractive Jquery Image Slider Widget For Blogger

Saturday, 28 April 2012

Attractive Jquery Image Slider Widget For Blogger


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





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/AVvXsEjo2UHCfJy6f0CwVg6it-8wEAFdNUbW13rWLYS4HmV7bJpktO58i3m5Y9S982TZ-461L7O6rcSqMcpkBEiO-jRaYB7VHaC4MLYDcdVASzBelIBq70T9KWazo_xocBSfor2XWUveQRulkXQ/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/AVvXsEioYkWt715KoZI7khqNaRabfWcL_nEl-xTEUKGqMVblm-lIbU-FtbMytLvwzUHg4XZd1rYpOAg1JbRhNKXekgUejrlI1boSsFF-0mfTprYJnklSytfh5qEo-f2GQzMmf7V0G_Zz4t2wx9Q/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/AVvXsEhISZJHGGMne7GHjqDWAJfyyTwqVfdbIziSQCcEiZ_prqTxcI-zlBZe2vKHfu-EafEe4gVOfQ2Vd50I9Dhl0YPsem97lbb3IUceq_XNN9oO2DdkVdR0Zhz-q2zLsxarzk8Z7GB7-SEZZxo/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
Attractive Jquery Image Slider Widget For Blogger
4/ 5
By
On Comment

GET OUR BLOGGING SECRETS DIRECTLY TO YOUR INBOX!

Want access to our blogging secrets,We never shared on our blog.Just enter your email address below to get access to our 3 ultimate guides on how to run a successful blog!

Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!

Subscribe to: Post Comments (Atom)