Don't Miss

Recent Posts Gadget with Excerpt for Blogger

By Zohaib Liaqat - 5 Comments
This widget displays Recent Posts in a simple and beautiful way. It shows a short description of post, Date, Author and post link of just one post at the upper section of widget. And at the bottom section it shows a list of recent posts with their links and when you hover on any post it shows its details on the upper section. One of the best thing of this widget is that it keeps rotating all the posts one by one at its top.
So, before installing the widget take a look at the widget.



Loading...

Adding Recent Posts Gadget with Excerpt to Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Layout >> Click on Add a Gadget and select HTML/JavaScript Gadget from the list of Gadgets
Step 3. Now Copy the below code and Paste it in the HTML/JavaScript Widget Box

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 2px solid #CAD4E7;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #3D5A99;
background-color: #ECEEF5;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
font-weight: bold;
color: #3F86C6;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #eeeeee;
}
.gfg-listentry-even {
background-color : #fefefe;
}
.gfg-listentry-highlight {
background: #748BB7;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #eee;
}
.gfg-listentry-highlight a {
color: #eee;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://www.blogolect.blogspot.com/feeds/posts/default?redirect=false&start-index=5&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>
Customization:
  • Replace www.blogolect.blogspot.com with your Blog/Website URL Address
  • In start-index=5 change the number 5 to the number of which post you want to begin to show
  • Now in max-results=10 change 10 to the number of posts you want to show
Step 4. Hit the Save Button
And you're Done!  

---> Do you like this article? Share it with your friends/followers and subscribe to this blog now, for you to stay updated with our latest posts.

Tags:

5 comments to ''Recent Posts Gadget with Excerpt for Blogger"

ADD COMMENT
  1. A few people utilize numerous credits and wind up paying different higher enthusiasm on advance and in the long run fall behind the installments and gone under obligation. Cash Advance San-diego

    ReplyDelete
  2. Make My Assignment is a web portal where students get help in making assignments for all the subjects, with the help of our experts. You will get 100% plagiarism free assignment. Expert’s consultation is also available for students. If they have any query they can contact with our experts anytime.
    Marketing Assignment Help New Zealand

    ReplyDelete
  3. Too many assignment and a short deadline. It may not be possible every time to get things done in time, not till you take assignment help from an established company. Go ahead for searching How to finish your Engineering Assignment? to get the right service you need. Trust us once with the most important part of your academic life and see how we make it shine.

    ReplyDelete