Header Ads

  • Breaking News

    How to Add Image Slider Widget For Blogger




    Let's Add Image Slider in Blogger Post. You can easily add image slider in your blog post just follow some steps to add Image Slider.

    1) Go to Layout then Click on Add A Gadget  Select HTML/JavaScript 


    2) Copy and paste below code.

    <style type="text/css">
    /* http://dimpost.com */
    #sliderFrame {position:left;width:500px;margin: 0 auto 40px;}
        
    #slider {
        width:500px;height:206px;/* Make it the same size as your images */
     background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
     position:relative;
     margin:0 auto;/*make the image slider center-aligned */
        box-shadow: 0px 1px 5px #999999;
    }
    #slider img {
     position:absolute;
     border:none;
     display:none;
    }
    /* the link style (if an image is wrapped in a link) */
    #slider a.imgLink {
     z-index:2;
     display:none;position:absolute;
     top:0px;left:0px;border:0;padding:0;margin:0;
     width:100%;height:100%;
    }
    /* Caption styles */
    div.mc-caption-bg, div.mc-caption-bg2 {
     position:absolute;
     width:100%;
     height:auto;
     padding:0;
     left:0px;
     bottom:15px;
     z-index:3;
     overflow:hidden;
     font-size: 0;
    }
    div.mc-caption-bg {
     background-color:black;
    }
    div.mc-caption {
     font: bold 14px/20px Arial;
     color:#EEE;
     z-index:4;
     padding:10px 0;
     text-align:center;
    }
    div.mc-caption a {
     color:#FB0;
    }
    div.mc-caption a:hover {
     color:#DA0;
    }
    
    /* ------ built-in navigation bullets wrapper ------*/
    div.navBulletsWrapper  {
     top:320px; left:280px; /* Its position is relative to the #slider */
     width:150px;
     background:none;
     padding-left:20px;
     position:relative;
     z-index:5;
     cursor:pointer;
    }
    /* each bullet */
    div.navBulletsWrapper div
    {
        width:11px; height:11px;
        background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
        float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
        margin-right:11px;/* distance between each bullet*/
        _position:relative;/*IE6 hack*/
    }
    div.navBulletsWrapper div.active {background-position:0 -11px;}
    
    /* --------- Others ------- */
    #slider
    {
     transform: translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
    }
    </style>
    <script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
    <br />
    <div id="sliderFrame">
    <div id="slider">
    <a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"><img alt="#htmlcaption" src="http://2.bp.blogspot.com/-lSWlPRHuZEM/VP-D_mcYzeI/AAAAAAAAucQ/LTCDOqUMHnQ/s1600/image-slider-2%5B1%5D.jpg" height="214" title="" width="500" /></a>
    <a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"><img alt="Go UP!" src="http://3.bp.blogspot.com/-fwGRH_2Af4E/VP-D8siDXSI/AAAAAAAAucI/D_ALlzatCJY/s1600/image-slider-1%5B1%5D.jpg" height="214" width="500" /></a>
    <a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"><img alt="Pure Javascript. No jQuery. No flash." src="http://2.bp.blogspot.com/-EMtVM-md9cM/VP-EEjBgANI/AAAAAAAAucg/C1mHsEgJtAI/s1600/image-slider-4%5B1%5D.jpg" height="214" width="500" /></a>
    <a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"><img alt="#htmlcaption2" src="http://4.bp.blogspot.com/-5E2_eAn5Kws/VP-ECMbNvNI/AAAAAAAAucY/XG5I1-yxM4c/s1600/image-slider-3%5B1%5D.jpg" height="214" width="500" /></a>
    <a href="https://www.blogger.com/blogger.g?blogID=8043272874101352470#"><img alt="Stay Connected" src="http://4.bp.blogspot.com/-mTefDxJoFgQ/VP-EHPwp8EI/AAAAAAAAuco/-BXhd_rxPYU/s1600/image-slider-5%5B1%5D.jpg" height="214" width="500" /></a>
    </div>
    <div id="htmlcaption1" style="display: none;">
    Code by <a href="http://bitly.com/Btemplates" target="_blank">Micro</a>
    </div>
    <div id="htmlcaption2" style="display: none;">
    <a href="http://bitly.com/Btemplates" rel="dofollow" target="_blank" title="Image Slider Widget"><img alt="Image Slider Widget" border="0" src="http://img1.blogblog.com/img/blank.gif" style="bottom: 10%; position: fixed; right: 0%;" /></a></div>
    </div>
    









    No comments

    Post Top Ad

    Post Bottom Ad