random
1

Add Fully Automated Slider Widget For Blogger Blog Sidebar

So today I am presenting a new stylish blogger blog widget which I personally like. This blogger widget is somewhat like the previous Featured And Recent Post widget I have posted but totally different in functioning. You can add this slider widget to your Sidebar of blogger blog. Here is how! 

Shouted Blog's Gift...!
Random Posts Widget In Blogger Blog For Increasing Pageviews

Add Fully Automated Slider Widget For Blogger Blog Sidebar

  1. First Off, Go To Your Blogger Dashboard.
  2. Choose "Layout' Section From Your Blogger Dashboard.
  3. Select "Add Gadget".
    Add Fully Automated Slider Widget For Blogger Blog Sidebar
    Add Fully Automated Slider Widget For Blogger Blog Sidebar
  4. New Window Would Be Open.
  5. Just Select HTML/JavaScript.
  6. Now Copy the Below Code And Paste In To It.
    <style scoped="" type="text/css">
    /*
    Pakblogz.blogspot.com with lot of hardwork please keep the comment intact
    */
    ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
    ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
    ul.abt-sidebar-slider{width:100%;height:500px}
    ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
    ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
    ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
    ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
    ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
    ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
    ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
    ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider 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}
    ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
    ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
    ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
    ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
    ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
    ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
    ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
    ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
    .buttons{margin:5px 0 0}
    .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 #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
    .buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
    </style>
    <div id="featuredpostside"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://files.allbloggertricks.com/Scripts/abt-sidebar-slider.js" type="text/javascript"></script>
    <script type='text/javascript'>
    //<![CDATA[
    FeaturedPostSide({
    blogURL:"http://www.pakblogz.blogspot.com",
    MaxPost:8,
    idcontaint:"#featuredpostside",
    ImageSize:300,
    interval:5000,
    autoplay:true,
    tagName:false
    });
    //]]>
    </script>
Go To Your Blog Live And See The Slider Widget.

Customization

Don't Forget to Replace Yellow Highlighted Color With Your Blog Address.
Add Fully Automated Slider Widget For Blogger Blog Sidebar Reviewed by Ghulam Haider on 23:25:00 Rating: 5

No comments:

All Rights Reserved by Shouted Blog © 2014 - 2015
Designed by Ghulam Haider

Contact Form

Name

Email *

Message *

Powered by Blogger.