Automatic featured post slider widget for blogger

Another great feature on the blogosphere is having a featured post slideshow which will greatly help reduce the bounce rate of your blog.

You can see the live demo on the home page of this blog

----------------------------------------------------------------------------------------------------------------------

How To Install The Automatic Featured Post Widget On Blogger

------------------------------------------------------------------------------------------------

• Login To Blogger Dashboard and go to Layout section

• Click on the Add a Gadget and a pop up will present itself with options on what gadget you wanna add, then select HTML/JavaScript

• In the title box, you can choose to name it anything you want, but you are very free to leave it blank

• Then, copy and paste the whole code you see bellow in the widget content

• 	<style type="text/css">
  	ul.drdsr-feat-posts *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  	ul.drdsr-feat-posts{font:normal normal 11px Verdana,Geneva,sans-serif}
  	ul.drdsr-feat-posts,ul.drdsr-feat-posts li{margin:0;padding:0;list-style:none;position:relative}
  	ul.drdsr-feat-posts{width:700px;height:450px}
  	ul.drdsr-feat-posts li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
  	ul.drdsr-feat-posts li:nth-child(1),ul.drdsr-feat-posts li:nth-child(2),ul.drdsr-feat-posts li:nth-child(3),ul.drdsr-feat-posts li:nth-child(4){display:block}
  	ul.drdsr-feat-posts img{border:0;width:100%;height:100%}
  	ul.drdsr-feat-posts li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
  	ul.drdsr-feat-posts li:nth-child(2){left:0;top:50%}
  	ul.drdsr-feat-posts li:nth-child(3){left:50.5%;top:50%}
  	ul.drdsr-feat-posts li:nth-child(4){width:100%;left:0;top:75%}
  	ul.drdsr-feat-posts .overlayx,ul.drdsr-feat-posts li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
  	ul.drdsr-feat-posts .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-color: #000;
  	color: #fff;
  	-moz-opacity: .5;
  	-khtml-opacity: .5;
  	opacity: .2;
  	text-align:justify;background-position:100% 50%;background-repeat:repeat-x}
  	ul.drdsr-feat-posts
  	ul.drdsr-feat-posts li:nth-child(1) .overlayx{background-position:50% 25%}
  	ul.drdsr-feat-posts .overlayx:hover{-ms-filter:Alpha(Opacity=90);filter:alpha(opacity=10);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
  	ul.drdsr-feat-posts h4{position:absolute;bottom:2px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:"Segoe UI",Verdana,"Trebuchet MS",Times,"Times New Roman";font-weight:normal}
  	ul.drdsr-feat-posts h4{color:#fff;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
  	ul.drdsr-feat-posts li:nth-child(1) h4{position:absolute;bottom:30px;font-size:230%;color:#fff;background-color:#000; filter:alpha(opacity=70); opacity:.7;}
  	ul.drdsr-feat-posts li:nth-child(4) h4{font-size:170%}
  	li:nth-child(2) h4{font-size:120%}
  	li:nth-child(3) h4{font-size:120%}
  	ul.drdsr-feat-posts .label_text{position:absolute;bottom:10px;left:10px;z-index:2;font-size:120%;color:#fff;font-weight:normal;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
  	.label_text .autname{color:#fff;right:2px;padding:2px;}
  	ul.drdsr-feat-posts li:nth-child(2) .autname,ul.drdsr-feat-posts li:nth-child(3) .autname{display:none} li:nth-child(3) .label_text{display:none}
  	li:nth-child(2) .autname{display:none} li:nth-child(2) .label_text{display:none}
  	li:nth-child(4) .label_text{display:none}
  	.buttons{margin:5px 0 0}
  	.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
  	.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:124px;left:50%}
  	.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:128px}
  	</style>
  	<div id="featuredpostside"></div>
  	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript" data='cfasync'></script>
  	<script src="http://feat-posts.googlecode.com/svn/widgetjs"></script>
  	<script type='text/javascript'>
  	//<![CDATA[
  	FeaturedPostSide({
  	blogURL:"http://www.andercorptech.com",
  	MaxPost:8,
  	idcontaint:"#featuredpostside",
  	ImageSize:200,
  	interval:5000,
  	autoplay:true,
  	tagName:false
  	});
  	//]]>
  	</script>

  view rawBeautiful Automated Post Slider for Blogger hosted with  by GitHub

• Replace www.andercorptech.com with the URL of you blog
• To change the Width and height, edit this line ul.drdsr-feat-posts{width:700px;height:450px}
• Click on save and you are done

TIP: To change other aspect of the widget, i presume that you are acquainted with HTML/CSS otherwise do not get things messed up and leave a comment like "The code didn't work"

Otherwise get someone who could help you edit the code to suit you and your blog preference 

• Tweet
• Share
• Share
• Share
• Share

About Admin

My name is lex, a web designer, a computer science student, a blogger, a fan of GTA V, a big time gamer.

Related Post