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/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 != "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 '> 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:
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
Credits:www.MyBloggerTricks.com
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).
47 comments
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
cant find it second step main wrapper
@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
But why cant I find wrapper? Anyways I will try it..
Bro one more thing it would be nice if you upload Jquery in pastebin or g code.
@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
@Parigyan Tamuly
Ok Brother You Can Get The Jquery Code From Here Download Jquery Direct View Peace Buddy
I have a lot of questions Faizan, kindly give me your email address.
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
Thank you!
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
@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
hiiiiiiiiiiiiiiii
guys i want to create an attractive site for school advertisment ...
plz help me...n giv ur suggetion....
@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
very good post and it fulfill my need. for know about communication please click what is communication
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
@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
Is is possible to delete the "dots" for navigation, to give it a completely clean look?
@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
Good post very useful thanks
Glen
http://www.12monthloanspayday.co.uk/
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!!
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.!
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.
I Think you are not inserting images correctly!
I want to add this in my blog.
http://yasirentertainment.blogspot.com/
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.
div id='main-wrapper' is not in my template. My blog url is www.thesneakerreserve.com. Please help. Thank you so much.
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/
Walikum Asalam, There are Two Slider one is a STRIP Slider Under Navigation and other is a Normal One. Which You would want. Peace
salaam ,can you give me please more details about where to find this Navigation thing since i am new to blogging stuff..... thx syed
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
Ok Soon we will Share its Coding. Stay Tuned!
Check out out Latest Article on Home Page About "Drop Down Menu" << thats what we call navigation.
thx syed ....... I am waiting
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
I Think you haven't inserted the images correctly. That could be the only reason why it is not working.
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/
......
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
Sorry Dude, this week was very busy thats why we were unable to answer your question. Peace.
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
Give me the Template Downloading Link Thanks
salaam syed....... this is the template downloading link
http://www.dailybloggertemplates.com/2012/09/johny-sompret-banget-blogger-template.html.html
salaam
Thanks, Till Tomorrow. Please Wait we will let you know. Peace
ok i will, thx for your care syed...... salaam
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!
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.