Saturday, April 9, 2011

Recent posts widget with thumbnails in blogger

                                    Blogger Tricks

  Recent posts widget with thumbnails in blogger



Here is the JavaScript code for recent posts widget with thumbnails in blogger. Many blogspot users want to display their recent posts in their blog with a beautiful thumbnail as it looks good to the visitors. Have a look at the preview of this widget at the right side of the post.
This widget is very flexible where you can change the number of posts, thumbnail photo size, widget width, font size, color of the post heading and more..  This is the simple widget for blogger and easy to install.


  • Sign into your Blogger dashboard
  • Go to Settings > Site Feed > Allow Blog Feeds > select Full and save
  • Go to Layout > Add a gadget > HTML/JavaScript
  • Now Go to BELOW JavaScript CODESelect all text copy and paste in new notpad in your computer
  • JavaScript Code:

    <script language="JavaScript">
    
    imgr = new Array();
    
    
    imgr[0] = "http://Add the Uploaded image URL";
    
    imgr[1] = "http://"Add the image URL;
    
    imgr[2] = "http://Add the image URl";
    
    imgr[3] = "http://Add the Image URL";
    
    imgr[4] = "http://Add the image url";
    showRandomImg = true;
    
    boxwidth = 160;
    
    cellspacing = 8;
    
    borderColor = "#000000";
    
    bgTD = "#000000";
    
    thumbwidth = 40;
    
    thumbheight = 40;
    
    fntsize = 12;
    
    acolor = "#ffffff";
    
    aBold = true;
    
    icon = " ";
    
    text = "comments";
    
    showPostDate = false;
    
    summaryPost = 40;
    
    summaryFontsize = 10;
    
    summaryColor = "#666";
    
    icon2 = " ";
    
    numposts = 5;
    
    home_page = "http://yourblog.blogspot.com/";
    
    </script>
    
    <script src="http://digitalgupshup.110mb.com/DigitalGupshup-blogger-thumbnail-widget.js" type="text/javascript"></script>
     
 Note Also Add the Uploaded image url of  the custom image u created. and Paste in 
 imgr[0] = "http://Add the Uploaded image URL"
 
eg:   imgr[0] = "http://i43.tinypic.com/orpg0m.jpg ";


Abbreviation list in the JavaScript Page (Change as per your requirement, or you can leave it as it default, but change the home_page compulsary):-
boxwidth= Width of the widget
cellspacing = Space between cells (Dont change this, default will be good)
borderColor = Border color of the widget
thumbwidth= Width of the image thumbnail
thumbheight = Height of the image thumbnail
fntsize = Font size of the post title
acolor = Color of the post title
aBold = if you want bold titles true otherwise false
numposts = Number of posts you want to display in widget
home_page = Remove http://yourblog.blogspot.com/ and write your blog address
  • Edit as per your requirement in notepad, then Copy Paste the whole code into HTML/JavaScript window and save it, That’s all..


0 comments:

Post a Comment

Breaking News
Loading...
Quick Message
Press Esc to close
Copyright © 2013 Crack o Hack & tweak STORE All Right Reserved