Some Of Its Feautres:-
1. Shows one post title at a time.
2. Links to the post.
3. Shows post excerpt also.
4. Every 5 seconds shows a new post.
5. Cycles through all the posts in the blog.
6. Starts a new cycle at the end of the list.
7. Once loaded continues cycling even when not connected to the Internet.
8. Uses official Google AJAX technology.
9. Can be used on other blogging platforms (not tested).
10. Hovering with mouse cursor
over the post title halts the rotation till mouse moves off the gadget
Visit Here For Its Demo - Blogger Widgets
How to insall the widget:-
Go To Layout > Page Element > Add A Gadget > Html/Javascript
Add the below codes and save it
<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}
.gfg-title {
font-size: 24px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}
.gfg-subtitle a {
color : #3366cc;
display:none !important;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
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:'title',
url:'http://anshuldudeja.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BLOG_TITLE ~ Random Posts."});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<div id="feedGadget">Loading...</div>
<div id="feedGadget"><a href="http://anshuldudeja.blogspot.com/2009/01/all-blogger-posts-slideshow-as-news.html" target="_blank">Click Here To Grab This Widget</a>~Design By-<a href="http://www.blogdoctor.me" target="_blank">Blogdoctor</a>.</div>
Just Replace the codes written in Red above with your blog url,with Heading of your widget and your width of the widget.Please dont remove Credits If you use them.
Now after saving it , Drag this widget from sidebar to top of blog posts header , as the same way we dragged the page navigation widget below blog posts box.
If you wanna only Posts title to display in this widget Then use below codes...
<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}
.gfg-title {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.0em;
overflow : hidden;
white-space : nowrap;
text-align : center;
margin-bottom:40px !important;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}
.gfg-subtitle a {
color : #3366cc;
display:none !important;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
width:600px;
height:40px;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
#feedGadget2 {
margin-top : 5px !important;
float:left;
width : 440px;
color: #9CADD0;
}
.feedGadget2 {
}
#big {
width : 440px;
font-size: 10px;
}
</style>
<noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
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:'BLOG_TITLE',
url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, horizontal : true,
});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<div id="big">
<div id="feedGadget">Loading...</div>
<div id="feedGadget2"><a href="http://anshuldudeja.blogspot.com/2009/01/all-blogger-posts-slideshow-as-news.html" target="_blank">Click Here To Grab This Widget</a>~Design By-<a href="http://www.blogdoctor.me" target="_blank">Blogdoctor</a>.</div>
And rest if you wanna change some colors,fonts and all,you have to do it yourself as its impossible to do it for everybody to match your template.
Source:-Blogdoctor
No comments:
Post a Comment