Wednesday, March 6, 2013

Animated Sliding Recent Post Widget For Blogger

One of my friend ask me sliding "Recent Post Widget For Blogger". I have searched for this in Google and I found some interesting codes for sliding recent post widget. Here I am sharing one of them, which I have also used in my blog.

In previous posts, I explained Calculate age using java scriptjQuery .toggleClass() example, jQuery Draggable Div Example in ASP.Net, jQuery Resizable Div Example in ASP.Net, Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example an other article related to jQuery and Java Script.



To implement the sliding recent post widget in your blog. You can go through the following steps-

  1. Go to Blogger > Open Layout Tab
  2. Now add a new HTML/Java Script widget.
    HTMl/Java Script Widget 
  3. Now add the following code shown below-
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css" media="screen">
    <!--
    #spylist {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:350px;
    }
    #spylist ul{
    width:265px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:250px;
    padding: 0;
    margin:3px;
    list-style-type:none;
    float:none;
    min-height:75px;
    height:auto;
    overflow: hidden;
    background-color:#EEE9DD;
    border:1px solid #ddd;
    }
    #spylist li a {
    text-decoration:none;
    color:#993200;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0;
    padding:0px 0px 2px 0px;
    }
    #spylist li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .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;
    }
    -->
    </style>
    <script language='JavaScript'>
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
    imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
    imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
    imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
    imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78ap_t0HgHDYxhVdOYrkep9yM9YM-qI4woi_OJ6trs0HVfhyphenhyphenNc2-s8iZMbtrqf5BRZ_TZBjY39OPDq9jnulEm00ACPICkUQO8zvDvcdO8XlsHF9lScAtLSC33jOQi1CEGHp2c_VgN-Ps2/s1600/No+Image+1.gif";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 70;
    thumbheight = 70;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comment";
    showPostDate = true;
    summaryPost = 35;
    summaryFontsize = 9;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 25;
    home_page = "http://manish4dotnet.blogspot.com/";
    limitspy=4
    intervalspy=4000
    </script>
    <div id="spylist">
    <script src='https://dl.dropboxusercontent.com/s/yl10ewf1b6ds4ju/recentpost.js' type='text/javascript'></script>
    </div>
That's It. You can change the CSS of the above code according to your blog theme.
Happy blogging!!

7 comments:

  1. Thanks a ton. I really greatful for the quick update you have provided. Let me adopt and share the feedback on the widget.

    ReplyDelete
  2. Manish,
    Once again thanks for sharing the tip. But i have a problem with the code. It is showing the related posts of your site instead of mine. How to overcome from this?

    ReplyDelete
  3. In the code there is a line-
    home_page = "http://manish4dotnet.blogspot.com/";

    just replace the URL with your blog's URL.

    ReplyDelete
  4. Wonderful. I really liked it. I added into my blog. Though i have not done the background matching.You are a genius man. I hope you write a lot on Javascript. Please prepare some wonderful templates. That will be a really cool.

    ReplyDelete

^ Scroll to Top