Welcome to the Tutbig today I will show you How to Install Responsive Recent Post Slider Widget on Blogger - This widget is very responsive and it comes with a 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.
Stylish Responsive Recent Post Slider Widget In Blogger
These are Following Steps:-
Step 1. 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.tutbig.blogspot.com",MaxPost:8,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:true,tagName:false});});//]]></script>
Do not forget to replace the highlighted "http://www.tutbig.blogspot.com" 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>
I hope you enjoy this post and the photos. Stylish Responsive Recent Post Slider Widget In Blogger.
