Welcome visitor! Please wait till I load my blog page...

.......

Recent Posts Widget for Blogger (blogspot) blog


Many Bloggers use a Feed widget to display links to recent blog posts. However, when using this widget, we are limited to display only 5 items or less.So I have created a widget which allows you to display more than 5 recent posts. You can customize the title and choose how many posts you would like to display, then install directly to your blog at the click of a button!To install your own recent Post widget in your Blogger layout, simply follow these steps:


  • 17+ Featured Content Slider for Blogger Using jQuery Tutorial




  • Recent Posts Widget with post snippets 



    So, let's see how to install this cool widget in your blog..

    STEP #1
    Log in to Blogger, go to Design ->





    Add a Gadget of HTML/JavaScript type.




    <div id="24work">
    <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script style="text/javascript" src="http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/recent_posts_widget_with_snippets.js"></script>

    <script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script>

    <script src="http://24works.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

    <div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://24work.blogspot.com/2011/12/recrecent-posts-widget-for-blogger.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://24work.blogspot.com" title="Recent Posts Widget">Blogger Widgets</a></div><noscript>Your browser does not support JavaScript!</noscript>

    <style type=text/css>

    #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7pVeJw_YtM67y-bq6IrhodkFFboJDjoU5bzKmZIiRTRqe1KIbEXBhk5RzJD3L9KQPG_jstMervIQRUmi9Dy7M6FL1C-KSb5iT8nLlgV-oeGBs8e2CSd_1vYLYafgBbHVQ0fRZZMzAJAL/s300/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}



    #rpdr, #rpdr a {color:#808080;}

    #mtrpwa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}

    .mtrpw a {font-weight:bold; }

    .mtrpwsumm {}

    </style></div>



    Now Click Save

















    Recent Posts Widget with post titles only 



    So, let's see how to install this cool widget in your blog..

    1. Sign into Blogger dashboard

    2. Go to Design » Add a gadget » html/javascript

    3. Just copy and paste this code..

    <div id="24work">

    <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script style="text/javascript" src="http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/recent_posts_widget_post_titles.js"></script>

    <script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>

    <script src="http://24works.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>

    <div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://24work.blogspot.com/2011/12/recrecent-posts-widget-for-blogger.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://24work.blogspot.com" title="Recent Posts Widget">Blogger Widgets</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>

    <style type=text/css>

    #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7pVeJw_YtM67y-bq6IrhodkFFboJDjoU5bzKmZIiRTRqe1KIbEXBhk5RzJD3L9KQPG_jstMervIQRUmi9Dy7M6FL1C-KSb5iT8nLlgV-oeGBs8e2CSd_1vYLYafgBbHVQ0fRZZMzAJAL/s300/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}

    #rpdr, #rpdr a {color:#808080;}

    #mtrpwb { }

    .bbrecpost2 {

    padding-top:6px;

    padding-bottom:6px;

    border-bottom: 1px #cccccc dotted; }

    </style>



    Now Click Save









    There are many variables in this script that you need to adjust to blend the widget’s look with that of your blog template. Most of them are self explanatory.

    1.In the code, look for the line…


    http://24works.blogspot.com/feeds/posts/default

    and replace the blog address with your own blog address



    2.How to change the number of posts


    By default, this widget is set to display a maximum of 5 recent posts. To change this number,

    var numposts = 5

    edit line in the code and replace the number 5 with the number of posts desired:


    3.How to change the Number of Characters (Excerpt)

    This widget is set to display an excerpt of 100 characters of each post. If you want to change that number, just look for the number 100 in the code and replace it with the number of characters you want to be displayed.
    Recommended setting: 50 to 100.

    var numchars = 100;



    4.How to Show Post Date

    If you want to show the post date, look for the line with the word showpostdate in the code. Then change its value from false to true (shown in color red below).

    var showpostdate = false;



    Happy Blogging! =)

















    UPDATE:  I updated some of my posts, this post I update Recent Posts Widget for Blogger / Blogspot with Summary And Read More........














    3 comments:

    1. nice info :D...

      visit blog dofollow here..
      http://www.rajacolek.co.cc
      http://www.cara2.co.cc
      thankss

      ReplyDelete
    2. Thanks a lot for ur great strategies.Definitely it works.
      web design company

      ReplyDelete
    3. A good widget to keep ....
      Visit my blog on hacking http:hackersmeet.blogspot.com

      ReplyDelete