• Admin
  • Receive an Update

    You are Here in » » Recent Posts Widget with Thumbnails for Blogger/Blogspot





    Recent Posts Widget with Thumbnails for Blogger/Blogspot






    A few days ago, I posted a tutorial on How to Add a Simple Recent Posts Widget that shows a list with the most recent posts if you would prefer a more minimalist look. In this post, you will see a different way of displaying the Recent Posts on Blogger - this is specially for those who want to show more info like the recent posts excerpt / summary and the posts thumbnails.

    To add this gadget is very easy, just follow these steps below:

    recent posts, blogger widgets

    How to Add the Recent Posts Widget to Blogger

    Step 1. From your Blogger Dashboard, go to Layout > click on Add a Gadget link


    Step 2. From the pop-up window, scroll down and choose HTML/JavaScript


    Step 3. Inside the empty box, add the following code:
    <div class="eggTray">
    <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
    "pipe_params":{"URL":"YOUR-BLOG/feeds/posts/default"},
    "hideHeader":"false","height":"500","count": 8 }</script>
    <noscript>Your browser does not support JavaScript!</noscript></div>
    <style type=text/css>
    .eggTray {margin:10px 0px;padding:0px;}
    .ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
    .pipesTitle {padding-top:0px;}
    .pipesDescription {display:true;}
    .ycdr, .ycdr a {color:#999999;}
    .widget .popular-posts ul {padding-left:0;}
    </style>
    Note: 
    - Replace YOUR-BLOG with the url of your site/blog (ex: http://helplogger.blogspot.com) and pay attention to have no forward slash symbol "/" at the end of the url
    - To disable the scroll bar, remove the number 500
    - By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts that you want to appear
    - if you want only the posts titles, change true to none and "0" from padding-top:0px with 10

    Step 4. Save your widget. And you're done!




    More Articles

    ADSENSE SCRIPT HERE

    Make use of Smilleys Codes

    Contact

    Oyo, Nigeria.

    08053151099

    azeezte[email protected]

    Mondays to Saturdays 09:00 - 18:00 (GMT +01:00)

    About

    Azeeztech is a Nigerian-based Tech. support platform where anybody can get free solutions to device issues & questions.

    Azeeztech

    Get notified on FB