STEPS
How to add a Recent Posts with thumbnails gadget to Blogger:1. Go to your Blogger Dashboard > Design > Page Element > Add a Gadget > HTML/JavaScript
2. Copy the code below and paste it into the Html/Javascript box:
With snippet
Use this code if you want post snippets (excerpts) to show under post titles.
<div class="eggTray"><script src="https://sites.google.com/site/projectdigitaltomato/blogger/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list","pipe_params":{"URL":"http://YourOwnB1og.blogspot.com/feeds/posts/default"},"hideHeader":"false","height":"500","count": 8 }</script><div style="font-family: arial, sans-serif; font-size: 9px;"class="ycdr"><a href="http://www.madtomatoe.com/recent-posts-widget-with-thumbnails-for-blogger/"target="_blank"title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://www.madtomatoe.com/"target="_blank">Blogger Widget</a></div><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;}.ycdr {background:transparent url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQYLBhw5HLyYhmjex6FpwOr52Xxajp4y40b2AuuRieVE29Mf-OBXyO48yy6tJYiJjjnv65yPfCQxuPZZL7pWP8hEq6pH0LTYzYiw9eLLUlge7Kna95EX1vv_fGtkApxmU-4JcvS0iYax5/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}.ycdr, .ycdr a {color:#999999;}.widget .popular-posts ul {padding-left:0;}</style>
3. In the code, look for the line…No snippet
Use this code if you don’t want post snippets to show. Only thumbnails and titles will show.
{“URL”:”http://YourOwnB1og.blogspot.com/feeds/comments/default……and replace the blog address with your own blog address
For custom domains, add your blog address like this…
{“URL”:”http://www.YourOwnB1og.com/feeds/comments/default…4. Add a title. Save.
That’s it!
Optional settings:
How to change the number of postsBy default, this widget is set to display a maximum of 8 recent posts. To change this number, edit line #4 in the code (refer to the code above for the line number) and replace the number 8 with the number of posts desired:
{“URL”:”http://YourOwnB1og.blogspot.com/feeds/posts/default”},”height”:”500″,”count”: 8 }How to remove the scroll bar
To disable the scroll bar, edit line #4 and remove the number 500:
{“URL”:”http://YourOwnB1og.blogspot.com/feeds/posts/default”},”height”:”500“,”count”: 8 }What do you think of this widget?
If you have questions or suggestions, please let me know by leaving comment below.