Recent Post Widget with Rotating and Excerpt for Blogger

Previously I shared with you 6 Awesome Recent post widget for blogger which is very helpful for blog users in driving more page views ...

recent post widget for blogger
Previously I shared with you 6 Awesome Recent post widget for blogger which is very helpful for blog users in driving more page views likewise I come with new java script made Recent post widget and I tell you that it is not a simple widget like previous, it has Rotating effects with Excerpt means it would select any post from the list when you mouse over to post. Java script implement on widget with CSS styles always fluctuate the sound of awesome and cool same fluctuation occurred with this gadget. You can replace this widget anywhere on your blog and it’s a guarantee that your visitors will surely play from this awesome gadget which would be useful for your blog traffic.
DEMO
Before implement this gadget, try the delicious taste of this widget by seeing the demo below.

After seeing the demo. Go to Blogger.

Now move on Layout>> Add a Gadget and select HTML/java script.

Then paste the below styles inside the HTML box and click on save.
<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #000;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #fff;
background:#000;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 20px;
}
.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 : #000;
border-bottom : 3px solid #58ACFA;
padding: 5px;
}
.gfg-listentry-even {
background-color : #000;
border-bottom : 1px dotted #58ACFA;
padding: 5px;
}
.gfg-listentry-odd a{
color: #fff;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #fff;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
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;
margin-top: 5px;
}
.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://protechnify.blogspot.com/feeds/posts/default?redirect=false&start-index=1&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>
If you want to play with this code so get some knowledge of customizations.

The present above blue URL is for your blog, so replace it with your blog URL address.

This recent post widget working on your blog from a Feed Burner feed post, so if you want to change the feed post sequence simply change start-index=1 value 1 to your desire numbers.

Max-results=6 represent the quantity of post which will be shown in the list, so if you want to increase the number of posts, so kindly don’t add an imaginary numbers like you have only 15 posts and you write it 16 so it would be wrong. Write only those numbers that you have available otherwise this widget may be crack.

Others parameters of this widget are mentioned below.

title: 'Latest Posts', representing the top text written at the start of this widget.
numResults : 10, represents quantity of post which would display in the list.
displayTime : 5000, represent the delay time between posts and rotation and remember its milliseconds which has been mentioned in thousands.
hoverTime : 500, represent the start hover time on top.

Check This: New CENSOR SEO Friendly Blogger Template.

It’s such an awesome and useful inventory for blogger users because with rotation it also increase your blog traffic. Implement this beneficial widget on your blog, play with CSS styles and enjoy the automatic rotating recent post widget with your readers and visitors. 

COMMENTS

Name

Android,2,backlinks,7,Blogger,45,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,8,Tools,7,Tricks,15,Web designing,17,Widgets,24,WordPress,4,
ltr
item
PRO TECHNIFY: Recent Post Widget with Rotating and Excerpt for Blogger
Recent Post Widget with Rotating and Excerpt for Blogger
http://1.bp.blogspot.com/-e7VhZPxoDR0/VaFAI8nCzkI/AAAAAAAAIgo/D4Zf8v2N_9w/s640/Auto-Rotate-Recent-Post-Widget-with-Excerpt-for-Blogger.PNG
http://1.bp.blogspot.com/-e7VhZPxoDR0/VaFAI8nCzkI/AAAAAAAAIgo/D4Zf8v2N_9w/s72-c/Auto-Rotate-Recent-Post-Widget-with-Excerpt-for-Blogger.PNG
PRO TECHNIFY
https://www.protechnify.com/2015/07/recent-post-widget-rotating-blogger.html
https://www.protechnify.com/
https://www.protechnify.com/
https://www.protechnify.com/2015/07/recent-post-widget-rotating-blogger.html
true
8223102945718438291
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy