First of all sorry for late post, still I was busy with final exam, I lost few days for blogging. Today I came up with an beautiful featured slider and I want to share with you. You may have seen many websites with cool content slider. In the past I had posted featured content widget, it was cute widget.
This is an automatic slider with small navigation which is used to navigate next and prev. In this widget there is a specialty that is you don't won't to add image url and link text, it pick out your blog recent post automatically as compared to other slider we have to manually add image url and link text. You just have to add your blog address that's all.
This is an automatic slider with small navigation which is used to navigate next and prev. In this widget there is a specialty that is you don't won't to add image url and link text, it pick out your blog recent post automatically as compared to other slider we have to manually add image url and link text. You just have to add your blog address that's all.
Live Demo
How To Add Featured Slider In Blogger
1. Go to your blogger layout page
2. Click Add Gadget and select HTML/JavaScript.
3. Now paste the following code into it.
<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#00BD79;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:49.8%}
#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://softglad.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#00BD79;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:49.8%}
#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://softglad.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
Now replace the url (highlighted in red) with your blog url and Save It. You can also customize image size, auto play, number of post to display and interval time on the above code.
I'm strongly recommend you to add this widget above your blog post section.
This widget will show in every pages of your blog like post, archive, static, label page. So if you wish to display this widget only in home page then you may have to follow below tips.
1. Goto template page and click edit HTML. Check mark Expand widget template.
2. Find the following piece of code in your blog, Below code is not exactly same in your blog. It will different widget id, here is an just example HTML7
I hope you like this new widget and if you got any error you can feel free to comment below.
I'm strongly recommend you to add this widget above your blog post section.
This widget will show in every pages of your blog like post, archive, static, label page. So if you wish to display this widget only in home page then you may have to follow below tips.
1. Goto template page and click edit HTML. Check mark Expand widget template.
2. Find the following piece of code in your blog, Below code is not exactly same in your blog. It will different widget id, here is an just example HTML7
<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
You cannot find the third line and last third line code (highlighted in red) but you have to copy paste and add it between your widget in your template.<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
I hope you like this new widget and if you got any error you can feel free to comment below.
its not work please help me
ReplyDeleteBro. Please mention where you got error.
DeleteThe script that I posted in this article never get any error because i tested well.
Hello Ashiq bro how are you. i want chat with you and some guide line required.. pls tell me how to possible to make money in google adsens.. and tell me i want make a website how it??
ReplyDeletepls guide me mahmoodge1@gmail.com
Fine. I will try to add you soon and give you some ideas about blogging.
DeleteThanks....
THANKS ! VERY COOL
ReplyDeletenice slider but can you tell me how to change the green outline with a blue?
ReplyDeletebro gadget fits my site perfectly but i want to run this gadget on particular label does it possible? it is showing recent posts on it own.
ReplyDeletehere is my site you can see my problem http://www.ourtfi.com/
ReplyDeleteHow can i add this slider to all of my posts, i mean under image and text. Thanks :)
ReplyDeleteI have already coded to appear in all pages of a blog like post, static page, label, archive etc.
DeleteHello Ashiq, nice gadget but links opens in new tab... how can i force it to open in self window instead of blank?
Deletethanks man you helped me....
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteDear,
ReplyDeletethis does not work in sub domain url. I tried in my sub domain blogspot.com it didn't work. But when i tried in my domain name which i purchased, it worked.
I want to put this slider in my sub domain blog
please tell me how to do it
can i use for basic html?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteawesome this is wat i want i used it at www.telugusongs.net.in
ReplyDeletelook like same with the vertical slider. but still nice :)
ReplyDeletehttp://soffmodd.blogspot.com/
it stopped working on our site technews24h.com , why?
ReplyDeleteUPDATE: works now.
DeleteThis comment has been removed by the author.
ReplyDeleteHi there! loved your gadget. Is there a way to remove author name and date from the slider photos?
ReplyDeletewidhet is not showing pictures, why?
ReplyDeletemy widget is not showing pictures, why?
ReplyDeleteNot working at all!
ReplyDeletesame here, script stop working last 48 hours..
Deleteblog: http://stergiog.blogspot.com
script stop working last days
ReplyDeleteI can see it on iPad...but in browsers on PC i can't see it, why?
ReplyDeletethe page is technews24h.com
Please help me bro it doesent work at my site http://adroiten.blogspot.com/
ReplyDeletenot working bro :(
ReplyDeleteStill not working.
ReplyDeletethe working codes you looking for is here !
ReplyDeletejust search in google: featured posts metro ui - contohblog
it is not this widget.
Delete