How To Install Responsive Recent Posts Slider Inward Blogger

Hello Folks, Today nosotros are going to part about other awesome blogger Plugin,How to Add Responsive Posts Slider In Blogger Template.This gadget is totally responsive that agency it volition piece of job perfect amongst whatever enshroud size.Reponsive Recent posts/Article slider is unique inward it's ain way,In this tool you lot tin display recent updates of your website or blog.Now days everyone wants responsive plugins for their blogger template which suits the weblog niche together with also happy to serve to whatever enshroud size whether it's iphone model or ipad.You powerfulness been using posts slider inward your template but that is mobile friendly? responsive friendly? If non supervene upon that slider amongst this beautiful responsive recent post slider.So to take in this widget follow the steps mentioned below.

Demo:

See the Pen How to add together Responsive recent posts slider inward blogger template yesteryear (@bloggersstand) on CodePen.

How To Add Responsive recent Posts slider inward blogger template

Installation steps:

Step 1. Log inward to your Blogger account together with Go to your Blogger Dashboard.

Step 2. Now Click on  Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> yesteryear Pressing Ctrl+F keys.

Step 4. Copy the below CSS code together with paste it simply earlier the ]]></b:skin> or </style> tag.

/* Responsive Slider By www..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:&#39;Oswald&#39;;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:&#39;Roboto&#39;;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/AVvXsEhsBMeifKWTcSEu5F7Tkv2-5Xu00bHpsPDTVjvVj1sciUj0VYVnuteb6LXmzNtUQemV0_MObp5ZWfdQYdCopqxM5uWdmsJupws_Ts1qN2x-P-NmWJSHQnDFYv6JSZNRKFdPCFAkD4Ky1nI/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:&#39;Roboto&#39;;
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:&#39;Roboto&#39;;
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 solely enshroud together with (max-width:800px){
#bsdslide li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media solely enshroud together with (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 solely enshroud together with (max-width:480px){
#bsdslide li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Step 5. Now Search for closing </body> tag together with re-create the below code snippet together with glue it simply before/above </body>

<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>

Customization: 

• Replace Bloggersstand.com amongst your url.
• To alter the seat out of max post replace 5 with your number.
• To alter the icon size, change 450  with your icon dimension.
• To Change the fourth dimension of posts slider , alter 9000 amongst your fourth dimension (9000 agency ix seconds)
• If you lot desire to slide posts automatically together with hence Autoplay tag is True if you lot don't desire simply instruct inward False.

Step 6. Now Wherever you lot desire to display the Responsive recent post slider inward your blogger template simply add together the below code tag.

<div id="recentpostbsd"></div>

If you lot desire to display Responsive Recent posts slider widget solely on your homepage,then add together the next status 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 lot are non comfort amongst manual settings to add together slider,then for you lot nosotros are making piffling simple.Just become to your layout->Add a Gadget->Select->HTML/JAVASCRIPT and copy the below code together with glue inward your gadget box.

<style>
/* Responsive Slider By www..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:&#39;Oswald&#39;;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:&#39;Roboto&#39;;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/AVvXsEhsBMeifKWTcSEu5F7Tkv2-5Xu00bHpsPDTVjvVj1sciUj0VYVnuteb6LXmzNtUQemV0_MObp5ZWfdQYdCopqxM5uWdmsJupws_Ts1qN2x-P-NmWJSHQnDFYv6JSZNRKFdPCFAkD4Ky1nI/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:&#39;Roboto&#39;;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:&#39;Roboto&#39;;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 solely enshroud together with (max-width:800px){#bsdslide li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media solely enshroud together with (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 solely enshroud together with (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 lot desire to display the widget solely on Homepage/Main page together with hence add together the next conditional tag inward your Widget.Suppose your widget id is HTML3 together with hence simply become to your template->edit html and afterwards that choose your widget,look below for example.

After selecting your widget together with hence your code volition await similar this.

 <b:widget id='HTML3' locked='false' title='' type='HTML'>
      <b:includable id='main'>
  <!-- solely display championship if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
</b:widget>

Now to display widget solely on homepage nosotros are going to add together status tags.now your code volition await similar this.

 <b:widget id='HTML3' locked='false' title='' type='HTML'>
      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- solely display championship if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
</b:widget>

You tin run into to a higher identify highlighted code is for display the widget solely on homepage together with nosotros recommend to add together this widget solely on homepage.