Hello Folks, Today we are going to share another awesome blogger Plugin,How to Add Responsive Posts Slider In Blogger Template.This gadget is totally responsive that means it will work perfect with any screen size.Reponsive Recent posts/Article slider is unique in it's own way,In this tool you can display recent updates of your website or blog.Now days everyone wants responsive plugins for their blogger template which suits the blog niche and also happy to serve to any screen size whether it's iphone model or ipad.You might been using posts slider in your template but that is mobile friendly? responsive friendly? If not replace that slider with this beautiful responsive recent post slider.So to grab this widget follow the steps mentioned below.
Step 7. If you are not comfort with manual settings to add slider,then for you we are making little simple.Just go to your layout->Add a Gadget->Select->HTML/JAVASCRIPT and copy the below code and paste in your gadget box.
Now Save your gadget.
Step 8. If you want to display the widget only on Homepage/Main page then add the following conditional tag in your Widget.Suppose your widget id is HTML3 then just go to your template->edit html and after that select your widget,look below for example.
After selecting your widget then your code will look like this.
Demo:
See the Pen How to add Responsive recent posts slider in blogger template by BloggersStand (@bloggersstand) on CodePen.
How To Add Responsive recent Posts slider in blogger template
Installation steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Responsive Slider By www.BloggersStand.com */Step 5. Now Search for closing </body> tag and copy the below code snippet and paste it just before/above </body>
#recentpostbsd {margin:15px auto;}
#bsdslide *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#bsdslide ul,#bsdslide li{padding:0;margin:0;list-style:none;position:relative}
#bsdslide ul{height:320px}
#bsdslide li{width:50%;height:100%;position:absolute;display:none}
#bsdslide li:nth-child(1), #bsdslide li:nth-child(2), #bsdslide li:nth-child(3), #bsdslide li:nth-child(4), #bsdslide li:nth-child(5){display:block}
#bsdslide li:nth-child(1){left:0;top:0}
#bsdslide li:nth-child(2){left:50%;width:25%;height:50%}
#bsdslide li:nth-child(3){left:75%;width:25%;height:50%}
#bsdslide li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#bsdslide li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#bsdslide 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;}
#bsdslide li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Roboto';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#bsdslide li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#8ED557;margin:0;}
#bsdslide li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#bsdslide li:nth-child(1) span.dy, #bsdslide li:nth-child(1) span.autname{display:none;}
#bsdslide a{display:block;width:100%;height:100%;overflow:hidden}
#bsdslide 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;}
#bsdslide 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;}
#bsdslide .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirFZq7VIQLAWZjM_kEp8HVfvPJ6BfrsMcAoPbRjicfrbjV-ybxZPEAVrBQJxGba0Bc4nsvk6mWxIaRSRp01Pu62uLatM4Cj9EMadqof4Y3oq_p0qQsJWh9KYmTAYSJUgyQ31K93hwzPeQ/s1600/fade+bloggersstand.png);background-position:50% 40%;background-repeat:repeat-x;}
#bsdslide h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Roboto';
left:10px;padding:5px 10px;color:#fefefe;z-index:3;line-height:20px;font-weight:normal;
background:rgba(40,40,40,0.6);text-align:left;text-transform:uppercase;margin-right:10px;}
#bsdslide .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(142,213,87,0.8);padding:3px 6px;font-family:'Roboto';
text-transform:uppercase;}
#bsdslide li:nth-child(2) .autname,#bsdslide li:nth-child(3) .autname,#bsdslide li:nth-child(4) .autname,#bsdslide li:nth-child(5) .autname{display:none;}
#bsdslide .overlayx,#bsdslide li{transition:all .4s ease-in-out}
#bsdslide li:nth-child(1) .overlayx{display:none;}
#bsdslide li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#bsdslide li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#bsdslide ul{height:600px}
#bsdslide li:nth-child(1){width:100%;height:50%}
#bsdslide li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#bsdslide li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#bsdslide li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#bsdslide li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#bsdslide li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
<script type="text/javascript" src="https://rawgit.com/ishekharsingh/bloggersstand/master/responsiveslider.js"></script>Customization:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
Recentpostbsd({
blogURL:"http://www.bloggersstand.com",
MaxPost:5,
container:"#recentpostbsd",
ImageSize:450,
Time:9000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
- Replace Bloggersstand.com with your url.
- To change the number of max post replace 5 with your number.
- To change the image size, change 450 with your image dimension.
- To Change the time of posts slider , change 9000 with your time (9000 means 9 seconds)
- If you want to slide posts automatically then Autoplay tag is True if you don't want just make it False.
<div id="recentpostbsd"></div>If you want to display Responsive Recent posts slider widget only on your homepage,then add the following condition tag.
<b:if cond='data:blog.url == data:blog.homepageUrl'><div id="recentpostbsd"></div></b:if>Now Save your Template..Done !
Step 7. If you are not comfort with manual settings to add slider,then for you we are making little simple.Just go to your layout->Add a Gadget->Select->HTML/JAVASCRIPT and copy the below code and paste in your gadget box.
<style>
/* Responsive Slider By www.BloggersStand.com */
#recentpostbsd {margin:15px auto;}#bsdslide *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#bsdslide ul,#bsdslide li{padding:0;margin:0;list-style:none;position:relative}#bsdslide ul{height:320px}#bsdslide li{width:50%;height:100%;position:absolute;display:none}#bsdslide li:nth-child(1), #bsdslide li:nth-child(2), #bsdslide li:nth-child(3), #bsdslide li:nth-child(4), #bsdslide li:nth-child(5){display:block}#bsdslide li:nth-child(1){left:0;top:0}#bsdslide li:nth-child(2){left:50%;width:25%;height:50%}#bsdslide li:nth-child(3){left:75%;width:25%;height:50%}#bsdslide li:nth-child(4){left:50%;top:50%;width:25%;height:50%}#bsdslide li:nth-child(5){left:75%;top:50%;width:25%;height:50%}#bsdslide 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;}#bsdslide li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;padding:0;font-family:'Roboto';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}#bsdslide li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;background:#8ED557;margin:0;}#bsdslide li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0;}#bsdslide li:nth-child(1) span.dy, #bsdslide li:nth-child(1) span.autname{display:none;}#bsdslide a{display:block;width:100%;height:100%;overflow:hidden}#bsdslide 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;}#bsdslide 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;}#bsdslide .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirFZq7VIQLAWZjM_kEp8HVfvPJ6BfrsMcAoPbRjicfrbjV-ybxZPEAVrBQJxGba0Bc4nsvk6mWxIaRSRp01Pu62uLatM4Cj9EMadqof4Y3oq_p0qQsJWh9KYmTAYSJUgyQ31K93hwzPeQ/s1600/fade+bloggersstand.png);background-position:50% 40%;background-repeat:repeat-x;}#bsdslide h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Roboto';left:10px;padding:5px 10px;color:#fefefe;z-index:3;line-height:20px;font-weight:normal;background:rgba(40,40,40,0.6);text-align:left;text-transform:uppercase;margin-right:10px;}#bsdslide .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;position:absolute;background:rgba(142,213,87,0.8);padding:3px 6px;font-family:'Roboto';text-transform:uppercase;}#bsdslide li:nth-child(2) .autname,#bsdslide li:nth-child(3) .autname,#bsdslide li:nth-child(4) .autname,#bsdslide li:nth-child(5) .autname{display:none;}#bsdslide .overlayx,#bsdslide li{transition:all .4s ease-in-out}#bsdslide li:nth-child(1) .overlayx{display:none;}#bsdslide li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){#bsdslide li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){ #bsdslide ul{height:600px} #bsdslide li:nth-child(1){width:100%;height:50%} #bsdslide li:nth-child(2){top:50%;height:25%;left:0;width:50%} #bsdslide li:nth-child(3){left:50%;top:50%;width:50%;height:25%} #bsdslide li:nth-child(4){left:0;top:75%;height:25%;width:100%} #bsdslide li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){#bsdslide li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="recentpostbsd"></div>
<script type="text/javascript" src="https://rawgit.com/ishekharsingh/bloggersstand/master/responsiveslider.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
Recentpostbsd({
blogURL:"http://www.bloggersstand.com",
MaxPost:5,
container:"#recentpostbsd",
ImageSize:450,
Time:9000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
Now Save your gadget.
Step 8. If you want to display the widget only on Homepage/Main page then add the following conditional tag in your Widget.Suppose your widget id is HTML3 then just go to your template->edit html and after that select your widget,look below for example.
<b:widget id='HTML3' locked='false' title='' type='HTML'>Now to display widget only on homepage we are going to add condition tags.now your code will look like this.
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='false' title='' type='HTML'>You can see above highlighted code is for display the widget only on homepage and we recommend to add this widget only on homepage.
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>