Add Responsive and Automated Slider for Blogger

Add responsive and automated slider

for Blogger:

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.

    first step  

       Go to blogger->select blog
                         ->go to layout
                         ->select add a gadget
                         ->select html/javascript
                        ->copy and paste the code below with neccesary corrections 

   customizations:

            find http://tech-mask.blogspot.in and replace with your blog url

   live demo 

                    you can see the demo at start of this page

  html 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://tech-mask.blogspot.in",
	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 tech-mask.blogspot.in 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>

view raw Add Responsive and Automated Slider for Blogger hosted with ❤ by GitHub