When comparing Blogger with WordPress, we often lament the lack of easy-to-install plugins on Blogger. While this post isn’t going to magically port WordPress plugins to Blogger, it will help you add a smart, automated and customizable Featured Posts Slider on your blogger blog.
You can see a live demo of the widget on the right side of this page itself (if you are on your pc/laptop).
How to install Automatic Featured Posts Slider widget on Blogger
- Log in to your Blogger Dashboard and go to the Layout section from the menu present on the left side.
- Click the Add a Gadget button and among the list of Available Gadgets, select the HTML/JavaScript option.
- In the Title box, enter any value you want (we are using “Popular Articles”), though you are free to leave it blank.
- Paste the below code in content:
<style scoped="" 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:320px;
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:20px;
color:#fff;
background-color:#000;
filter:alpha(opacity=60);
opacity:.6;
}
ul.drdsr-feat-posts li:nth-child(4) h4 {
font-size:17px
}
li:nth-child(2) h4 {
font-size:14px
}
li:nth-child(3) h4 {
font-size:14px
}
ul.drdsr-feat-posts .label_text {
position:absolute;
bottom:10px;
left:10px;
z-index:2;
font-size:120%;
color:#5b94fd;
font-weight:normal;
background-color:#000;
filter:alpha(opacity=60);
opacity:.6;
}
.label_text .autname {
color:#ffff00;
right: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:-10px;
left:50%
}
.buttons a.nextx::before {
border-color:transparent transparent transparent #535353;
margin-left:-3px
}
</style>
<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://feat-posts.googlecode.com/svn/widgetjs"></script>
<script type="text/javascript">//<![CDATA[FeaturedPostSide( {
blogURL:"http://www.ABoutLogger.Blogspot.com",MaxPost:4,idcontaint:"#featuredpostside",ImageSize:200,interval:5000,autoplay:false,tagName: false
}
);
//]]></script>
- Replace the highlighted ABoutLogger.Blogspot.com with your Blogspot blog’s address..
- Hit the Save button when done.
Tip: If you want to change other small properties of this widget (and make modifications with other parts of your template and posts), we’d recommend you to get acquainted with HTML and CSS. Come on, it isn’t as daunting as it sounds.
I hereby confess that I am not the original developer behind this widget. Unfortunately, I can’t trace back to its original creator. I have modified it heavily to make it look somewhat like a widget Engadget used not so long back.
Let us know in the comments section if you are facing any problems using this widget, we shall try to work on helping you solve the problem.
0 comments:
Post a Comment