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 .
<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.
awesome...
so smooth moving
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.
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/
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;
}
AHHH yes it did work, thank you so much ! and thanks katie for helping me out!
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!!!
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>
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*
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
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?
How can i make it to scroll automaticly in 3 sec. for example?
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 !
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?
Can you use feeds to auto update the contents?? adding each link is painful 🙁
Sureejesh read article below:
https://www.bloggertipandtrick.net/2009/11/featured-contentrecent-post-slider.html
@Sreejesh theres no way to add news via feed!
The only way is manualy!
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/
good information, whether able to modify the ad and run in auto slider?
good information, whether able to modify the ad and run in auto slider?
Thanks! Currently trying this out and is working right now. Just adding a few tweaks!
http://www.game-rumble.com/
This works really great! Thanks!
You can check mine out at http://www.datemedammit.com
How can i make it scroll automaticaly after a few seconds?
this is so cool, but is it possible that the slider will show the number of slides it has? http://pinoymoneybox.blogspot.com/
Nice!
Hay I cannot seem to get this to work with a modified Minera template, any chance you could check my coding?
Emmet.
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
Is there any way to make it scroll automatically???
I am not able to change the slider width. Please help me out. It is at
www.awakeningindianstoindia.in
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
Hi, please help me out to insert this slider into my template.. i tried but its not going through.
www.anime-rocks.com
please help me... the title doesn't appear
my blog
http://free21cineplex.blogspot.com/
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
How can I resize the board of slide? Mine block size to put it into just 200. Thanks bro
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?
how to resize this widget?
@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.
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?
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.
I finally have it up and working. If you want to check it out you can. http://damionscsav.blogspot.com/
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
@Mamun
Read this:
https://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html
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
Work nicely on my Site!
thanks
@!i! KSAK !i!
Follow the instructions given here:
https://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html
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
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!
@ShilpV
This slider is not auto-scroll.
now slider is updated to scroll automatically.
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!
How Can I move the title more to the right? it's like this http://sudgodrama.blogspot.com/ PLEASE HELP!
This is a great slider. Is there anyway where can only appear on the homepage? Thanks.
awesome..thx
@LMG
follow the steps here:
https://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html
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!
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/
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.
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)
Voy a probar este script aver si sale bien
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
Everyone ask but no one can make it scroll automatically 🙁
Still hopping to read a way to do it 😉
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
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.
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
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
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..
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/
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
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.
GREAT!! Thanks a lot!
Thankyou very much, I used this on my blog 🙂
Thanks for this admin. Its very cool slide!
I used this on my blog thanks for everything
Hey bro thanks for these it adds a little flavor to my blog 🙂
do you know, how can this slider move automatically every X seconds ??
thanks !
find this:
auto: 2000, // Set to a numeric value (800) in millis. Time period between auto scrolls
Here 2000 means 2 seconds. Change it to other value.
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
awesome...
so smooth moving
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!
Is this working for Tumblr blog?
Yes, if you can add html/css and js.
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!
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!
you need to remove this part from the template:
<script src='http://code.jquery.com/jquery-latest.js'></script>