Recent posts widget with thumbnails in blogger
Blogger Tricks
Recent posts widget with thumbnails in blogger
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>
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