This slider has a responsive layout and is very attractive. Its fully automated you just have to add the URL of your blog once and the images, titles and links will be updated on their own. This slider crawls and lists the recent posts of the blog. This widget looks somewhat like the one seen on engadget.com. This slider is very attractive and eye-catching too.
A live working demo of this widget can be seen below.
Featured Posts
After seeing the demo in order to add this widget to your blog follow the steps below.
Adding the Widget's Code
To add this widget in your blog firstly go to Blog Title → Layout → Add Widget → HTML/JavaScript. Add the below given code.
<center>
<div id="headerbox">Featured Posts</div>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://files.allbloggertricks.com/Scripts/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.allbloggertricks.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider * {
-moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
ul.abt-sidebar-slider {
height: 500px;
width: 100%;
}
ul.abt-sidebar-slider li {
display: none;
float: left;
height: 24.5%;
overflow: hidden;
padding: 0;
position: absolute;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
left: 0;
top: 50%;
}
ul.abt-sidebar-slider img {
border: 0 none;
height: 100%;
width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
left: 0;
top: 75%;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
left: 0;
top: 25%;
}
ul.abt-sidebar-slider .overlayx {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
border: 4px solid #2E8DCE;
border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
color: white;
font-family: Oswald;
font-size: 25px;
font-weight: 100;
line-height: 1.5em;
margin: 0;
padding: 0 10px;
position: absolute;
top: 25px;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .label_text {
bottom: 10px;
color: white;
font-size: 90%;
left: 10px;
position: absolute;
z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
display: none;
}
.buttons {
margin: 5px 0 0;
}
.buttons a {
display: inline-block;
height: 25px;
position: relative;
text-indent: -9999px;
width: 15px;
}
.buttons a:before {
border-color: transparent #535353 transparent transparent;
border-style: solid;
border-width: 8px 7px;
content: "";
height: 0;
left: 50%;
margin-left: -10px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 0;
}
.buttons a.nextx:before {
border-color: transparent transparent transparent #535353;
margin-left: -3px;
}
.date {
background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
bottom: 93px;
padding: 8px;
position: relative;
right: 6px;
}
#headerbox {
background: #8FB93D;
font-family: Oswald;
padding: 4px;
}
</style>
</center>
After adding the code change the URL in Bold Purple in the field blogURL with your own blog's URL. There are other options too for advance users.
After editing the code, save the widget and finally save the template.
You are done now. Now you and your visitors can see this awesome slider in your blog.
The thumbnails aren't created the way they are done. This makes pictures that are to narrow or too wide to look funny. Any chance to fix that?
ReplyDeleteSee different blogs have different types of thumbnail and I have to select a layout which will suit most type of thumbnail. Also increasing thumbnail will lead to increasing the block size which is not entertained.
DeleteAwesome... Such a simple way to explain ... thnak u soo much .. My blog looks more attractive now..
ReplyDeletecheers !!!
Divya Gattani
http://divyaszaika.blogspot.in/
Some thumbnails aren't appearing in the slider. Can you please help. Thanks!
ReplyDeleteHow to add this below sliding widget as like you ?
ReplyDeleteHelp me.
I have another slider in my blog. when I entered this slider somehow the other one stop working.
ReplyDeleteit cannot exist both at same time?
www.myproplist.com
The issue would be of CSS i.e. both the sliders have been assigned the same name.
DeleteOIC. So both of my current one and this cannot use together. Too bad, this is awesome widget.
DeleteThe script cannot fetch some of my post thumbnails is there any fix to that?
ReplyDeleteSPASIBO =))
ReplyDeletethank's for share
ReplyDeleteThanks, it is great! Not all thumblines are showing, can you help me to fix that?
ReplyDeleteHi, it was working fine, now it does't load the posts anymore, please, can you help?
ReplyDeleteError (509)
ReplyDeleteThis account's public links are generating too much traffic and have been temporarily disabled!
Its an awesome slider for blogger. But I don't want to appear the author name below title how to fix that???
ReplyDeletecan i add Slider on this site www.googlesportsclub.com ?
ReplyDeletefabulous post thanks for share informative article.
ReplyDeleteThanks
ReplyDeletehi i want to show it only on my homepage. how can i do it? thanks a lot
ReplyDelete