How To Add Lovely Featured Slider With Navigator For Blogger/Blog

Today I came up with  Lovely Featured Slider With Navigator For Blogger/Blog and that i wish to share with you. you’ll have seen several websites with cool content slider. You may see the slider such slider in several wordpress blogs however once coming back to blogger it’s never abundant seen. This widget is shared by Ashiq Hassan and exploitation my very own tricks additional I customized this plugin to works excellent along with your blog.

This is Lovely Featured Slider With Navigator For Blogger/Blog with widget navigation that is employed to navigate next and prev. during this gizmo there’s a specialty that’s you do not will not to feature image URL and link text, it discover your journal recent post mechanically as compared to alternative slider we’ve to manually add image URL and link text. you only have to be compelled to add your blog address that is all.

How To Add Lovely Featured Slider With Navigator For Blogger/Blog

How To Add Featured Slider In Blogger

  • Step 1 : Go To Blogger > Design > Page Elements
  • Step 2:  Click on “Add a Gadget” link
  • Step 3:  From the pop-up window, choose HTML/JavaScript
  • Step 4:  Copy and paste the following code below
<style type="text/css">
#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:250px}
#slides li{width:49.9%;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){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(;background-position:50% 50%;background-repeat:repeat-x;border:4px solid #1BA1E2;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#1BA1E2;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #FFFFFF transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #FFFFFF;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
<div id="featuredpost"></div>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function () {

Now replace the url (highlighted in blue) with your blog url and Save It. You can also customize image size, auto play, number of post to display and interval time on the above code.


This widget will show in every pages of your blog like post, archive, static, label page. So if you wish to display this widget only in home page then you may have to follow below tips.

  • Goto template page and click edit HTML. Check mark Expand widget template.
  • Find the following piece of code in your blog, Below code is not exactly same in your blog. It will different widget id, here is an just example HTML7
<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  <div class='widget-content'>
  <b:include name='quickedit'/>


  • You cannot find the third line and last third line code (highlighted in red) but you have to copy paste and add it between your widget in your template.

I hope you like this new widget and if you got any error you can feel free to comment below.

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!


  1. shakeel asghar says:

    nice widget adrian i appreciate your work both widgets is great tooltips recent post and this slider great work dude
    Google launch newGoogle+ Followers Box in gadget inventory must read!

  2. adrian lucernas says:

    @shakeel asgharThanks buddy, Your appreciation is very important for me mate. Hope you like my future posts!

  3. Praveen Halladmani says:

    Hi again,

    I don’t know why this is happening with your blog but again the same problem occurred in this article, am unable to see the given codes please go through this please.

  4. Junaid Tahir says:

    Hi Adrian,
    I have added the code on my website (running on blogger) but nothing worked. Please have a look and confirm if i am doing something wrong.

Speak Your Mind