Today I'm going to share a new blogger plugin. Everyone wants to show their best posts on the home page through a featured post widget. One of the best ways to display the featured post is using the slider plugin. There is so many sliders are available on the web and today I'm sharing a premium looking responsive featured post slider for the sidebar.You can also use this plugin for displaying ads or any other contents on your blogs sidebar. First of all, go to your blogger dashboard and navigate to the Template section and click Edit HTML. Then add the below CSS code before the </head> tag.
<style type='text/css'>#slide{height:auto}#slidepager{width:auto;margin:0 auto;text-align:center;display:block!important}#slidepager>span{display:inline-block;width:10px;height:10px;margin:10px 5px 0;background:rgba(0,0,0,.2);text-align:center;border-radius:100%;font-size:17px;text-decoration:none;transition:background .3s linear 0s;cursor:pointer}#slidecontent{margin:0 auto;transition:opacity .3s linear 0s;color:#AAA;background:#fff;border:1px solid #dedede;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;position:relative;overflow:hidden;height:auto}.slidepanel{width:100%;padding:10px 15px 15px;-moz-box-sizing:border-box;word-wrap:break-word;-webkit-box-sizing:border-box;box-sizing:border-box}.slidepanel>h2{text-align:left;font-size:20px;font-weight:bold;line-height:1.2em;color:#333;margin:0 auto 10px;text-transform:capitalize;padding:0!important}.slidepanel>p,.slidepanel>span{font-size:14px;font-weight:normal;line-height:1.2em;color:#777;margin:10px 0 0!important}.slidepanel a{color:#333;text-decoration:none;font-weight:700;transition:all .4s ease-out}#slide:hover .slidepanel a{color:#e8554e}.slideimage{width:100%;height:200px;margin:0;padding:0;position:relative}.slideimage img{width:100%;height:100%;margin-bottom:-4px}.clear{clear:both}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}</style>
And also add the below script before the </body> tag.
<script type='text/javascript'>
//<![CDATA[
function _(e){return document.getElementById(e)}function pager(e){_("slidecontent").style.opacity=0;for(var n=0;n<ba.length;n++)ba[n].style.background="rgba(0,0,0,.2)";ba[e].style.background="rgba(0,0,0,.7)",setTimeout(function(){_("slidecontent").innerHTML=bca[e],_("slidecontent").style.opacity=1},300)}function bubbleSlide(){bi++,bi==ba.length&&(bi=0),pager(bi)}var ba,bi=0,intrvl;window.addEventListener("load",function(){ba=_("slidepager").children,intrvl=setInterval(bubbleSlide,7e3)});
//]]>
</script>
After these two adding click the save template button. Then navigate to the blogger layout section. Now select Add a Gadget option from the sidebar of your layout and select HTML/JavaScript gadget.
Then copy and paste the below HTML code inside it and replace the highlighted lines in the code with yours.
<div id='slide'>
<div id='slidecontent'>
<div class="slideimage"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>
<script>
//<![CDATA[
var bca = [
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>'
];
//]]>
</script>
</div>
<div id='slidepager'>
<span onclick='pager(0); clearInterval(intrvl);' style='background:rgba(0,0,0,.7);'></span>
<span onclick='pager(1); clearInterval(intrvl);'></span>
<span onclick='pager(2); clearInterval(intrvl);'></span>
<span onclick='pager(3); clearInterval(intrvl);'></span>
<span onclick='pager(4); clearInterval(intrvl);'></span>
</div>
</div>
In this above code, you can see 6 different featured post sections (1+5). Note that add the same URLs in the first two highlighted codes for the correct working of this plugin.
The best image resolution for this plugin is 300px x 200px. After all, see the results on your blog. Thanks for reading!
Advertisement
EmoticonEmoticon