How To Install Responsive Recent Posts Slider In Blogger

0
How to Add responsive posts sliding widget plugin in blogger template
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.
Demo:


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 */
#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://4.bp.blogspot.com/-KFJSSIzWJJ0/Vtkt6FVQjuI/AAAAAAAAFfo/nxUUAjMB0dk/s1600/fade%2Bbloggersstand.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 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;}}
Step 5. Now Search for closing </body> tag and copy the below code snippet and paste it just 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 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.
Step 6. Now Wherever you want to display the Responsive recent post slider in your blogger template just add the below code tag.
<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:&#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://4.bp.blogspot.com/-KFJSSIzWJJ0/Vtkt6FVQjuI/AAAAAAAAFfo/nxUUAjMB0dk/s1600/fade%2Bbloggersstand.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 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.
how to find widget html id in blogger template
After selecting your widget then your code will look like this.
 <b:widget id='HTML3' locked='false' title='' type='HTML'>
      <b:includable id='main'>
  <!-- only display title 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 only on homepage we are going to add condition tags.now your code will look like this.
 <b:widget id='HTML3' locked='false' title='' type='HTML'>
      <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 != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
</b:widget>
You can see above highlighted code is for display the widget only on homepage and we recommend to add this widget only on homepage. 

Learn trick to add creating adding responsive recent article posts slider box widget gadget plugin for blogger template,Tutorial on installing responsive auto posts sliding widget in blogspot website.
Hello Folks, Today we are going to share another awesome blogger Plugin ,How to Add Responsive P...
SUMMARY

Learn trick to add creating adding responsive recent article posts slider box widget gadget plugin for blogger template,Tutorial on installing responsive auto posts sliding widget in blogspot website.

You Might Also Like:

We hope this article helped you to learn How To Install Responsive Recent Posts Slider In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Install Responsive Recent Posts Slider In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand