Responsive and Automated Slider for Blogger

Posted On // 19 comments


Slider Blogger
Hello friends. Today I am going to share a widget which many of the readers have requested to add. This widget is inspired by my previous widget.
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.

19 comments

Naresh Swami Author
24 July 2013 at 20:54

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?

Reply
25 July 2013 at 14:22

See 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.

Reply
Divya Gattani Author
6 August 2013 at 11:24

Awesome... Such a simple way to explain ... thnak u soo much .. My blog looks more attractive now..
cheers !!!

Divya Gattani
http://divyaszaika.blogspot.in/

Reply
2 September 2013 at 19:58

Some thumbnails aren't appearing in the slider. Can you please help. Thanks!

Reply
DEEPAK KUMAR Author
23 September 2013 at 11:22

How to add this below sliding widget as like you ?
Help me.

Reply
-langkahbaru- Author
6 November 2013 at 16:25

I have another slider in my blog. when I entered this slider somehow the other one stop working.

it cannot exist both at same time?

www.myproplist.com

Reply
6 November 2013 at 17:44

The issue would be of CSS i.e. both the sliders have been assigned the same name.

Reply
-langkahbaru- Author
7 November 2013 at 12:36

OIC. So both of my current one and this cannot use together. Too bad, this is awesome widget.

Reply
14 December 2013 at 09:10

The script cannot fetch some of my post thumbnails is there any fix to that?

Reply
17 March 2014 at 04:26

SPASIBO =))

Reply
Aldino Sya Author
11 May 2014 at 01:01

thank's for share

Reply
19 July 2014 at 11:20

Thanks, it is great! Not all thumblines are showing, can you help me to fix that?

Reply
27 August 2014 at 19:51

Hi, it was working fine, now it does't load the posts anymore, please, can you help?

Reply
Oyin Ayashi Author
27 August 2014 at 21:46

Error (509)
This account's public links are generating too much traffic and have been temporarily disabled!

Reply
HindiTracks Author
4 November 2014 at 19:18

Its an awesome slider for blogger. But I don't want to appear the author name below title how to fix that???

Reply
kawaii meme Author
12 November 2014 at 00:48

can i add Slider on this site www.googlesportsclub.com ?

Reply
Redesign Unit Author
20 August 2015 at 17:16

fabulous post thanks for share informative article.

Reply
Admin A. Author
23 March 2016 at 15:38

Thanks

Reply
Admin A. Author
6 June 2016 at 18:07

hi i want to show it only on my homepage. how can i do it? thanks a lot

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Responsive and Automated Slider for Blogger |