• How To Add Easiest jQuery Featured Content Slider for Blogger Blogspot


    Adding some CSS and JavaScripts in Template 

    Live DEMO.

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

    <!--Anything Slider CSS Starts -->
    /*
    anythingSlider v1.0
    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
    */
    { margin: 0; padding: 0; }
    .anythingSlider { width: 740px; height: 260px; position: relative; margin: 0 -20px 0px; }
    .anythingSlider .wrapper { width: 660px; overflow: auto; height: 241px; margin: 0 40px; position: absolute; }
    .anythingSlider .wrapper ul { width: 99999px; list-style: none; position: absolute; top: 0; left: 0; background: #f4f4f4; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; }
    .anythingSlider ul li { float: left; padding: 10px 10px ; height: 317px; width: 660px; margin: 0; }
    .anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(http://3.bp.blogspot.com/_L3S3cG5x4ys/SyLAydSxA7I/AAAAAAAABK8/Or2L74HqhdM/s400/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 35px; cursor: pointer; }
    .anythingSlider .forward { background-position: 0 0; right: -20px; }
    .anythingSlider .back { background-position: -67px 0; left: -20px; }
    .anythingSlider .forward:hover { background-position: 0 -200px; }
    .anythingSlider .back:hover { background-position: -67px -200px; }
    #thumbNav { margin: 0 40px; width: 660px; border-top: 3px solid #e0a213; position: relative; top: 240px; text-align: center; }
    #thumbNav a { color: black; font: 11px/18px Trebuchet MS, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(http://1.bp.blogspot.com/_L3S3cG5x4ys/SyLAx9khT3I/AAAAAAAABK0/GeKJRxZIkgM/s400/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
    #thumbNav a:hover { background-image: none; }
    #thumbNav a.cur { background: #e0a213; }
    #start-stop { background: green; background-image: url(http://1.bp.blogspot.com/_L3S3cG5x4ys/SyLAx9khT3I/AAAAAAAABK0/GeKJRxZIkgM/s400/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 242px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
    #start-stop.playing { background-color: red; }
    #start-stop:hover { background-image: none; }
    <!-- Anything Slider CSS Ends -->



    3) Now find </head>, and just ABOVE it, paste these lines:



    <script type='text/javascript'>
    function formatText(index, panel) {
    return index &quot;&quot;;
    }
    $(function () {
    $(&#39;.anythingSlider&#39;).anythingSlider({
    easing: &quot;easeInOutExpo&quot;, // Anything other than &quot;linear&quot; or &quot;swing&quot; requires the easing plugin
    autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
    delay: 3000, // How long between slide transitions in AutoPlay mode
    startStopped: false, // If autoPlay is on, this can force it to start stopped
    animationTime: 600, // How long the slide transition takes
    hashTags: true, // Should links change the hashtag in the URL?
    buildNavigation: true, // If true, builds and list of anchor links to link to each slide
    pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
    startText: &quot;Auto-Slide&quot;, // Start text
    stopText: &quot;Stop&quot;, // Stop text
    navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
    });
    $(&quot;#slide-jump&quot;).click(function(){
    $(&#39;.anythingSlider&#39;).anythingSlider(6);
    });
    });
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
    <script src='http://sites.google.com/site/tipsotrickscom/home/tests/jquery.easing.1.2.js' type='text/javascript'/>
    <script charset='utf-8' src='http://sites.google.com/site/tipsotrickscom/home/tests/jquery.anythingslider.js' type='text/javascript'/>

    Adding 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="anythingSlider">
    <div class="wrapper">
    <ul>
    <li>Slide # 1 Content here...</li>
    <li>Slide # 2 Content here...</li>
    <li>Slide # 3 Content here...</li>
    </ul>
    </div>
    </div>



    All your content goes in between those <li> and </li> tags.
    You can add many <li> </li> tags as you want.
    6) Save it the gadget and preview your Blog.

    It Easy.Try It Back.View Live DEMO.






    2 comments:

    1. A am confused and have a problem where to add what! Your post is not clear.

      ReplyDelete
    2. Hi!

      Thanks for the turorial! However, I have followed step by step your instructions, and the images and videos linked are displayed one under the other. Any idea on why is that happening?

      Thanks!

      ReplyDelete