Featured Content Slider for Blogger Using jQuery

Blogger is not more a blogging platform for beginners, there are lot more can be made with a blogger / blogspot blogs. Featured content sliders are seen in many WordPress blogs and when coming to blogger it is certainly not much seen. Here I am going to teach you, how to add a featured content slider to your blogger / blogspot blogs. Many thanks to Webdeveloperplus for making this code and I just tested and modified to work on blogger.

Featured Content Slider for Blogger Using jQuery

Step 1: Let get into the coding part. Here I just made a CSS stylesheet, to make the installation pretty simple. So all you need to do is just copy the below code and paste it after <head>

<link href='http://sites.google.com/site/bloggermintcom/style1.css' rel='stylesheet' type='text/css'/>

Step 2: If you need to change the dimensions of the slider you can use this step instead of step 1. Search for the code

]]></b:skin>

Now the place the below code before ]]></b:skin>

#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333;  background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('http://2.bp.blogspot.com/_ubwIhqPcR6M/TNv3EFphS6I/AAAAAAAABHE/iZ0jSrh-E_c/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}

Step 3: This step involves the featured content structure. Search for the code
<div id='content-wrapper'> and place the below code just before
<div id='content-wrapper'>

<div id='featured'>
     <ul class='ui-tabs-nav'>
         <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove &quot;showing post with label&quot; in Blogger</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
        <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
     </ul>
     <!-- First Content -->
     <div class='ui-tabs-panel' id='fragment-1' style=''>
        <img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
         <h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
         <p>Description goes here, this is just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
         </div>
     </div>
     <!-- Second Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
         <img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
         <div class='info'>
         <h3><a href='#'>How to remove &quot;showing post with label&quot; in Blogger</a></h3>
         <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
        </div>
    </div>
     <!-- Third Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
         <img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
         <div class='info'>
         <h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
         <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
         </div>
     </div>
     <!-- Fourth Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
         <img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
         <div class='info'>
         <h3><a href='#'>Chat live with your blog visitors using yahoo</a></h3>
         <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
         </div>
     </div>  </div>

Replace the default image URL with your image URL. The bigger image dimension is 400 * 250 and for smaller its 80 * 50. Do insert your image with these dimensions, to make it look better. Also replace the text and link with your info.

Step 4: Now we need to initialize a script to play the slide show. For that we use this script. Place the below script just after <head>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
$(&quot;#featured&quot;).hover(
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,0,true);
},
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,5000,true);
}
);
});
</script>

Step 5: This is an optional step, if your blog already includes the jQuery and jQuery UI libraries. If not, follow this instructions. Copy the code below and paste it after <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Click here to see the live demo

February 20, 2010. This entry was posted in Blogger, CSS, jQuery, Tutorials and tagged , , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

214 Responses so far!

  1. First off, very nice tutorial man, but one thing man…

    When I plug in the “content” before the content wrapper..it tells em this…

    The element type “img” must be terminated by the matching end-tag “”.

    I searched through every single image and it looks good to me.
    I do have the horizontal menu with Jquery, and I was wondering if maybe that was causing problems, but I’m doubting that.

    Anyways…hopefully you can help me out here man…THANK YOU

  2. @ Buzrk I checked your blogger template, I think there are some bugs in placing the featured content. Try the same process once again carefully or search for this code <div class='widget HTML' id='HTML1'> instead of content wrapper. If you still cant figure out, send your blogger template to my mail.

  3. THANK YOU MAN..GOT IT WORKING…

    I couldnt find the..code ….BUT…

    All I did was add a gadget of html/java…and plugged in the “content”..for the slideshow..and BOOM…

    I’ve been looking for this everywhere..I appreciate the help big time…you just got yourself some free ad space on my site. Thank you again man.

  4. @Buzrk Anyways thanks for your words. If you need any help in blogger, feel free to contact me.

  5. Turns out…i was able to put it up..but…its a little glitchy…at least when I place it in a gadget thats html’java..i tried resizing the main wrapper and my sidebars…but seems like thats not the problem…I even changed the opacity of my main wrapper but nothing.
    I attempted again to place it before content wrapper and it keeps giving me the same error I was getting in the beggining…I can’t find what your email is…to send you my template. Thank you man.

  6. @Buzrk You can reach me at bloggermint@gmail.com. Send in your queries, I will help you out. If you want to resize the featured content, edit the css script to make the changes happen.
    .-= Franklin Manuel´s last blog ..8 Amazing Latest jQuery Plugins For Bloggers =-.

  7. Hi Franklin,

    I liked the demo of your featured slider, and I started trying to use your code. You see, I am stuck now at step 3, unable to find . How should I go about now?

    my blog id is moosicalbovine.blogspot.com and I am using the Light Folio theme for blogger. Please help!

  8. Pingback: Tweets that mention Featured Content Slider for Blogger Using jQuery | Bloggermint -- Topsy.com

  9. @Murali – Search for the code <div class='widget Blog' id='Blog1'> and follow the step 3. If you still have any issue send your template to my email, I will help you out.

  10. love this but it does not seem to have scripts working will to function

  11. @Keith – The script works, can you tell me which part of script doesn’t work?

  12. @Franklin Manuel: this is the site sessionsskate.blogspot.com/

  13. @ Keith – I check your blog template. Can u remove the javascript which comes right after the ajax.googleapis.com. Try this method.

  14. @Franklin Manuel: i show 2 sources like above

  15. got it

  16. can i slow it down

  17. @Keith – Already it moves slowly, if you still wanna reduce the speed change the value of 5000 to 7000 in step 4

  18. Hi could you help me see where I went wrong? (-:
    I followed all the instructions but when I click the tabs nothing happens!

    Thank you (-:

  19. @Cabrini – Follow the step 5, I think you haven’t initialized jQuery script. Insert that code in your blog and it will work.

  20. I just did that but it still doesn’t work! /-:

  21. @Cabrini – Send me your blogger template to my email address. I will fix the issue.

  22. Okay thank you! Just sent it (-:

  23. Great tutorial, really easy. I just have a problem. On my site http://www.paulmeara.com, I have put in the slider, I have it as an HTML/Javascript widget because it is a Blogger account. The slider will not automatically move and I was wondering if you could take a look at it. I just have the sample one and I will change the pics and text later after I get this going.

    Thank you

  24. @Paul – The reason is jQuery has not been initialized after <head> so follow step5 and remove other two jquery scripts in the template.

  25. Thanks that helped, I thought I did step 5 but apparently I didn’t, also I have one more question, How do you make the whole thing smaller? As you can see the slider kind of goes out of the right side of the blog area and if I could make it all smaller that would be great! Again thank you for all your help…

  26. Never mind I figured it out but thank you!!!

  27. @Paul – Good to hear.

  28. Please heeeeeeeeeelp me out

    hey blogger just giving this error “The value of attribute “href” associated with an element type “null” must not contain the ‘<' character." help me soon as you can

  29. This error happens when the character "#" is not defined properly, I think you are using classic template. Switch to new version by clicking on the button in Edit HTML. But if you still get the error, send me the template to my mail.

  30. Franklin hi again,
    I’m the anonymum guy above .I’ll send to you my template at my own risk remember i’m trusting you,even I don’t know you! check your inbox ;D

  31. @Kevin – Bro, there is nothing as such risk in sending your template. Its just a template, not your blogger account information. Anyways I got your template

  32. I bookmarked this link . Thank you for good job !

  33. Thanks for the tut..i hv read many such tuts but none of them mentioned what the code does in every step…I am from India(pune) too..count on me as a regular reader on bloggermint!

  34. @Pankaj – Thanks dude, I hope to bring many tutorials for blogger.

  35. Love the tutorial, thanks a bunch!

    I have 2 questions. The tabs that are highlighted are a light gray and I wondered if there’s a place I can change the color. I tried all sorts of places & it didn’t work.

    Secondly {and most important} My sidebar has now moved below this feature slider. How can I move it back up. You will see when you visit my blog {the blank space} to the right of the feature slider.

    http://momsbabypooh.blogspot.com
    .-= Christina´s last blog ..A Child’s View of Thunderstorms =-.

  36. @Christina

    1.Search for the code in your template #featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc; and replace the #ccc with any color you prefer.

    2. The reason for the sidebar getting down is because of the width of the content slider, just reduce the width and see the changes. If you let me know.

  37. @Franklin Manuel:

    Thanks for getting back to me so quickly. Where exactly do I make the width of the content slider smaller?

  38. @Christina – Search for the code #featured{
    width:400px; and decrease the size of the width. If you still need help, you can contact me at my mail.

  39. @ Frank – I sent you an email. {I used the Contact Us button above.} I reduced it from 400px all the way down to 200px and it never budged. The colors wouldn’t change either.
    .-= Christina´s last blog ..A Child’s View of Thunderstorms =-.

  40. @Christina:
    PS. I don’t want it all the way down to 200, I just tried it to see if it made a difference.

  41. @Christina – I found out the issue, you are using both step 1 and step 2 in my tutorial, so just remove the step 1 script from your template and do those change in color and width size.

  42. Nice tutorial. It’s very helpful for Blogger users. Thanks for sharing.
    .-= Deluxe Blog Tips´s last blog ..URL Shortener: Principles, Sample Code And Sources =-.

  43. @Deluxe – Its my pleasure working for blogger users

  44. need ur help seriously..

    Hi,My name is kuan,thanks so much for your tutorials :)

    I have a problem in “position” for the slider,may i know what should i do next to make the slider below my logo and centre from the blog..(appreciated)

  45. @Cskuan – Search for the code <div id='content'> in your template and below that paste the code found in step 3. :)

  46. @Franklin Manuel: Thanks Franklin,you are Awesome!

  47. Hello!
    I really like this featured content slider so I am determined to install it. For now, I am working on a test blog. I couldn’t find the code and tried to guess where to copy it without any success. Is there another code that I could look for or is it impossible to install this slider with my actuel template?
    .-= Lise´s last blog ..Message encore de test =-.

  48. @Lise – Paste the step 2 code after “END OF CSS STYLING” text found on your template. I can see the other <div id='content-wrapper'> on your template.

  49. Thank you very much Franklin for your help. I finally found the . Mysteriously, the search option couldn’t find it when I copied it from your post but it found it when I copied it from your answer. I almost succeeded in installing the slider and it looks fabulous. My first problem is that it doesn’t move and my second problem is that is it not centered in Firefox as in Explorer.
    .-= Lise´s last blog ..Message encore de test =-.

  50. I finally got it!

  51. @Lise – You need to follow the step5 to make the slider work and by default the slider is set to work on left position. So, if you still need my help, drop in here

  52. Chris [DJ OneShot]

    Hey Franky! lol
    First of all, your tutorial is awesome!
    But the slider ain’t working on my blog..
    http://djoneshot.blogspot.com/
    Please check it out and tell me, how to fix that issue..
    Peace!

  53. @Chris – M checking your blog, will get back to you soon

  54. @Chris – Send me your blogger template to my mail. I will fix it

  55. i’ve tried it but it doesn’t fit into my blog’s column. how can i make the slider smaller?

  56. @Evychua – Change the value of Width in CSS.

  57. I am having the same problem as Chris. The slider is not working. When I click one of the boxes it appends a #fragment-3 to the end of my web address and does nothing in the slider. Can you please help?

  58. @Dean – Whats your blog URL? The possible reason the jquery is not properly initialized.

  59. The blog url is goodnewsweekly.ca

  60. I do not have the code on my blog.

    I have tried placing the code in various places on my site. all with the same result.

  61. @Dean – Where you want to slider to be positioned…better catch me on my mail. I will help you out

  62. Great info. Thanks for the publish.

  63. Its not working on my site. Can you please help?

  64. @Dom – Search for the code <div class='columns-inner'> instead of content wrapper and paste the code as I instructed.

  65. @Franklin Manuel: Ok I did that but it is still not working. How can I fix it?

  66. @Dom – Can you tell me exactly. Are you able to see the slider or not able to see it function.

  67. @Franklin Manuel: I am not able to see it function and it also goes off the page to the right.

  68. @Dom – Have you initialized jQuery on your blog..I mean step 5 in my tutorial..

  69. @Franklin Manuel: Yes I have, and it still doesn’t work. Can you install it for me please?

  70. @Dom – Download your blog template and send it to my email bloggermint [at] gmail [dot] com and contact me

  71. @Franklin Manuel: Ok I just sent it. Thanks!

  72. I made it work, it did not worked at first when I’ve put the javascript code in the , It worked when I’ve put it in the body right before closing . Well it worked, and it’s working very well until now.
    .-= Reploid´s last blog .. =-.

  73. @Reploid – Nice to hear….:)

  74. Thanks for sharing this. I also find it’s highly customizable through css. Just want to mention that when the javascript code was put in the head of the document it did not work, try putting it inside the div. I noticed that when I type in code it does not appear in my comment. Well, have a nice day. and Thanks for sharing.
    .-= Reploid´s last blog .. =-.

  75. Hi Franklin Manuel, I have follow those instruction, but the slider ain’t working on my blog. Can u help me fix it? i have sent it to your mailbox.

    i am testing it @http://zhapalangmotorsport.blogspot.com/

    Your help is much appreciated!!!

  76. i cannot find in my template

  77. @Bharath – What you can’t see on your template and by the way add your blog URL while commenting

  78. Hello, using this script…do we have to MANUALLY input the posts and their information? Or does it automatically grab for example the first 5 recent posts?

  79. @Kat – Yes, you need to input the post information to display in the slider. I have explained about that in step 3.

  80. What do you do if you don’t have “content-wrapper”?

    My site is http://www.outonlimbs.com – is there also a way that I can adjust it so it can fully replace the (for some reason) non-functioning slider (the brown section) in width, rather than being as small as it is in the live demo?
    .-= AVM´s last blog ..Lady Gaga is 50 Hot =-.

  81. @AVM – Search for the code <div id='slider'> and follow the process. To increase the width you need to increase the width value in the css.

  82. Hi mate.I have been searching for a good slider for my blog.And find your tutorial.First of all thank you for this tutorial.
    I have 2 blog 1st is my blog 2nd is a test blog.I have used it in my test blog.
    http://blogmehmetfy.blogspot.com

    but as you see it is not looking good.So I think it would be good if it doesnt have descriptions near mini images.How can i change it?.I mean slider will stay the same but I will only delete the description near mini images.When I choose a mini image People can read the description on big image.Can you fix my problem or make it as I told?

    Thank you very much :)

  83. @Mehmet – Just remove all the li class under <ul class='ui-tabs-nav'> :)

  84. I can get it if how to find the step #3.. Please help me.. This is my blog-> me-everyday-watch.blogspot.com

    Please!
    .-= Everyday What´s last blog ..Cats And Dogs Best Chasing =-.

  85. @Everyday – Search for this code <div class="region-inner main-inner"> instead of <div id="content-wrapper"> and paste the step 3 script

  86. Pingback: 10 Essential Blogger Plugins and Blogger Widgets | Bloggermint

  87. It’s Awesome
    Finally I got it
    Thanks for Posting!

  88. my template doesnt have this so what should I do now?

  89. it’s working..
    I use it on my blog.. :D
    .-= Blogger Ceria´s last blog ..Nonton Film Laskar Pemimpi Bareng Project POP =-.

  90. i don’t have this line on my html () :please tell me what to do i need it so much
    thanks

  91. how can i change the navigation tabs to have 2 columns of images instead of 1? this would be handy to know so we wouldn’t have a single long column of image tabs if we’re featuring more than just 4 featured contents. i appreciate your help.

  92. Just finished tinkering with it to fit just right…thank u for this :)

  93. Hi! Thank you so much for this, I got it working just fine on my blog yet I have one question. I placed my featured content part after my so my sidebar could fit in snuggly next to it yet I can’t seem to figure how to have it so that the slider is left out when I click on a post…it follows me.

    Suggestions?

    http://www.strangertimes.com

    Anyway thanks for all your efforts

  94. hi,
    Its realy useful and I got what I want.
    Thank you,

    models talk

  95. Hi!
    I really love your tutorial is easy to understand but actually I’m stuck on step#3 I browsed through all the comments and none of the fix for step 3 worked for me. I used Artisteer to create my template do you think that’s where the problem is? I cannot provide you the link to my blog because is under construction so is block for readers. Can you tell me what code i should be looking for? I really love this slide i had it working on my previous “test” template from a diff. tutorial but it stopped working after i installed the new one from Artisteer.

    Thanks!!

  96. Hi.. I installed your slider function and it works but there are a couple of minor issues:

    1. the 4th slider button isn’t shaped like the top three and I can’t figure out how to correct it.

    2. is there any code or command i can use to automatically make the feature pics have the same size dimensions?

    here’s a pic illustrating my problems

    http://oi54.tinypic.com/jtvwnq.jpg

    thanx

  97. disregard my last poat..its fixed..works fine..

    thanx

  98. I have a blogspot, and I will try this sliderbar

    thanks for sharing

  99. thanks..for sharing
    .-= yahaya´s last blog ..cara menyusun imej pada sidebar =-.

  100. I really like your slider. It works on my blog http://myitkyina1.blogspot.com/

    But i want it at the top of body page. How can i do that? Thanks.

  101. Hey there.
    Remember me from Pooh’s Corner? My feature slider is looking a little wonky today. I didn’t change any settings.

    Can you swing by and take a peek?

    Thanks.
    Christina {mom}
    .-= Christina´s last blog ..the pooh i love =-.

  102. hello. it seems that my sidebar does not have the same height as the featured content slider. here’s my blog address. thank you.

    Ben Tech

    http://knewtest.blogspot.com/

  103. @Franklin Manuel this information is very new for me. If I add this in my blog is the loading time of blog is increased than later.

  104. is there a way to customize this for the mashable template that you created?? it would be so helpful

  105. My template do not have

    <div id=’content-wrapper’>

  106. Hi nice post, I was looking for this tutorial since last week. but i found difficult to follow the step 3. I don’t have the code . Could you please help me further?

    Thanks.

    here’s my blog http://www.pinoydoble.blogspot.com
    .-= Allan ´s last blog ..Gift Ideas for Holiday 2010 =-.

  107. How do we make the slider smaller? I want it to go above my posts but not above my sidebar (left of sidebar but over posts on homepage)

  108. Hi Franklin,

    You did a great job for this, I’ve implemented this featured slider on my blog, and everything’s good – it works

    Thank so much.. ;)
    .-= Free Health Articles´s last blog ..The Straighter the Better =-.

  109. I think there’s a little bit to make it fit:

    CSS show that it use H2 title tag, but in step 3 use H3 title tag. I’ve made it same as H3.

    If I place the code on step 3 before tag, the sidebar pushed down. So I place the code on gadget over blog post, and looks like no problem with layout.

    Thanks again Franklin :)
    .-= Free Health Articles´s last blog ..The Straighter the Better =-.

  110. Hi Franklin,

    My template do not have
    , so what should I do? Could you give me some clue?

  111. hello franklin, this looks amazing. thank you so much for sharing. i have 2 questions, if you could please help.

    1. i also do not have the code in my template.

    2. is there a way to move the menu of the sliders to the bottom?

    thanks again. my website is http://chromewavesradio.com
    .-= chrome waves radio´s last blog ..ALWAYS ON MY MIND by reading rainbow =-.

  112. Hi,

    I don’t have

    nor do I have

  113. I’m trying to say I don’t have the “content wrapper” or the “column-center-inner” codes

    Thanks

  114. Hi frank,

    I was just wondering I wanna reduce the width of the .ui-tabs-panel ( the featured image section) can you please tell me which CSS should be edited.
    Thanks

  115. thanks frank
    I liked the slide but I wonder if it can fit in my blog.need ur advice

    http://ebooks4y.blogspot.com/
    .-= Essaady´s last blog ..PC Magazine- JUNE 2010 =-.

  116. hey mate ,.. ow to make another featured tab,..so there are three tab in the featured.
    #featured .ui-tabs-panel , #featured ul.ui-tabs-nav , and one other,..

    thanks,.. great work mate

  117. this code it dozen found in my code.
    n im skip this step ..but it work like this>>>http://wanxintong.blogspot.com/

    hope you wil reply me in email,thk.
    wantongxin@gmail.com

  118. Hey frank thanks and I want to know your suggestion should I integrate it on this blog
    http://mtv-splitsvilla4.blogspot.com

  119. Hi Franklin,

    Am I able to add step 3 into a widget located above my blog posts? Do I have to change the code that commences the slideshow? Cheers mate! =)

  120. I don’t know what I am doing wrong, I just know that on my blog it only shows this way…
    http://cultzine-literature.blogspot.com/
    Any way you could help me?
    xx
    Z

  121. can i add featured with my recent post automatic ??

    b’coz i can’t try this step in my templates.

    thank you.

  122. Hi Franklin,

    Love the slider, but I’m having a few problems. I have it working great on the test site (http://16thandgeorgetown-jlazier.blogspot.com/), but when I convert it over to the real site (16thandgeorgetown.com), it’s not quite the same.

    The thumbnail descriptions are aligned wrong,the links don’t work, and neither do the tabs.

    Any help would be great!

    Thanks,

    -James

  123. Sorry, meant to add that the slider on the real site (16thandgeorgetown.com) is at the very bottom of the page. If I get it working, I’ll move it to the top, replacing the current one.

    Thanks

    • Ok, I have some of it fixed. Only problem now is that the tabs don’t work. When clicked, all it does is add #fragment-1, #fragment-2, or #fragment-3 to the URL.

  124. Fahd iqbal Malik

    still trying to apply it to my blog but no success, i wanna cry woaaaaaah

  125. I dont know why doesn’t this work for my blog!

  126. Dude thank you very mush for the IMBA! slider :)

    it’s fainaly Worked xD

  127. hello fren,,, sory 4 disturbing,,

    i cant find that both code in my blog

    and this

    http://www.econpolics.com/

    this is my blog,, any advice or suggestion?

  128. I do not know if I like but the slide is no longer moving, you can verify that

  129. Hi I have uploaded this slider, and it looks great, but it doesn’t auto slide? Any thoughts? I have it on my test site here:

    http://blogtestsite2.blogspot.com/

  130. i can’t find the “” on my code. please help

  131. Great looking slider, but I’m having some difficulty implimenting it on my blog (http://comtrain.blogspot.com/). Could you take a look and see what I’ve done wrong.

    It doesn’t “slide” or change. Also, I would like to center it.

    Thank you very much.

  132. I’m having some difficulty too implimenting it on my blog (http://redandwhitemagz-eng.blogspot.com).

    Could you take a look and see what I’ve done wrong? Because I can’t find ” column-center-inner” nor “column-outer”.

    Thank you very much.

  133. Two problems.

    1.) Slider is appearing above sidebar. Want it to be next to sidebar but right above posts.

    2.) Is there a way to make it so the slider only appears on the home page?

    http://testingtesttetetetetet.blogspot.com/

    Thanks

    • Hi MIke

      I have the same 2 questions as you.

      1.) Slider is appearing above sidebar. Want it to be next to sidebar but right above posts.

      2.) Is there a way to make it so the slider only appears on the home page?

      Can you tell me how you managed to get it to appear correctly on your website?

      Thanks so much!

  134. Hey, I think I have a serious problem. I don’t have these codes:
    1 –
    2 –
    3 –

    my blog is:
    http://metodistaemangra.blogspot.com/

    I really liked this slider! help me, please! ^^

    • I dont have the “content wrapper”, “column-center-inner” and id=”columns”

  135. Pingback: Five Awesome Jquery Featured Posts Sliders for Bloggers | The Technology Blog

  136. Hey, having trouble getting the slider to actually work. It’s installed and I followed your step to a t, but it’s just not “sliding”. Help?

    Website:
    http://www.musiconmyradar.com/

    Its at the bottom of my homepage.

  137. My blog do not have

  138. very nice information but not working for me………

  139. Hello, very useful information but still, I have one question. After adding the slider my gadgets placed on the right sidebar are pushed down on the index page and the right side of the page, adjacent to the slider, remains empty.

    What do i need to modify to “bring” the gadgets next to the slider?

    Thanks in advance.

  140. It works perfect thahks for the code.

  141. Do you have to go back and manually change the pics and descriptions each time you want to change the featured stories?

    Is there a way to make it automatically detect the featured stories and images?

  142. Sorry html does not appear

    Dear Franklin,

    I can’t find the in my blog (div id content wrapper) (http://vinayakarkoyil.blogspot.com)

    pls help me

    i need another one help from you

    pls see the attached picture i have mark two places
    http://i56.tinypic.com/2ro1c49.jpg

  143. how can i increase the width of this all content likewise whole page width, not only on the left section of page.

  144. Well thanks… i got know…no need to reply

  145. i cant find
    my site is zplanet.tk pls help

  146. this is great tips… thanks for the posting

  147. This is amazing dude!
    Thank you so much.
    Very good job Franklin :)

  148. Thanks for the post . .

  149. Hi I’m having some trouble with the steps. There is no in my blog. What should I do?

  150. Hello,

    Please help, I do not have the “” in my blog, I am using the blog with the theme designer. What should I look for instead?

  151. I cant find the content wrapper bit of code in my html.. What do I do?

  152. Hi! First of all i have to say this post its really good but i couldn’t find so i placed the code before and it works! but the real problem here is that the content slider is shown in the top left part of my blog just before the blog’s title (html image) and i want it after this. i think i can make it if i modify the margins but i don’t know how to do this or where.
    I hope you answer this, please help me! :/

  153. A note to all commentators. If you don’t find content-wrapper in your template, just paste the code anywhere in the template (after the css) to see how it appears in the preview.

    Since template designers uses different name, I won’t be able to help each and ever commentator here.

  154. thanx… very nice post

  155. Hi Franklin

    I was wondering if you could help me. I added a wordpress theme to my website. It contains a content slider too. Now as soon as I add the image as a featured image, I can see the post appearing along with a thumbnail of this image, however, the content slider shows only text without the image. I have tried using image resolution specific pics too which are 936 x 231 so that they fit as per the width and height of the slider. However to no avail. I dont know where i’m going wrong. I’d really appreciate it if you could assist me?

    Thank you for your time

    Cheers
    Savio

  156. is it possible to have this widget based on feed rss

  157. I could not put on my blog, you have to help me?

  158. this kicks butt. thanks for the leg work and the instructions!

  159. I’ve installed the slideshow and it is working great. The only problem I have is that when you scroll past the slideshow to the bottom of the page it jumps you back up to the slideshow every time the slide changes. Any thoughts on how to stop that?

  160. I already wrote it, I could not do the tutorial on my blog, I do not have the content-wrapper

  161. Hi.. where’s th js file here? or the general jquery would make it work?? I’m sorry but I’m new in jquery plugins

    Thanks

  162. my slide show picture does not change can some one help me?

  163. How can I move the slide show under my page list instead of at the top?

  164. Didn’t work for me….:(

  165. Sorry…my mistake…It worked….thanks….

  166. it seems like my jquery codes are conflicting, when i remove your jquery code mine works, when mine is there your code does not( the slider does not move)
    any help?

  167. Abracei esta dica. Fundamental para meu problema. Pois o slide que eu tinha muito semelhante a este não funcionava no Internet Explorer. E este funciona.

    Quando eu ativar meu blog certamente irei usar este slide.

    abraço.

  168. I didn’t find in my html part

  169. nice share… i’m newbie on blogger, i hope you share anything about blogger to keep me watching you and follow you always :)

  170. Hello, I’m really new in blogger code.
    Your code works really well when I tested on a test blog, but when trying to use it in my “real” blog it do not works well.
    I guess it’s function () error, because I have another script to zoom images and I think that there is the problem. (Image Magnify script)
    There any way to use both?
    Thanks for the reply and for the hard work.

  171. Thats code not work on my page…
    anyone can help me plz..

  172. Wow, thanks a lot for your effort to bloggerize the codes.

    I took a few hours to edit and modify the code to suit my needs, and my head is spinning right now. I could only be amazed by such beauty.

    Could you visit my blog and tell me where should I improve?

    I am now hesitating to make it a 5 or 6 tabs instead of 4, due to my blog’s original template.

    Anyway, you are in my reading list now :D

    Cheers

  173. it’s pretty usefull, I will try try to applie it, I hope its works, but I will not add images I want just pust some texts as slider, its that possible.
    in this case I have to romove the image dimension and links only, or their is other thing to do?

  174. Hey,

    I was just trying to install this widget, but it doesn’t seem to be working. I went to ‘template’, edit html’ and then pasted your first code after ‘head’. However when I went to step 3 this code doesn’t exist in my html ”. So I couldn’t actually complete the following steps. Do you know what the problem might be?

    Many thanks.
    Tammy

  175. Hello!

    I have this exact slider in the theme that I’m modifying for my blog but I wanted a script that can automatically update the posts in the slide so it will always show the newest 4 articles. Do you know where I could find such a script? I have gotten some scripts but they’re for a different style and Java is my weakest link in the whole template modification process.

  176. u r my hero :) its really very nice ,working properly

  177. This is cool. I have never thought we could get this kind of slider for blogger.

  178. Can you show me the way to made slide import data from LABEL and post content

    thanks

  179. Pingback: 20 Featured jQuery slider effects slider case tutorial Web Page Design | Web Page Design Templates | Html5 Template

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>