• How to add beautiful Scrolling Recent Posts Widget For Blogger




    This tutorial will show you how to add beautiful Scrolling Recent Posts Widget For Blogger.to add this recent post widget to your blogger you First backup your template and follow these simple steps..


    FRIST PART
    1. Go to Blogger Dashboard > Template
    2. Click on Edit HTML
    3. Hit Proceed button
    4. Find below code in your template
    </head>

    And add the below code just ABOVE/BEFORE it

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

    and save template


    SECOND PART
    1. Go to Blogger Dashboard > Layout
    2. Click on Add a Gadget
    3. Select HTML/JavaScript
    4. and put following below script in it

    <style type="text/css" media="screen">
    <!--

    /* ========== Scrolling Recent Posts Widget By 1vikash.blogspot.com ======== */

    #helperblogger-widget {
        overflow: hidden;
        margin-top: 5px;
        padding: 0px 0px;
        height: 385px;
    }

    #helperblogger-widget ul {
        width: 295px;
        overflow: hidden;
        list-style-type: none;
        padding: 0px 0px;
        margin: 0px 0px;
    }

    #helperblogger-widget li {
        width: 282px;
        padding: 5px 5px;
        margin: 0px 0px 5px 0px;
        list-style-type: none;
        float: none;
        height: 80px;
        overflow: hidden;
        background: #fff url(https://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/s1600/helperblogger.com-post.jpg) repeat-x;
        border: 1px solid #ddd;
    }

    #helperblogger-widget li a {
        text-decoration: none;
        color: #4B545B;
        font-size: 15px;
        height: 18px;
        overflow: hidden;
        margin: 0px 0px;
        padding: 0px 0px 2px 0px;
    }

    #helperblogger-widget img {
        float: left;
        margin-top: 10px;
        margin-right: 15px;
        background: #EFEFEF;
        border: 0;
    }

    #helperblogger-widget img {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        padding: 4px;
        background: #eee;
        background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
        background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
        -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
        box-shadow: 0 0 3px rgba(0,0,0,.7);
    }

    #helperblogger-widget img:hover {
        -moz-transform: scale(1.2) rotate(-350deg);
        -webkit-transform: scale(1.2) rotate(-350deg);
        -o-transform: scale(1.2) rotate(-350deg);
        -ms-transform: scale(1.2) rotate(-350deg);
        transform: scale(1.2) rotate(-350deg);
        -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
        -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
        box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    }

    .spydate {
        overflow: hidden;
        font-size: 10px;
        color: #0284C2;
        padding: 2px 0px;
        margin: 1px 0px 0px 0px;
        height: 15px;
        font-family: Tahoma,Arial,verdana, sans-serif;
    }

    .spycomment {
        overflow: hidden;
        font-family: Tahoma,Arial,verdana, sans-serif;
        font-size: 10px;
        color: #262B2F;
        padding: 0px 0px;
        margin: 0px 0px;
    }

    /* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

    -->
    </style>

    <script language='JavaScript'>
    imgr = new Array();
    imgr[0] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
    imgr[1] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
    imgr[2] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
    imgr[3] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
    imgr[4] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 50;
    thumbheight = 50;
    fntsize = 15;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = true;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;
    home_page = "http://1vikash.blogspot.com/";
    limitspy=4;
    intervalspy=4000;
    </script>

    <div id="helperblogger-widget">
    <script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
    </div>

    Place the wedget where you want and Save

    NOTE:-Replace http://1vikash.blogspot.com/ with your URL

    YOU CAN ALSO CUSTOMIZE THE CODE ACCORDING TO YOUR NEED
    1. numposts = 10; Total number of posts which you wants to scroll by this widget
    2. limitspy=4; Number of the posts to appear on the widget
    3. intervalspy=4000; Scrolling speed of the widget,if you decreased the value speed of widget will increases.

    Like this Post ??? Then Pls Support Me LIKE ME ON FACEBOOK OR Follow my Blog :-)

    THE END
    Comments
    0 Comments

    No comments:

    Post a Comment

    Thanks For writing a comment on my blog.

    ဒိမွာ member လုပ္ရင္ Join this Site ကုိနွိက္ၿပိး Email ႏွင့္ယင္ပါ