• How To Add jQuery Featured Content Slider in Blogger(Blogspot )


    This Simple version of Content Slider uses divs tags, which slide whole div frames containing both text and images at same time. This creates a nice sliding effect with one article per slide.
    You can view the DEMO of this content slider before proceeding for installation steps.
    I simplified the complex instructions written with the original slider’s source for all blogger.com users.

    Add some CSS and JavaScripts in Template

    1) Go to your Layout > Edit HTML and click “Download full template” to download template’s backup (recommended)
    2) In your template, find ]]></b:skin> and just ABOVE it, paste this code:

    #jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
    #myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }
    #myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
    .slide-wrapper { padding: 5px; }
    .slide-thumbnail { width:300px; float:left; }
    .slide-thumbnail img {max-width:300px; }
    .slide-details { width:290px; float:right; margin-left:10px;}
    .slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
    .slide-details .description { margin-top:10px; }
    .jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
    .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }




    3) Now find </head> and just ABOVE it, paste this code:

    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://sites.google.com/site/tipsotrickscom/jquery/jquery.flow.1.2.auto.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#myController").jFlow({
    slides: "#slides",
    controller: ".jFlowControl", // must be class, use . sign
    slideWrapper : "#jFlowSlide", // must be id, use # sign
    selectedWrapper: "jFlowSelected", // just pure text, no sign
    auto: true, //auto change slide, default true
    width: "610px",
    height: "235px",
    duration: 400,
    prev: ".jFlowPrev", // must be class, use . sign
    next: ".jFlowNext" // must be class, use . sign
    });
    });
    </script>


    Add the Widget and it’s contents

    4. This part is the easiest. Go to Layout > Page Elements and click “Add a Gadget” wherever you want to put the slider. (usually just below navigation menu).
    5. Choose “HTML/JavaScript” from the gadgets list and paste the code below in the content area.

    <div class="jflow-content-slider">
    <div id="slides">
    <!-- Slide #1 Starts-->
    <div class="slide-wrapper">
    <div class="slide-thumbnail">
    <img alt="" src="IMAGE-LINK"/>
    </div>
    <div class="slide-details">
    TITLE-OF-THE-SLIDE
    <div class="description">
    TEXT-OF-THE-SLIDE
    </div>
    </div>
    <div class="clear"></div>
    </div>
    <!-- Slide # 1 Ends -->
    <!-- Slide #2 Starts-->
    <div class="slide-wrapper">
    <div class="slide-thumbnail">
    <img alt="" src="IMAGE-LINK"/>
    </div>
    <div class="slide-details">
    TITLE-OF-THE-SLIDE
    <div class="description">
    TEXT-OF-THE-SLIDE
    </div>
    </div>
    <div class="clear"></div>
    </div>
    <!-- Slide # 2 Ends -->
    <!-- Slide #3 Starts-->
    <div class="slide-wrapper">
    <div class="slide-thumbnail">
    <img alt="" src="IMAGE-LINK"/>
    </div>
    <div class="slide-details">
    TITLE-OF-THE-SLIDE
    <div class="description">
    TEXT-OF-THE-SLIDE
    </div>
    </div>
    <div class="clear"></div>
    </div>
    <!-- Slide # 3 Ends -->
    .
    .
    .
    .
    <!-- You can add as many slides as you want above this line -->
    </div>

    <div id="myController">
    <span class="jFlowPrev">Prev</span>
    <span class="jFlowControl">1</span>
    <span class="jFlowControl">2</span>
    <span class="jFlowControl">3</span>

    <!-- Increase these numbers as with the increase in your number of slides above -->
    <span class="jFlowNext">Next</span>
    </div>
    <div class="clear"></div>
    </div>





    In this content slider everything resides in the widget’s div tags.
    (In code of Step 4) Just replace “IMAGE-TITLE“, “TITLE-OF-THE-SLIDE“, “TEXT-OF-THE-SLIDE” with your image, title and text respectively.



    You can increase the number of slides according to your need and available space.

    If you increase the number of slides, then don’t forget to increase “jFlowControl” numbering.
    For example if you add another (fourth) slide then you have to add <span class=”jFlowControl”>4</span> in order to show number “4″ on the main widget.

    So if you have like 15 slides, then make sure you have <span class=”jFlowControl”>15</span> (upto 15).

    (In code of Step 3) Links given in blue are links to 2 JavaScripts that this slider requires. If you have your own server you should download the scripts and upload them on your server for speedy loading.

    DEMO 

     



     




    2 comments:

    1. This comment has been removed by the author.

      ReplyDelete
    2. great work. Thanks for providing the info

      ReplyDelete