This is a smaller version of the Random Rotating Post Gadget. This shows only the post titles linked to their posts in the blog. It has less height and saves more space. It would look good just below the blog header or above the posts column. See picture below :
It shows all post titles in the blog by rotating through them. If you hover the mouse over it the titles will pause rotating. It is also based on Google AJAX code. Here is how to install it......................INSTALLATION STEPS
1. Login at Blogger.com.
2. Click Layout link on Dashboard under blog title.
3. Click Add Gadget link in sidebar on Layout----->Page Elements tab.
4. Scroll down in popup window and click on Html/Javascript gadget.
5. Copy the code below :<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>
<script src="http://www.google.com/jsapi/?key=PASTE AJAX KEY HERE"
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>
<div id="big">
<div id="feedGadget">Loading...</div>
<div id="feedgadget2">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div></div>
6. Paste it in Contents window of the HTML gadget popup window.
7. Change "BLOG_TITLE" to actual title of blog. Also change "MYBLOG" to actual subdomain of your blogspot. Also sign up for an AJAX key for your blog. Then paste the key where it says "PASTE AJAX KEY HERE".
8. Save the HTML gadget.
9. Click on the HTML gadget in the sidebar and drag it to top of posts column.
10. Click Save button at top of sidebar.
View Blog. Wait for page to load fully before gadget starts to operate.
Enjoy!
You are here: Home > Widget > Rotating Post Titles Gadget.
Rotating Post Titles Gadget.
Rotating Post Titles Gadget.New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!
Posted by Vin
What have you to say?
12 VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.
EMail this post to a friend?
Filed Under :
Labels: AJAX, Gadget, Post Titles, Widget |Bookmark This Post
Related Article
Skip to top of post.
YOUR COMMENTS
Buy Vin a Beer :-) if you liked this post.
Search Blog Before Commenting
Post a Comment
Please use the above search box to search this blog before posting your valuable comments.
Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,
Vin.














12 comments:
Vin
thanks for the gadget but i was not able to enjoy it.
The gadget seems to be loading for a long period of time.
I did the changes but it just stands still (loading)
What do i do now?
Vin i did it again more carefully this time.
Nothing happens...Loading, loading without any change.
Any ideas?
kostasg,
I am creating Google Gadgets also. Check them out at My Gadget Showcase Blog.
hey vin.. i used this gadget and it works neat for me. many thanks :)
one small thing being how will I change the b/g color from white to lets say, "#635537".. Also how to remove the line borders of the gadget? Thanks a lot in advance. pls visit my blog and see..
naveen,
Try adding a background parameter line in :
.gfg-root {
......
........
background-color: #635537;
border: 1px solid #BCCDF0;
}
In the border line change 1px to 0px to disappear the border.
Vin, I have done this several times. Using Notepad to do the coding. When I paste it into the blog it still just says "loading..." what am i doing wrong??
Spotty,
I do not see the gadget in your blog?
hye.i'm using this widget and its working pretty fine to me( seriously i think this blog is the best resources out there for bloggers)
but when i tested it with IE8 only 'loading...' came up. every other browser works just fine..
what should i do?
Aidil,
Check out Gadget No 11 on My Gadget Showcase Blog in IE 8
It works on my IE8.
Can you explain what needs to be replaced in some detail to use this with a wordpress blog?
Thanks Vin.
Shae,
Follow the same method and then paste the modified code in a Text gadget in Wordpress.
Great gadget mate - I posted an article about it on my blog - I included links to your site of course.
Thanks!
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?