Stylish Scrolling Recent Posts widget for blogger/blogspot

Playing with tricks and finding tips online to execute on blogger blogs know as bloggertricks or bloggertips. Another exclusive “Scrolling Recent posts widget” brought to you by BlogTariff in association with our partner site Omlitech. This widget is actually developed on the base of jQuery scroll effect, on adding this widget to any blogging platforms can easily attract more visitors. When readers/visitors mouse over on this recent post widget scrolls and entertain them certainly.
Each fragment contains post title, thumbnail (Scrolling), post date, comments published on blog. Easily customizable widget enables you to add without any work hard.
We already discussed about numerous widgets adding for blogger platform also wordpress platform in way of easy methods of execution.

Live Demo

You may also like Related posts

• Versatile Social Sharing buttons widget
• Breadcrumb Navigation Widget
• Scrolling images with jQuery effect Widget
• Popout Floating and Sliding Adsense Widget
• Multi Tabbed Editable Widget
• Vertical Social Bookmarking Widget
• Slide out Open Heart Social Bookmarking Widget

How to install Scrolling Recent posts widget for blogger?

BTF Method 1:
Sign into your blogger account
Click on “EDIT HTML” link tab
Search for code

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

On the source of jQuery spy effect this works if you already have the above code on your blog just ignore it, other wise add this as follows.
Search for code

</head>

After finding the code copy the below code and past above to it

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

Now, “Save the Template”
BTF Method 2:
Click on “Design (Layout in the new blogger interface) Page elements”
Click on “Add a Gadget” link
Select “HTML/JavaScript” widget
Now copy the below code and paste in it

<style type="text/css" media="screen">
 <!--
    /* Scrolling Recent Posts Widget By blogtariff.com */

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

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

    #blogtariff-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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU3FBK6z-a9b7EOVnf06zRSSh1OQTkQPouxpXcFun1WIj1WAoibxeLN25Q9Co2rKSlbJi3Y480V-a0o7SOrlg8swiNjaJRKL-3BxinvUEir8DETCBUvPp8g3rX0usY9rUmJVXCu94DVJvK/s254/blogtariff.com-post.jpg) repeat-x;
        border: 1px solid #ddd;
    }

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

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

    #blogtariff-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);
    }

    #blogtariff-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 blogtariff.com */

    -->
    </style>

    <script language='JavaScript'>
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVckZTnVng0BdpEGx-WacaFgWHuXwQM7IC816af3mk5Ik_R4VzbImVfKPmdfEBFp0Lb2vVtpwdDQUbtgu4rl1de_BvL2J3Uyg5y-22kC6iJXQ0TaCJQbr4JlfrzUbYc9FUaEE90kmsFUM/s1600/no-thumbnail.png";
    imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVckZTnVng0BdpEGx-WacaFgWHuXwQM7IC816af3mk5Ik_R4VzbImVfKPmdfEBFp0Lb2vVtpwdDQUbtgu4rl1de_BvL2J3Uyg5y-22kC6iJXQ0TaCJQbr4JlfrzUbYc9FUaEE90kmsFUM/s1600/no-thumbnail.png";
    imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVckZTnVng0BdpEGx-WacaFgWHuXwQM7IC816af3mk5Ik_R4VzbImVfKPmdfEBFp0Lb2vVtpwdDQUbtgu4rl1de_BvL2J3Uyg5y-22kC6iJXQ0TaCJQbr4JlfrzUbYc9FUaEE90kmsFUM/s1600/no-thumbnail.png";
    imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVckZTnVng0BdpEGx-WacaFgWHuXwQM7IC816af3mk5Ik_R4VzbImVfKPmdfEBFp0Lb2vVtpwdDQUbtgu4rl1de_BvL2J3Uyg5y-22kC6iJXQ0TaCJQbr4JlfrzUbYc9FUaEE90kmsFUM/s1600/no-thumbnail.png";
    imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVckZTnVng0BdpEGx-WacaFgWHuXwQM7IC816af3mk5Ik_R4VzbImVfKPmdfEBFp0Lb2vVtpwdDQUbtgu4rl1de_BvL2J3Uyg5y-22kC6iJXQ0TaCJQbr4JlfrzUbYc9FUaEE90kmsFUM/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://www.blogtariff.com/";
    limitspy=4;
    intervalspy=4000;
    </script>

    <div id="blogtariff-widget">
    <script src='http://blogtariff.googlecode.com/files/recent-posts-spy.js '

    type='text/javascript'></script>
    </div><a href="http://www.blogtariff.com">Get This widget</a>

BTF code Customization

With simple replacing words as highlighted in the above code.

• The above modifications are as per requirement for your blog and few are mandatory to alter.
• According to your needs replace “numposts = 10;” number of posts to scroll with your value
• This is mandatory to replace URL “home_page = "http://www.blogtariff.com/";” with your blog/website URL
• According to your needs replace “limitspy=4;” with number of posts to display on widget
• According to your needs replace the Scrolling speed value “intervalspy=4000;” with your value.
• After successful customization and necessary alteration now, “Save the widget” and preview your experiment on your blog.

Appreciation:

If you enjoyed this article and we helped favor us on Subscribing to US and Like us on Facebook page.