Responsive and Automated Slider for Blogger



In order to add this widget's code go to 
  • Blog Title 
  • Layout 
  • Add Widget 
  • HTML/JavaScript 
  • And paste the given code in the box opened.
<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="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

FeaturedPostSide({

blogURL:"http://hstm3.blogspot.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 http://hstm3.blogspot.com/ with your own desired URL and save the widget.
Now save the template so that changes can take place.

Settings:
blogURL      = Add your blog URL here
MaxPost       = The total no. of posts in the slider
Interval         = Time taken to change the slides position in milliseconds
autoplay        = Write true or false in you want / don't want the slides to change automatically.
tagname        = If you want to display articles by tag / label, such as the tag widget, it will be written as tagname: "widget

Comments