Show Recent Latest Post with Thumbnail Image in Blogger
Read also: SEO Magazine Blogger template
Follow these very simple steps to add the “Recent Posts Widget Blogger with Thumbnails” in your blog.
- Go To Blogger > Design > Page Elements
- Click on “Add a Gadget” link
- From the pop-up window, choose HTML/JavaScript
- Copy and paste the following code below and save
Recent Post Widget Code 1:
<div class="$bs-recent-posts-widget"> <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list", "pipe_params":{"URL":"http://www.srdelta.com/feeds/posts/default"}, "hideHeader":"false","height":"","count": 7 }</script> <div style="font-family: arial, sans-serif; font-size: 9px;"><a href="http://www.wrock.org" target="_blank" title="Grab this template">Recent Posts Widget With Thumbnails</a></div><noscript>Your browser does not support JavaScript!</noscript></div> <style type=text/css> .$bs-recent-posts-widget {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 {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXr1T9q_jRaxRa1prsQQ0LuP-yEa00RJ1r0owrfM5s3VAdPxBN8lN_oJI5c6mGVJTsUbx7qp1k5ON9ja94VGM_OwQEXqGzFu-JKUjjqkoMV15LOIY4nrKsVsh1eUQOYKCdqoOx-Xfxrvs/s1600/logo.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>
Make changes according to your requirement like:
.pipesDescription {display:true;} – Change true or false to show to hide description in recent post widget.
“count”: 7 – this numbers of post you want show in widget like 7 or 5
“URL”:”http://www.vdreamz.com/feeds/posts/default” – change this with your own rss feed link.
Diff. Method and code 2:
Upload and try this code same method above if previous widget does not work use this what you need to change in this code mention after code.
<style type='text/css'> img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:10px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style> <script style='text/javascript' src='<a href="https://bloggerrecent.googlecode.com/svn/wrock-org-blogger.js">https://bloggerrecent.googlecode.com/svn/wrock-org-blogger.js</a>'></script> <script style='text/javascript'> var numposts = 5; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 100;</script> <script src='http://bolly2u.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> <hr/><small><a href='http://www.wrock.org/' target='_blank'>Wrock.Org</a></small>
- Change bolly2u.blogspot.com to Your Blog address
- Change numposts = 5 to Show number of Recent posts with thumbnails
- Change numchars = 100 to number of characters to show in summary of recent posts
- Change true to false to activate or deactivate any feature of this widget
- Don’t Forget to Save it
You can also change the design of this widget using CSS codes.
0 comments:
Post a Comment