jQuery Slideshow For Blogger

Posted by Zain Raza On 8 comments
Image slideshow Widget for Blogger blog. This widget is different from its previous versions with regard to speed, load time, navigation and control options. This widget is an extracted code from a WordPress template. The slider is coded such that it will appear on your homepage.



Now follow these steps:
    1. Go To Blogger > Design > Edit HTML
    2. Backup your template >Important<
    3. Search for </head>
    4. Just above it paste the jQuery code in this page -> Slider jQuery Code
    5. Then search for ]]></b:skin>
    6. Just above it paste the CSS code below,

    /*-------------------- jQuery Image Slider -------------*/
    .featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
    .fp-slides{}
    .fp-post{padding:13px;}
    .fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
    .fp-thumbnail:hover{border:3px solid #CAC9C9;width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
    .fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
    .fp-title a{color:#000;text-decoration:none;}
    .fp-title a:hover{color:#0080fF;text-decoration:none;}
    .fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
    .fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
    .fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
    .fp-nav{width:590px;padding:0px 10px;height:14px;}
    .fp-pager a{background-image:url();cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
    .fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
    .fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(http://2.bp.blogspot.com/-xrvnRlI02a8/TeDndJyHamI/AAAAAAAAHKA/VSA--b82v9w/s1600/featured-prev.png) top left no-repeat;}
    .fp-prev:hover{opacity:1;}
    .fp-prev:active{opacity:0.7;}
    .fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(http://1.bp.blogspot.com/-UzsUMLmRXT4/TeDnchM8AEI/AAAAAAAAHJw/pOOPL9dK6-g/s1600/featured-next.png;) top left no-repeat}
    .fp-next:hover{opacity:1;}
    .fp-next:active{opacity:0.7;}

              7.   Now Search for this, 
    <div id='main-wrapper'>
    Hint: This code is located near <div id='content-wrapper'>
    PS: In this part most of you will face problems as the coding for each template differ. If you could not find this code then do not panic and simply post your Blog URL in the comment box.
       8.   and just below it add the HTML code below,
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>

    <div class='featuredposts clearfix'>
    <div class='fp-slides'>
    <div class='fp-post'>
    <div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='ADD IMAGE-1 LINK HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> <p>WRITE POST DESCRIPTION HERE... </p>
    </div>
    <div class='fp-post'>
    <div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div>
    <h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
    </div>
    <div class='fp-post'>
    <div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK HERE'/></a></div>
    <h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
    </div>
    <div class='fp-post'>
    <div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK HERE'/></a></div>
    <h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
    </div>
    <div class='fp-post'>
    <div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div>
    <h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p>
    </div>
    </div>     
    <div class='fp-nav clearfix'>
    <span class='fp-pager'/>          
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </div>
        
    </div>

    </b:if></b:if>
    Make these changes:

    • Replace ADD POST URL-1, 2, 3, 4, 5 HERE with the URL of your post pages one by one. These URLs will be added twice for each slide. Once for the image and second time for the Post title.
    • Replace ADD IMAGE-5 LINK HERE with the Image link of the Featured post. By default all images have width:580pxheight:266px; You can edit the image size by editing the width and height in the CSS code shared in step#6. Make sure all your images must have same size
    • Replace WRITE POST TITLE HERE... with the title of your Post Page
    • Replace WRITE POST DESCRIPTION HERE with the Post Page description. You can write the first few lines of your post here and the readers can read the full post by clicking the title.
    • To Change the Overall size of the slider container then edit in step#6 the following two codes -> width:608px and height:400px
       9.   Save your template and you are done! Visit your blog.



    Related Articles:






    8 comments:

    EUNKYEONG LEE said...

    girlenchantedby.blogspot.kr

    I can't find <*div id='main-wrapper'> this :(
    Help me :D

    Siouxfire said...

    www.siouxfire.com

    Likewise, cannot find the <*div id='main-wrapper'>

    Zain Raza said...

    @EUNKYEONG LEE and @Siouxfire please try: <*div id="main_container">

    Siouxfire said...

    Thanks, but I can't find that in the HTML. I searched for just "div id" and didn't find anything like it.

    Zain Raza said...

    then you don't have this.. just copy all the html code and send it to my email id: zaineesyed@gmail.com ... i'll find the right oode inside your template.

    Alan Gamble said...
    This comment has been removed by the author.
    Ayoub S'kar said...

    www.skarsworld.com

    SAMPUL RAYA HAMEGA said...

    "<div
    Hai Zain Raza.. Thank for the tutorial.. but i could fine the code..

    can u teach me or help me to fix it..
    http://sampulrayacantik.blogspot.com

    Post a Comment