Today we are here with blogging tips and tricks. I will discuss how to add recent post widget for blogger blog with the help of html/javascript. To do this customization you should have knowledge of adding html gadgets in bloggers layout feature.
Follow the steps below and get your featured widget of your own choice. Your new published post with some details will come exactly on the place where you add below HTML and JavaScript code. Here we provide 2 type of codes one is for only post title and next one is for post title with some details about post. Its your choice of implementing right code for your blog.
The two form of codes are given below and only one of them is needed to add on html gadget.
Code 1 : Recent Posts Widget with post details
<div id="hlrpsa">
<script src="http://
helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5 ;var showpostdate =false;var showpostsummary =true;var numchars = 100;var standardstyling = true;
</script>
<script src=" http://blog-address.com/feeds/posts/default?
orderby=published&alt=json-in-
script&callback=showrecentposts">
</script>
</div><a style="font-size: 10px;
color: #CECECE; float: right; margin:
5px;" href="http://www.seosmolinks.com" rel="nofollow" >Recent
Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861 ; font-size:
14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999 ; font-size: 12px ;
border-bottom:1px #cccccc dotted;
margin-top:-11px; padding-
bottom:11px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>
Related posts:
Code 2: only title Recent Posts Widget
<div id="hlrpsb">
<script style="text/javascript" src="http://
helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var
numposts = 10;var showpostdate =
false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src=" http://blog-address.com/feeds/posts/default?
orderby=published&alt=json-in-
script&callback=showrecentposts">
</script>
</div> <a style="font-size: 10px;
color: #CECECE; float: right; margin:
5px;" href="http://www.seosmolinks.com" rel="nofollow" >Recent
Posts Widget</a>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861 ; font-size:
14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:7px;
padding-bottom:7px;
border-bottom: 1px #cccccc dotted; }
</style>
How to add Recent Posts Widget to Blogger
- Step 1: login to your bloggers account, then find your blog from dashboard and go to layout in settings.
- Step 2:find a perfect place to add code.
- Step 3: click on add a gadget link then select HTML/JavaScript gadget from popup window.
- Step 4 : now copy above code and add that code to this HTML/JavaScript section.
- Step 5 : Replace the " http://blog-address.com" text with your URL
- Step 6 : click on save and preview your blog.
Related Posts:
Now bookmark this website and see working of this recent post widget from blogger.
Comments
Post a Comment
Comments that are not related to this post will be deleted.
Spammers please stay away.