Add Responsive Recent Post Slider Widget in Blogger

How to Install Responsive Recent Post Slider Widget on Blogger - Today I am going to show you how you can easily Install a responsive recent post slider widget in blogger. This widget is very responsive and it's comes with hover effect. Okay without any delay I'm going to tell you how you can add this responsive widget on your blog. Follow the below instructions.

Before you add this widget in your blog, make sure to take a look of this widget by clicking on the below demo button.

Live Demo

Okay, if you like this widget and want to install it on your own blog, then follow the below simple steps and add this dynamic widget in your blog without having any problem.

First go to your blogger dashboard, Now go to the"Template" section and then click on the "Edit html" button.

Find the below code by pressing "Ctrl + F" key together from your keyboard.

]]></b:skin>

After that, copy the below CSS code and paste it just before ]]></b:skin>:

/* CSS Responsive Slider Recent Post */#featuredpost {margin:15px auto;}#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}#slides ul{height:320px}#slides li{width:50%;height:100%;position:absolute;display:none}#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}#slides li:nth-child(1){left:0;top:0}#slides li:nth-child(2){left:50%;width:25%;height:50%}#slides li:nth-child(3){left:75%;width:25%;height:50%}#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;background:#ff6553;margin:0;}#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0;}#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}#slides a{display:block;width:100%;height:100%;overflow:hidden}#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';text-transform:uppercase;}#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}#slides .overlayx,#slides li{transition:all .4s ease-in-out}#slides li:nth-child(1) .overlayx{display:none;}#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){  #slides ul{height:600px}  #slides li:nth-child(1){width:100%;height:50%}  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Now copy and paste the below JavaScript just above the </body>

<script src='https://googledrive.com/host/0B-AYvC9Y1riaYkZwVUtyOFBqY0U' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.smartpik.in",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Do not forget to replace the highlighted "http://www.smartpik.in" with your own blog URL.

Now copy and paste the below "HTML" code anywhere. Just after/before "content-wrapper" or under "menu-wrapper".

<b:if cond='data:blog.url == data:blog.homepageUrl'><div id="featuredpost"></div></b:if>

That's it, click on the orange save template button to make changes.

Note- If you want to bring up this slider on every page, then replace below "HTML code" with above "HTML code".

<div id="featuredpost"></div>

That's it! I hope you like this widget! Stay tuned for more cool widgets, Tips and Tricks!