17 March, 2013

How to Add Simple Recent Posts Widget in Blogger

simple-recent-posts-widget-blogger
Recent posts widget will show the latest and newest posts in the blogger with blogger feed support. A simple Recent posts widget will increase your page views and also the user time on your webpage. Recent posts widget in blogger is now the requirement of every blogger enterprenuer. The user 's came from Google search and they did n't know the recently published posts of your blog. So after pasting the recent posts widget in blogger blogspot the user can easily find the recently published posts from the admin and they can easily view without finding, searching and wasting their time. There is no extra load of this widget on your page loading speed. This widget is simple, easy to install and easy to customize it with your own choice.

How to Add Simple Recent Posts Widget in Blogger


Step 1. Log in to Blogger Dashboard, and select Layout
Step 2. Click on Add a Gadget
how-to-add-gadget-blogger-layout

Step 3. Add a new HTML/JavaScript Gadget
Add html javascript Widget/gadget to blogger

Step 4. Write Recent Posts in Title
Step 5. Paste the following code in the empy HTML box:

<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX39CAVotyNCEylP1mexVTpBrhs7w_BvK4AgGJB1ZbYnvLaPC-gnOsnCAYfKE1_JdzgpKTQWattC9GbpCNxDm2D4YMc7Mk9xQjnH5WdWFQBYIzb-VUYzQcLezUYuGXtblBJ2_dpb0ZHaAs/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#starsblogging-recentposts a { font-size: 14px; color: #444444;}
#starsblogging-recentposts a:hover { color: #045FB4;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; margin-right:-30px; padding-right: 10px;}
.bbrecpost2:hover {background-color: #ffffff;}
</style>
<div id="starsblogging-recentposts">
<script style="text/javascript" src="https://starsblogging.googlecode.com/files/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://starsblogging.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>

and Click Save button.

Customization in Recent Posts Widget:


  • var numposts = 10 shows the number of posts under this widget. This will depends on your own choice.
  • http://starsblogging.blogspot.com/ replace your own blog URL with this, so the recent posts widget will pick the titles from your blog.
  • showpostdate = false will hide the date of publishing of the post. You can show the date with changing the false with true value.
  • showpostsummary = false will shows the summary of each posts under the title. You can change it with your own choice if you want to show the summary.
  • numchars = 100 will shows the number of characters under the summary. You can increase or decrease summary characters by changing this value.

0 comments:

Post a Comment