All Blogger Posts Slideshow As News Headlines



Blogger Posts Random Slideshow As News Headlines or you can say Rotating random posts blogger widget. In this widget all the blog posts of your blog are displayed randomly same way as you see the slideshow of pictures or you see in some news sites which show of there latest headlines as an slideshow of one coming after another.

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

21 comments:

Analyst said...

I installed the same in my blog but I only require the headers to appear as I have inbuilt Google adsense code which is left aligned to the text and same is also visible as it is the first text being projected. Is there a way to only show the title.Regards
Indian-share-tips.com

tackad said...

the widget is too darn big for my sidebar.
My blog is visual rather than test. Is there a way to show the title of post and the first image in that post ?

infozsoft said...

just dropping by hoping for a link exchange!

vanudin said...

Thanks for the tips.

Its great result in my Blog.

you can see here http://www.patromax.com

Nayan said...

Hi
can you make script who also shows first image of blog post. i think google ajax had a script, but i did not understand google ajax.

Anshul said...

Ya friend it can be done in google ajax .i will post in my next post dont worry.

lightkun said...

tnx for this tipz!

_________________
if you dont mind..i want to have link exchange to you!>..
heres mine

http://downlight4you.blogspot.com/

admin said...

Great post, really help me alot. Thanks.

irish coffee mug
(Coffee Mug Online Shop: The Best Coffee Mug Store)

CED PUB said...

it is possible to have the same thing but with IMAGE post

Ducamel01 said...

Hello!

Is it possible to increase the "amount" of the post that is shown (more words in each post?)
I managed to change the hight of the box, but I cannot increase the amount of words that are shown in each post...

Also is it possible NOT to display the line: "Posted by....at 10:00pm" ? For me it is a useless information at this point and it consumes space.

Please help me.
Thank you in advance and congratulations once again for your site.

Dinh Hiep Nhu said...

Hello, I partcularly like your post.
Got a question.
How can I randomize posts? Isn't it possible here?

Thank you.

Nathawud said...

Big Thank ,It work fine.

Can you upgrate to random post with image?

Cheer!

Nathawud said...

You can see the result on my blog

http://hackublog.blogspot.com/

N.T.H said...

thank you
my site: http://www.thanhhieu.net

Matt Peloquin said...

Anshul, good stuff. Any chance you have a script that also could include the image from the RSS feed, ala a slideshow?

I saw another comment above but was wondering if you had such a script available?

Love you script, just feel that images and the text would make it great!

Thanks!

тнє ∂αяк α¢є! said...

Hey how to use this code?
I wanna use it, which displays my posts first pic and a slideshow.

I dont know how to use this, so please guide me all the steps.
It is not showing on my blog even after i copied the code.
Do we have to add something in template html before doing this? please reply.

Thnks

Anshul said...

you have to do nothing just add the codes in widget as i told it will start work and alos edit the red lines in codes with yours.Like i have given my blogspot name replace with yours.

το σχολιο said...

very nice . is it possible to have only the post's title and image in the widget ?

Not A Paper Cup said...

Hey Anshul, this was working for me, but now it when I click on 'read more' it wont link to the blog entry....and ideas?

Thanks in advance!

Anshul said...

@not just you need to edit that read more link too in codes like u edit images and titles check codes again and find # to replace post url also.

Welcome Hackerz said...

Hi THnx for Sharing These awesome thing....Can u tell me a slidshow of posts with thumbnails....

Post a Comment