• Add Smart Jquery Featured Slider to Blogger Blogspot/Own Websites


    1) Layout -> Edit HTML
    and mark the tick box "Expand Widget Templates"

    2) Now find (CTRL+F) this code in the template:
    </head>
    And immediately before it, paste this code:


    <script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
    <script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
    <script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>
    
    <script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
    wrap:"both",
    scroll:2,
    animation:"slow"
    });
    function mycarousel_initCallback(carousel) {
    jQuery('#featured-next-button').bind('click', function() {
    carousel.next();
    return false;
    });
    
    jQuery('#featured-prev-button').bind('click', function() {
    carousel.prev();
    return false;
    });
    jQuery('.button-nav span').bind('click', function() {
    carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
    return false;
    });
    };
    jQuery('#feature-carousel').jcarousel({
    wrap:"both",
    scroll:1,
    auto:10,
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null
    });
    
    });
    </script>
    
    <style type="text/css">
    .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
    
    .jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
    
    .jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
    .jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
    .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
    .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
    
    .jcarousel-skin-tango .jcarousel-next-horizontal {
    background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;
    cursor:pointer;
    height:254px;
    right:20px;
    position:absolute;
    top:0;
    width:46px;
    }
    
    .jcarousel-skin-tango .jcarousel-prev-horizontal {
    background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;
    cursor:pointer;
    height:254px;
    left:20px;
    position:absolute;
    top:0;
    width:46px;
    }
    
    .jcarousel-container {position: relative;}
    .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
    .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
    .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
    .jcarousel-next {z-index: 3;display: none;}
    .jcarousel-prev {z-index: 3;display: none;}
    
    #news-slider{background-color:#FFFFFF;padding:20px 0;}
    #news-slider img{border:none;height:254px;width:307px;}
    </style>
     
    Now click Save tempate.

    3) Go to Layout/
    Add a Gadget of HTML/JavaScript type.
    Then add this code in to it:.



    <div id='news-slider'>
    <ul class='jcarousel-skin-tango' id='mycarousel'>
    <li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
    <li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
    <li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
    <li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
    <li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
    </ul>
    </div>
     
    NOTE : Replace,

    SLIDE-X-LINK-HERE with your real featured posts links.

    0 comments:

    Post a Comment