How To Add Featured Post Content Slider to Blogger

Posted by Lasantha Bandara on November 14th, 2014 File Under : css, html, jquery, widget83 Comments

This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this slider. Also it is very easy to configure. To add this content slider to your web site or blogger blog, follow the steps given below. You can see the demo of this widget HERE.

Tutorial Updated (2014/11/14) : Now slider was updated to scroll automatically.

1.First go to "Edit HTML" of your Blogger blog.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

Featured Post Content Slider

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js' type='text/javascript'></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
//<![CDATA[

/*!
 * jCarouselLite - v1.1 - 2014-09-28
 * http://www.gmarwaha.com/jquery/jcarousellite/
 * Copyright (c) 2014 Ganeshji Marwaha
 * Licensed MIT (https://github.com/ganeshmax/jcarousellite/blob/master/LICENSE)
*/

!function(a){a.jCarouselLite={version:"1.1"},a.fn.jCarouselLite=function(b){return b=a.extend({},a.fn.jCarouselLite.options,b||{}),this.each(function(){function c(a){return n||(clearTimeout(A),z=a,b.beforeStart&&b.beforeStart.call(this,i()),b.circular?j(a):k(a),m({start:function(){n=!0},done:function(){b.afterEnd&&b.afterEnd.call(this,i()),b.auto&&h(),n=!1}}),b.circular||l()),!1}function d(){if(n=!1,o=b.vertical?"top":"left",p=b.vertical?"height":"width",q=B.find(">ul"),r=q.find(">li"),x=r.size(),w=x<b.visible?x:b.visible,b.circular){var c=r.slice(x-w).clone(),d=r.slice(0,w).clone();q.prepend(c).append(d),b.start+=w}s=a("li",q),y=s.size(),z=b.start}function e(){B.css("visibility","visible"),s.css({overflow:"hidden","float":b.vertical?"none":"left"}),q.css({margin:"0",padding:"0",position:"relative","list-style":"none","z-index":"1"}),B.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"}),!b.circular&&b.btnPrev&&0==b.start&&a(b.btnPrev).addClass("disabled")}function f(){t=b.vertical?s.outerHeight(!0):s.outerWidth(!0),u=t*y,v=t*w,s.css({width:s.width(),height:s.height()}),q.css(p,u+"px").css(o,-(z*t)),B.css(p,v+"px")}function g(){b.btnPrev&&a(b.btnPrev).click(function(){return c(z-b.scroll)}),b.btnNext&&a(b.btnNext).click(function(){return c(z+b.scroll)}),b.btnGo&&a.each(b.btnGo,function(d,e){a(e).click(function(){return c(b.circular?w+d:d)})}),b.mouseWheel&&B.mousewheel&&B.mousewheel(function(a,d){return c(d>0?z-b.scroll:z+b.scroll)}),b.auto&&h()}function h(){A=setTimeout(function(){c(z+b.scroll)},b.auto)}function i(){return s.slice(z).slice(0,w)}function j(a){var c;a<=b.start-w-1?(c=a+x+b.scroll,q.css(o,-(c*t)+"px"),z=c-b.scroll):a>=y-w+1&&(c=a-x-b.scroll,q.css(o,-(c*t)+"px"),z=c+b.scroll)}function k(a){0>a?z=0:a>y-w&&(z=y-w)}function l(){a(b.btnPrev+","+b.btnNext).removeClass("disabled"),a(z-b.scroll<0&&b.btnPrev||z+b.scroll>y-w&&b.btnNext||[]).addClass("disabled")}function m(c){n=!0,q.animate("left"==o?{left:-(z*t)}:{top:-(z*t)},a.extend({duration:b.speed,easing:b.easing},c))}var n,o,p,q,r,s,t,u,v,w,x,y,z,A,B=a(this);d(),e(),f(),g()})},a.fn.jCarouselLite.options={btnPrev:null,btnNext:null,btnGo:null,mouseWheel:!1,auto:null,speed:200,easing:null,vertical:!1,circular:!0,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null}}(jQuery);

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*!
 * Featured Post Content Slider to Blogger
 * http://www.bloggertipandtrick.net/featured-post-content-slider-blogger/
*/
jQuery(document).ready(function ($) {

$(".btt-slider").jCarouselLite({
	
	btnPrev: ".btt-next",       // CSS Selector for the previous button
	btnNext: ".btt-prev",       // CSS Selector for the next button
	btnGo: null,                // CSS Selector for the go button
	mouseWheel: true,           // Set "true" if you want the carousel scrolled using mouse wheel
	auto: 2000,                 // Set to a numeric value (800) in millis. Time period between auto scrolls

	speed: 1000,                // Set to a numeric value in millis. Speed of scroll
	easing: "easeOutBounce",               // Set to easing (bounceout) to specify the animation easing

	vertical: false,            // Set to "true" to make the carousel scroll vertically
	circular: true,             // Set to "true" to make it an infinite carousel
	visible: 1,                 // Set to a numeric value to specify the number of visible elements at a time
	start: 0,                   // Set to a numeric value to specify which item to start from
	scroll: 1,                  // Set to a numeric value to specify how many items to scroll for one scroll event

	beforeStart: null,          // Set to a function to receive a callback before every scroll start
	afterEnd: null              // Set to a function to receive a callback after every scroll end	
	
});
  
});

//]]>
</script>

<style type='text/css'>
#btt-slidearea {
  width: 680px;
  height: 230px;
  background: #242424;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

#btt-slidercover {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.btt-slider {
  overflow: hidden;
  position: relative;
}

.btt-slidecontent {
  position: relative;
  margin: 0px 0px;
  height: 200px;
  width: 680px;
  float: left;
  display: inline;
  color: #ccc;
  font: 13px/18px 'Roboto',Georgia,century gothic,Verdana, sans-serif;
}

.btt-slidecontent img {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px;
  background: #000000;
  border: 1px solid #383838;
  width: 270px;
  height: 170px;
}

.btt-slidecontent ul {
  list-style-type:none;
  list-style:none;
  margin:0px;
  padding:0px;
}

.btt-slidecontent ul li {
  list-style-type:none;
  list-style:none;
  margin:0px;
  padding:0px;
  height: 200px;
}

.btt-slidecontent a:link, .btt-slidecontent  a:visited {
  color: #fff;
}

.btt-slidecontent h2 {
  font: 18px/22px Georgia,century gothic,Verdana, sans-serif;
  margin: 15px 0px 5px 305px;
  padding: 0;
  font-weight: normal;
  width: 350px;
  height: 24px;
  overflow: hidden;
}

.btt-slidecontent h2 a {
  color: #fff;
  text-decoration: none;
}

.btt-slidecontent h2 a:hover {
  color: #eee;
  text-decoration: none;
}

.btt-slidecontent p {
  width: 350px;
  margin: 0px 0px 5px 305px;
  padding: 0;
  max-height: 130px;
  overflow: hidden;
}

.btt-slnav {
  padding: 3px 0px;
  background: #000;
}

.btt-prev {
  float: left;
  width: 24px;
  height: 24px;
  z-index: 200;
  margin-left: 5px;
  background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);
}

.btt-next {
  float: right;
  width: 24px;
  height: 24px;
  z-index: 200;
  background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);
  display: block;
}

.clear{
  clear:both;
}
</style>

Note : If you need, Host prev.png and nxt.png images yourself.

4.Now go to "Layout" page and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="btt-slidearea">
<div id="btt-slidercover">
<div class="btt-slider">
<ul>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-1" title="#">Title-of-Post-1</a></h2>
<p>Slide 1 Description [...]</p>
<img src="Slide-1-Image-Address" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-2" title="#">Title-of-Post-2</a></h2>
<p>Slide 2 Description [...]</p>
<img src="Slide-2-Image-Address" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-3" title="#">Title-of-Post-3</a></h2>
<p>Slide 3 Description [...]</p>
<img src="Slide-3-Image-Address" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2>
<p>Slide 4 Description [...]</p>
<img src="Slide-4-Image-Address" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2>
<p>Slide 5 Description [...]</p>
<img src="Slide-5-Image-Address" alt="" />
</div>
</li>

</ul>
<div class="clear"></div>
</div>
</div>
<div class="btt-slnav"><a href="#" class="btt-prev"></a><a href="#" class="btt-next"></a><div class="clear"></div></div>
</div>

Note : Replace URL-of-Post-X , Title-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Use width=270px and height=170px images for your slides.

And also you can add more slide to this slider.

For examplelook at the code below:

<div id="btt-slidearea">
<div id="btt-slidercover">
<div class="btt-slider">
<ul>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">Avatar (2009 film)</a></h2>
<p>James Cameron's epic motion picture, Avatar - in cinemas December 18th worldwide. In the epic action adventure AVATAR, James Cameron, the director of "Titanic," takes us to a spectacular new world beyond our imagination. On the distant moon Pandora, a reluctant hero embarks on a journey of redemption and discovery as he leads a heroic battle to save a civilization. [...]</p>
<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/S2FWzuNvBBI/AAAAAAAAAts/ijNwX4Ei-O4/avatar.jpg" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">2012 Movie</a></h2>
<p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement[...]</p>
<img src="http://3.bp.blogspot.com/_4HKUHirY_2U/S2FYyPWHTJI/AAAAAAAAAt0/kNXA5auZ65k/2012+movie.jpg" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">I am Legend Movie</a></h2>
<p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement[...]</p>
<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/S2FdlLmVmsI/AAAAAAAAAt8/ERw6PcL-tsE/iamlegend1.jpg" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">Transformer Movie</a></h2>
<p>Transformers is a 2007 live-action-thriller film adaptation of the Transformers franchise, directed by Michael Bay and written by John Rogers, Roberto Orci and Alex Kurtzman. It stars Shia LaBeouf as Sam Witwicky, a teenager involved in a war between the heroic Autobots and the evil Decepticons[...]</p>
<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/S2Fdo2TdCpI/AAAAAAAAAuE/txvdowislx8/transformer11.jpg" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">Max Payne Game</a></h2>
<p>Max Payne is a BAFTA award winning[1] third-person shooter video game developed by Finnish Remedy Entertainment, produced by 3D Realms and published by Gathering of Developers in July 2001 for Windows. Ports later in the year for the Xbox, PlayStation 2 and the GameBoy Advance were published by Rockstar Games[...]</p>
<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/S2FfKKAoNMI/AAAAAAAAAuM/bzIRya9LZBI/Max_Payne1.jpg" alt="" />
</div>
</li>

</ul>
<div class="clear"></div>
</div>
</div>
<div class="btt-slnav"><a href="#" class="btt-prev"></a><a href="#" class="btt-next"></a><div class="clear"></div></div>
</div>

Now you are done.

File Under : css, html, jquery, widget

83 Responses to “How To Add Featured Post Content Slider to Blogger”

  1. Beben says:

    awesome...
    so smooth moving

  2. Daniel White says:

    Thanks, this will be useful for me when/if I ever start making some blogger templates myself.

    The slider is great for magazine and photolog type templates.

  3. Katie says:

    Hi there! I'm trying to help a friend out by inserting this onto her blog and it's just not quite working for me. I'm hoping you can see what we've done wrong. Her blog is at: http://mommyhoodunscripted.blogspot.com/

  4. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Find this code:

    .mytext h2 {
    font: 18px Georgia,century gothic,Verdana, sans-serif;
    margin:15px 0px 5px 310px;
    font-weight:normal;
    width:350px;
    height:24px;
    overflow:hidden;
    }

    .mytext p {
    width:350px;
    margin:0px 0px 5px 310px;
    color:#6f6f6f;
    }

    Now replace it with below code:

    .mytext h2 {
    font: 18px Georgia,century gothic,Verdana, sans-serif;
    margin:15px 0px 5px 310px;
    font-weight:normal;
    width:350px;
    height:24px;
    overflow:hidden;
    float:right;
    }

    .mytext p {
    width:350px;
    margin:0px 0px 5px 310px;
    color:#6f6f6f;
    float:right;
    }

  5. April says:

    AHHH yes it did work, thank you so much ! and thanks katie for helping me out!

  6. April says:

    Hey ok if you guys could please help me out... my blog is http://mommyhoodunscripted.blogspot.com well the slider is working great but my words are getting cut off and i can't seem to figure out how to fix it or what to change and no one else seems to know either...would love the help...thanks so much!!!

  7. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    To Apirl,

    I check your template.Change your CSS code as below.

    <style type='text/css'>
    #slidearea{
    height: 230px;
    overflow: hidden;
    position: relative;
    width:598px;
    background:#242424;
    }
    #gallerycover{
    overflow: hidden;
    margin:0px 0px;
    }

    .mygallery{
    overflow: hidden;
    position:relative;
    }

    .mytext img{
    position:absolute;
    left:10px;
    top:10px;
    padding:5px;
    background:#515252;
    border:1px solid #5e5e5e;
    float:left;
    }

    .mytext{
    position:relative;
    margin:0px 0px;
    height:200px;
    width:590px;
    float:left;
    display:inline;
    line-height:20px;
    color:#c4c4c4;
    font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
    }

    .mytext ul li{
    height:200px;

    }

    .mytext a:link, .mytext a:visited {
    color:#fff;
    }

    .mytext h2 {
    font: 18px Georgia,century gothic,Verdana, sans-serif;
    margin:15px 10px 5px 300px;
    font-weight:normal;
    width:270px;
    height:24px;
    overflow:hidden;
    float:right;
    }

    .mytext p {
    width:270px;
    margin:0px 10px 5px 300px;
    color:#6f6f6f;
    float:right;
    text-align:justify;
    }

    .mytext h2 a:link, .mytext h2 a:visited {
    color:#fff;
    }
    .slnav{
    padding:3px 0px;
    background:#000;

    }
    .prev{
    float:left;
    width:24px;
    height:24px;
    z-index:200;
    margin-left:5px;
    background:url(http://i227.photobucket.com/albums/dd163/kroets/Copyofprev.png);
    }

    .next{
    float:right;
    width:24px;
    height:24px;
    z-index:200;
    background:url(http://i227.photobucket.com/albums/dd163/kroets/Copyofnxt.png);
    display:block;
    }

    </style>

  8. April says:

    Thank you so much! I changed the code to what you listed and now everything is working fine!!! Your a life saver 🙂

    *Have a great day*

  9. psydex says:

    Marvelous!
    One question ... What line should i edit to change it's dimentions?
    I wan't it a bit widther (about 700 px.) with same heigh

  10. psydex says:

    Never mind i found how to change the dimentions of the slider 🙂
    But i have another question ! How to add to it 1px. white border?

  11. psydex says:

    How can i make it to scroll automaticly in 3 sec. for example?

  12. Eric says:

    I'm attempting to change the box size to be larger - I like the image height to be around 400. The problem I have is the arrow bar is still set at the height 200. You can see what I attempted to do here : http://werestillboring.blogspot.com/

    Basically I love the idea of the sliding menu - just wanted it to be bigger. Any suggestions ?

    Thank you !

  13. BB says:

    Hi All,

    This is absolutely brilliant! I resized to fit on my page, and looks great.
    I have the same question as psydex though. Is there a way to code the slider to automatically rotate every 5 seconds or so?

  14. Sreejesh says:

    Can you use feeds to auto update the contents?? adding each link is painful 🙁

  15. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Sureejesh read article below:

    https://www.bloggertipandtrick.net/2009/11/featured-contentrecent-post-slider.html

  16. psydex says:

    @Sreejesh theres no way to add news via feed!
    The only way is manualy!

  17. Harsh says:

    I made it to work absolutely fine on my blog by changing widget width and setting overflow of title to false. I made 270x170 images separately for it because my posts images are of different sizes. Check out - http://harsh-techtalk.blogspot.com/

  18. dJumTKS says:

    good information, whether able to modify the ad and run in auto slider?

  19. dJumTKS says:

    good information, whether able to modify the ad and run in auto slider?

  20. GameRumble says:

    Thanks! Currently trying this out and is working right now. Just adding a few tweaks!

    http://www.game-rumble.com/

  21. Internet Inspired says:

    This works really great! Thanks!
    You can check mine out at http://www.datemedammit.com

  22. Anonymous says:

    How can i make it scroll automaticaly after a few seconds?

  23. maishee says:

    this is so cool, but is it possible that the slider will show the number of slides it has? http://pinoymoneybox.blogspot.com/

  24. Anonymous says:

    Nice!

  25. PICTURELOCK says:

    Hay I cannot seem to get this to work with a modified Minera template, any chance you could check my coding?
    Emmet.

  26. Admin says:

    Hi Friend this is kv,
    I would like to know ,how to make this as atomic slider.(means ex.for every 2sec it should scroll)
    Please give me the script,
    My mail id is kv_kvs@yahoo.com

  27. Christina says:

    Is there any way to make it scroll automatically???

  28. Aditya Kumar Nayak says:

    I am not able to change the slider width. Please help me out. It is at

    www.awakeningindianstoindia.in

  29. james says:

    dear btip&trick admin

    i want a reference from you .i want a sliding menu for my blog to link some pages from home page

    here i the image of what i want

    http://www5.picturepush.com/photo/a/3478573/img/Anonymous/NewPicture073.png

    please suggest something very same to what i am requesting

    thanks for your support

  30. Sam says:

    Hi, please help me out to insert this slider into my template.. i tried but its not going through.

    www.anime-rocks.com

  31. admin [free21cineplex] says:

    please help me... the title doesn't appear
    my blog
    http://free21cineplex.blogspot.com/

  32. Ricky Payne says:

    Can you please help me? I have put this onto my site and for some reason the slider does not appear.. my website is here

    http://www.tubeworm.org

  33. Anonymous says:

    How can I resize the board of slide? Mine block size to put it into just 200. Thanks bro

  34. AndroidPhilip says:

    so i have to change the code everythime i want to change what posts are featured? and how do i host the images my self?

  35. Naren Dran says:

    how to resize this widget?

  36. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Naren Dran

    Change width and height properties in this code:

    <style type='text/css'>
    #slidearea{
    height: 230px;
    overflow: hidden;
    position: relative;
    width:680px;
    background:#242424;
    }
    #gallerycover{
    overflow: hidden;
    margin:0px 0px;
    }

    .mygallery{
    overflow: hidden;
    position:relative;
    }

    .mytext img{
    position:absolute;
    left:10px;
    top:10px;
    padding:5px;
    background:#515252;
    border:1px solid #5e5e5e;
    }

    .mytext{
    position:relative;
    margin:0px 0px;
    height:200px;
    width:680px;
    float:left;
    display:inline;
    line-height:20px;
    color:#c4c4c4;
    font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
    }

    .mytext ul li{
    height:200px;

    }

    .mytext a:link, .mytext a:visited {
    color:#fff;
    }

    .mytext h2 {
    font: 18px Georgia,century gothic,Verdana, sans-serif;
    margin:15px 0px 5px 310px;
    font-weight:normal;
    width:350px;
    height:24px;
    overflow:hidden;
    }

    .mytext p {
    width:350px;
    margin:0px 0px 5px 310px;
    color:#6f6f6f;
    }

    .mytext h2 a:link, .mytext h2 a:visited {
    color:#fff;
    }
    .slnav{
    padding:3px 0px;
    background:#000;

    }
    .prev{
    float:left;
    width:24px;
    height:24px;
    z-index:200;
    margin-left:5px;
    background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);
    }

    .next{
    float:right;
    width:24px;
    height:24px;
    z-index:200;
    background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);
    display:block;
    }

    </style>

    First try this slider in a test blog changing widths and heights.After that add it to your original blog.

  37. Damion Schweizer says:

    I'm not sure what I'm doing incorrectly but I'm unable to get the prev and next buttons to show up on the slider. Any ideas?

  38. Damion Schweizer says:

    Ok so what I'm trying to do is make it the size of width 760 by 150 but when I change the size of the height it makes the arrows disappear. How do I fix that issue.

  39. Damion Schweizer says:

    I finally have it up and working. If you want to check it out you can. http://damionscsav.blogspot.com/

  40. Mamun says:

    hey please help me my Slide show show all of my page but i want to just show in Homepage ??how i can >>please help me quick

  41. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Mamun

    Read this:

    https://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html

  42. !i! KSAK !i! says:

    this widget works excellent, but when i open the post, the slider is still visible, it should not be there, how to make it visible only at MAIN PAGE? please

  43. Z-worriors says:

    Work nicely on my Site!

    thanks

  44. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @!i! KSAK !i!

    Follow the instructions given here:

    https://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html

  45. Mick Turner says:

    hi, here is a demo of the featured slider : http://www.healthpub.co.cc/

    But I have question, how can I make the slides change automatically?

    /Mick

  46. ShilpV says:

    I liked it and am using it, thanks. Just one question, is it supposed to auto-scroll? If yes, then I cant understand why it is not doing so in my case. Can you help? Cheers!

  47. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @ShilpV

    This slider is not auto-scroll.

  48. TwistedTool says:

    Hello Lasantha. Thanks a lot for this simple and very useful gadget!

    I only had to make minor changes so the width would fit with my blog and now it's just perfect!

    You are invited to have a look at it and tell me your opinion (although you won't understand a lot from the texts, because it's a greek blog!)

    Here is the link: http://atwistedblog.blogspot.com/

    Thanks again!

  49. imusics says:

    How Can I move the title more to the right? it's like this http://sudgodrama.blogspot.com/ PLEASE HELP!

  50. LMG says:

    This is a great slider. Is there anyway where can only appear on the homepage? Thanks.

  51. Prass says:

    awesome..thx

  52. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @LMG

    follow the steps here:

    https://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html

  53. ariel.s says:

    hello, i am currently in the process of redesigning my blog page and tried to add this beautiful slider, but it doesn't seem to be working correctly. can you please check my CSS at the test site and let me know what you think? http://www.chromewavesradiotest.blogspot.com

    thank you!

  54. Amir Emami says:

    Hello blogger tips and tricks, this article is great , but unfortunately it doesnt work fine on my homepage. I dont know whats wrong. I can c the avatar pic with description just for seconds and it disappears suddenly. please and please check my html and homepage and tell me whats wrong with my template. I will appreciate it. God Bless u Dude 🙂
    http://www.7zero-fa.blogspot.com/

  55. Self Sagacity says:

    Hello, how do you change the font? Not the header but the description? I would like it to be a bit bigger and more readable. How do you change the back ground so that it isn't grey?

    Thank you! This tutorial is awesome.

  56. Sarfaraz Ahmed Abbasi says:

    Can You Please Help Me
    I Want This To Play (Move Slide 1 To Slide 2 To Slide 3 Automatically Even Without Clicking Next And Previous Buttoons) (Those Buttons Can Be Optional)

  57. Jobs says:

    Voy a probar este script aver si sale bien

  58. Anees says:

    hello bro! i have added it on my website http://www.learneveryone.com . I have done all setting to fit it in my template but there is still a problem, when page loads, it shows two posts merged in one another and after few seconds everything goes fine.. dont know how to solve this stupid problem.. please have a look at my blog and tell me how can I fix this... waiting for your reply..
    Bundles of thanks in advance

  59. Dav7 says:

    Everyone ask but no one can make it scroll automatically 🙁

    Still hopping to read a way to do it 😉

  60. Destiny Calling says:

    Hi,
    I am using a revolution code-red template. View it here. www.tooth-n-nail.blogspot.com. Is there any option I can use your featured article slider for this. Please advise.
    Raj Nair

  61. admin says:

    Hi could you please take a look at my blog www.thegamblinghub.net. The widget is not working, I must have something missing as the arrows are missing.

  62. SD says:

    Hello BT:

    Its just excellent!

    I've tried to implement it...but having some problem when I add the html/javascript widget at the top of my blog, below the header. It looks the top 1-2 rows of the slider not getting displayed and the color is also not ok. But the same slider html code is put at the bottom of the blog, just above the footer...its works perfect.

    Just go to my test blog....and check both the sliders - top one & the bottom one. And let me know what to be done to make it perfect at the top. PLEASE DO REPLY AND BTW I'M USING BLOGGER'S DESIGNER TEMPLATE - SIMPLE.

    Thanks in advance....

    Regards,
    SD - a new blogger

  63. THE BIRTH of PNG POSITIVE says:

    Hi,

    I followed your step for the post slide and still my image is not appearing...I am using Vetro Template.No matter how i try to change the URL from my photobucket url..the image is still not visible...

    Also what is the difference between "url" and "the image address"

    I have removed the slider but I want it back with my slider image...please visit the site and advise me

    http://pngpositive.blogspot.com

  64. Jeya Karthika Pandian Umapathy says:

    Hi.. The slider works fine except for the post title.. Could you pls chk my blog http://formeuandus.blogspot.com/ and kindly let me know whats wrong..

  65. crossthelimit says:

    I add the carousel on my blog but I cannot see the title of the post preview

    Can you help me pls?

    http://crossingthelimits.blogspot.com/

  66. Azhar Nadeem says:

    I have a Featured content slider as part of my Blogger template. However I have to manually update the slider area reagarding Image, URL and snippet. It there a way to align/Associate the slider are with Featured posts widget

  67. axcel says:

    can you help me with the css codes of the featured content sideshow in my blog please? I got my template at PBR but they only give the script.

  68. Shanjei says:

    GREAT!! Thanks a lot!

  69. Lady says:

    Thankyou very much, I used this on my blog 🙂

  70. Itender Rawat says:

    Thanks for this admin. Its very cool slide!

  71. New Gamer Nation says:

    I used this on my blog thanks for everything

  72. AtoniBay says:

    Hey bro thanks for these it adds a little flavor to my blog 🙂

  73. wh1tepix says:

    do you know, how can this slider move automatically every X seconds ??
    thanks !

  74. haseeb riaz says:

    hi i have tried it but didnt work for me can u do some xml editing ........................plz visit my blog and see the slider i cannot edit the text in the featured post...thanks

  75. Jube says:

    awesome...
    so smooth moving

  76. Habisst says:

    Thanks for this Tut. Its very cool slide! But, I want add Featured Post Content Slider like website: http://www.exphim.com
    Please help me!
    Thanks!

  77. Reyn says:

    Is this working for Tumblr blog?

  78. Jackson Oh says:

    Hi,

    I have just used your code to insert a slider on my own blog (http://licence2speed.blogspot.com). Fantastic! It works like a charm. Thank you very much, appreciate it!

  79. mathrealm says:

    Good day!
    I just would like to ask help from you regarding my content slider. There is an overlap on the lower part. The image comes from one of the thumbnails. I dont know how to fix it. Please help me.... please....
    Thank you in advance!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.