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 08:24

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 01:52

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
5 August 2013 at 22:54

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 07:28

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

Reply
DEEPAK KUMAR Author
22 September 2013 at 22:52

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

Reply
-langkahbaru- Author
6 November 2013 at 02:55

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 04:14

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

Reply
-langkahbaru- Author
6 November 2013 at 23:06

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

Reply
13 December 2013 at 19:40

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

Reply
16 March 2014 at 15:56

SPASIBO =))

Reply
Aldino Sya Author
10 May 2014 at 12:31

thank's for share

Reply
18 July 2014 at 22:50

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

Reply
27 August 2014 at 07:21

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 09:16

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

Reply
HindiTracks Author
4 November 2014 at 05:48

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
11 November 2014 at 11:18

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

Reply
Redesign Unit Author
20 August 2015 at 04:46

fabulous post thanks for share informative article.

Reply
Admin A. Author
23 March 2016 at 03:08

Thanks

Reply
Admin A. Author
6 June 2016 at 05:37

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 |