• How To Add Featured Content Slider for Blogger Blogspot


    Installation.

    See Demo 

    1. First you go to Dashboard > Layout > Edit HTML. Download template for backup. Add copy paste following code just ABOVE ]]></b:skin>


    #jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
    #myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
    #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; }

    2. Add copy paste following code ABOVE </head>

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

    Save your template.

    3. Finally go to Page Elements > Add a Gadget > HTML/JAVA Script. And add copy paste following code to it.

    <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">
    <span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
    <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">
    <span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
    <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">
    <span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
    <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>

    It's Easy. Try It Back.
    See Demo

    0 comments:

    Post a Comment