Attractive Jquery Image Slider Widget For Blogger

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





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(http://4.bp.blogspot.com/-Bc53drZbsOc/TeDnc3a2_AI/AAAAAAAAHJ4/NlGJlRzJ3dE/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(http://2.bp.blogspot.com/-xrvnRlI02a8/TeDndJyHamI/AAAAAAAAHKA/VSA--b82v9w/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(http://1.bp.blogspot.com/-UzsUMLmRXT4/TeDnchM8AEI/AAAAAAAAHJw/pOOPL9dK6-g/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

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

Comment With:
OR
Choose Wisely!

47 comments

April 28, 2012 at 7:36 PM

very nice post.. do you have any demo from this?
one thing to ask how did you put a + sign your related post? any tutorial?

marky

April 28, 2012 at 8:07 PM

cant find it second step main wrapper

Editorial Team MOD
April 29, 2012 at 12:12 AM

@Mark Alonzo

Thanks For liking the post yeh we have the demo of this widget which is shared above you can check it And In related post it is a Image which is attached to each related post. Soon we will share a tutorial on it. Peace buddy

@Parigyan Tamuly

Brother if you are unable to find it then don't paste the code in wrapper. Paste it Any where you like for example Go To Layout>> Add a Gadget >> Html Javascript >> And paste the code there >> Save it >> Now Arrange then gadget where ever you like. Peace and Blessing Pal

April 29, 2012 at 10:30 AM

But why cant I find wrapper? Anyways I will try it..

April 29, 2012 at 10:42 AM

Bro one more thing it would be nice if you upload Jquery in pastebin or g code.

Editorial Team MOD
April 29, 2012 at 10:43 AM

@Parigyan Tamuly

Few Custom Blogger template are not well optimized this is the reason why your blog does not have Wrapper option. It can be done if we edit your template. But this is critical work you have to give me admin access to your blog so i can edit your template. Peace and Blessing Buddy

Editorial Team MOD
April 29, 2012 at 10:49 AM

@Parigyan Tamuly

Ok Brother You Can Get The Jquery Code From Here Download Jquery Direct View Peace Buddy

April 30, 2012 at 6:53 AM

I have a lot of questions Faizan, kindly give me your email address.

Editorial Team MOD
April 30, 2012 at 7:35 AM

Ok Brother I will Give you my Email Address on Google Plus Privately. You can Add me Here is the Link https://plus.google.com/u/0/106374439082237286396 Peace and Blessing Buddy

May 1, 2012 at 3:11 AM

Thank you!

May 5, 2012 at 3:56 AM

hey am aving a problem with this slider.....mine is just static when i say static i mean it appears even when some one is reading a post....pls whats the code/script that i can use to make it appear only in my home page only....thanks

Editorial Team MOD
May 5, 2012 at 4:10 AM

@Parigyan Tamuly
Thanks for Liking The Post Pal

@siteAdmin
Brother Can you provide your Blog URL where you Place our Slider So we can Help you In this issue.Peace

May 11, 2012 at 8:20 PM

hiiiiiiiiiiiiiiii

May 11, 2012 at 8:23 PM

guys i want to create an attractive site for school advertisment ...
plz help me...n giv ur suggetion....

Editorial Team MOD
May 11, 2012 at 9:38 PM

@RD's Blog
Hi Pal, Brother You have To Hire a Professional Web Developer To Design A Good Site For School Advertisement. Here is the Post Which Will Allow You To Learn More About Web Developers http://www.mybloggerlab.com/2012/05/steps-to-become-pro-web-developer.html

Thanks and Peace Pal

May 18, 2012 at 12:11 PM

very good post and it fulfill my need. for know about communication please click what is communication

May 24, 2012 at 6:09 AM

Dear Sir , I tried this but couldnot succeed in uploading it. Instead on deleting the code my blog's main post (blog post) portion is shifted to left column. Plz suggest me how to rechange it to the central position.Plz see my blog http://www.kalimpongonlinenews.blogspot.in/
Thanking You
AK Rai

Editorial Team MOD
May 24, 2012 at 12:20 PM

@AK Rai
Brother Seems Like Your Blog Template is Not Well Optimized. Give Your Template's Downloading Link Or Give us Admin Privilege To Your Blog So We Can Help More Purposely.We would Love To Help you. Contact Us VIa Contact.mybloggerlab.com .Peace Buddy

June 7, 2012 at 8:22 PM

Is is possible to delete the "dots" for navigation, to give it a completely clean look?

Editorial Team MOD
June 17, 2012 at 10:05 AM

@Becky
Brother These Dots Allows us to Navigate From one Slider To Another, it Give more Perfect look. But Still if you want this Slider with out Dotted Navigation Then Check out our Other Sliders. Peace

July 11, 2012 at 4:47 AM

Good post very useful thanks

Glen
http://www.12monthloanspayday.co.uk/

August 2, 2012 at 10:24 AM

Please help!! What do I do if I cannot find either of the wrappers? I have downloaded the code from Mediafire and from Jquery directly. Now what do I do? I really want to add this to my blog. Thanks!!

Editorial Team MOD
August 2, 2012 at 10:35 AM

Oh Don't Worry If you cannot handle it Please Send us your Blogger Template @ contact.mybloggerlab.com in XML Format we will handle the Rest.!

August 11, 2012 at 12:25 PM

need some help

Everything works fine when I add the first set of images to each slide, but when I try to add a new image to a slide it doesn't show up. Don't know why this is.

Editorial Team MOD
August 11, 2012 at 2:11 PM

I Think you are not inserting images correctly!

August 19, 2012 at 7:28 PM

I want to add this in my blog.
http://yasirentertainment.blogspot.com/

August 24, 2012 at 8:50 PM

These Two Keywords <div id='main-wrapper' & <div id='content-wrapper' are Not Exist in the Template. I think Google has changed their Html Tags, so you should update your tutorial accordingly.

September 2, 2012 at 3:51 PM

div id='main-wrapper' is not in my template. My blog url is www.thesneakerreserve.com. Please help. Thank you so much.

October 1, 2012 at 1:41 AM

salaam syed...... I want please the right to left image slider code . like the one in Johny Sompret Banget Blogger Template.

this is the web site for that template.

http://johnysompret-banget.blogspot.ca/

Editorial Team MOD
October 1, 2012 at 1:44 AM

Walikum Asalam, There are Two Slider one is a STRIP Slider Under Navigation and other is a Normal One. Which You would want. Peace

October 1, 2012 at 1:55 AM

salaam ,can you give me please more details about where to find this Navigation thing since i am new to blogging stuff..... thx syed

October 1, 2012 at 1:58 AM

i want the one on the top please .... the image slider that moves from right to left..... if you look at this template on this website

like the one in Johny Sompret Banget Blogger Template.

this is the web site for that template.

http://johnysompret-banget.blogspot.ca/


you will find two image sliders........one normal on the left side and the other one is in the header goes from right to left..... and i want this one that moves from right to left

Editorial Team MOD
October 1, 2012 at 2:05 AM

Ok Soon we will Share its Coding. Stay Tuned!

Editorial Team MOD
October 1, 2012 at 2:06 AM

Check out out Latest Article on Home Page About "Drop Down Menu" << thats what we call navigation.

October 1, 2012 at 2:07 AM

thx syed ....... I am waiting

October 1, 2012 at 8:25 PM

salaam syed... i solved the problem with the header slider in
in Johny Sompret Banget Blogger Template.

this is the web site for that template.

http://johnysompret-banget.blogspot.ca/
....

it is working now, but in the slider there is no images.... and its written on the image spot >>>> no image available<<<<< .....the image is there in the post but doesn't show up in the image slider......... can you help in that please...
thx syed

Editorial Team MOD
October 1, 2012 at 11:26 PM

I Think you haven't inserted the images correctly. That could be the only reason why it is not working.

October 2, 2012 at 1:31 AM

salaam sayed...... no its not about inserting the image...... because once the picture is uploaded to the post , it should appear on the image slider as well...........here is the website

where u see each image is appearing in the post, but it fails to show through the slider........ and again this template doesn't ask you to upload images seperatedly to be shown on the slider..... once you publish a post.....a pic of that post and the title should appear on the slider....... here is my site

http://ni3aal.blogspot.ca/

......

October 4, 2012 at 2:37 AM

salaam syed....... i didn't hear from you as you promised..... any way i started a new blog where the slider image in the header moves from right to left......so how can i make it please move from left to right?

take a look at my blog please

http://gulooha.blogspot.ca/

thank and salaam

Editorial Team MOD
October 4, 2012 at 2:40 AM

Sorry Dude, this week was very busy thats why we were unable to answer your question. Peace.

October 4, 2012 at 3:02 AM

thx syed for replying .....if you get the time please look at the link i sent you before regarding my new blog

http://gulooha.blogspot.ca/

and just get back to me when ever you can if you have any idea about letting the image slider in the header moves from left to right instead of right to left

thx again, salaam

Editorial Team MOD
October 4, 2012 at 3:12 AM

Give me the Template Downloading Link Thanks

October 4, 2012 at 3:52 AM


salaam syed....... this is the template downloading link

http://www.dailybloggertemplates.com/2012/09/johny-sompret-banget-blogger-template.html.html

salaam

Editorial Team MOD
October 4, 2012 at 3:54 AM

Thanks, Till Tomorrow. Please Wait we will let you know. Peace

October 4, 2012 at 4:13 AM

ok i will, thx for your care syed...... salaam

September 21, 2013 at 3:35 AM


You are a lifesaver! I’ve been looking everywhere for this, and am I excited! It works perfectly! Thank you so much for this awesome tutorial!

May 19, 2014 at 2:26 PM

Hi Syed,

This is a very good job! is the anyway or code to stop the slide AutoPlay? What is the licensing of your code? I want to use this for a slider with post title and images for my Bangla news blog http://bangla.ngorg.com/

Best regards

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2014. MBL Networks, All Rights are Strictly Reserved.