(Thanks to SEW for reminding me that I meant to write about this.)
Google recently introduced another nice piece of flair: a “Blog Bar” that lets you pick keywords, and then rotates through relevant posts by fading new links in and out. You can see it in action over on this post by Mark Lucovsky. You can also get a News bar, which is kind of fun too.
It’s really easy to get your own:
Step 1. Go to http://code.google.com/apis/ajaxsearch/wizards.html and click the “Blog Bar Wizard”.
Step 2. Choose the topics and formatting you want. When you click on “Generate code”, you’ll get some HTML that you can copy/paste onto your site. I wanted to keep my HTML clean, so I saved it as a separate file, like this file.
Step 3. If you saved the HTML off in a separate file, edit your website template and add this code wherever you want your blog bar to appear:
<iframe style=”border: 0px none ; width: 90%; height: 60px; margin-left: 1em; margin-top: 0.5em;” src=”http://www.mattcutts.com/files/matt-blog-bar.html” title=”Blog Bar” frameborder=”0″></iframe>
(Change the path to point to your file, of course.) That’s pretty much it. I’m going to put a blog bar (or maybe a news bar) on my individual posts above the comments for a little while to see how it looks. If you are looking for a way to spruce up a blog without much work, the blog and news bars are pretty easy.
{ 38 comments… read them below or add one }
Matt,
Neat little widget. While I was implementing on my site, I noticed you need to have the links open in a new window. Kinda hard to read a page in a 60 pixel window
cool stuff!
I am waiting for someone to make a Blogroll widget that displays the latests posts by all your friends instead of just links to the root of there site. (that doesnt scroll)
this is cool.
Yes, it’s a cool tool, but there are similar WordPress widgets that allow greater customization.
Umm, when I click a link in it I just get a very tiny scrollable iframe, that makes it essentially impossible to read anything.
Maybe they should make this open in a new window instead of the current iframe?
Cool stuff Matt, I just gained some traffic from it for my analysis of the Google Blog Search patent.
Tracked links display as http://www.mattcutts.com/files/matt-blog-bar.html
Jeremy you can already have a sidebar containing the latest posts from all your friends, just use RSS
Let’s be honest, it’s crap.
Like snap, mybloglog, the blog widget thing, it’s free advertising and not really very appealing, especially aesthetically with a scroll bar amongst other things.
Acutally it’s shocking to see something like that with the Google name next to it! It’s that bad!
I agree with martial, it requires the possibility of further customization. I experimented a bit and dropped it because some junk-blogs were showing up. You should be able to use filters: words, popularity, country, etc.
Nice though, hope it moves forward from its alpha status.
Andy I am not sure you know what I mean… What I want is the latest post from each friends blog. Sure I can do it with magpie and rss but I want a simple easy to use plugin that has built in caching
Iframes do not pass pagerank.
Matt,
I was playing with the blogbar tonight and I’ve got some tips on customizing the blogbar to match your site.
Doug
wow! A kool widget, and Doug thanks for providing link.
That’s pretty cool.
I definitely plan on using the news bar.
Bookmarked this page.
Nice Stuff, i was looking for a button or scroll bar to go back if I miss an intersting link. Is there a possiblity to integrated back and for button?
~Manni
Looks like it needs a target=”_top” attribute on the links to get around the opens-in-the-iframe problem. (I’m assuming it isn’t using a Strict doctype, where the target attribute isn’t allowed.)
Hi Matt,
I don’t know if you knew this, but the code sample you provided won’t work in XHTML strict (iframes are limited in what they can do there).
If you want the XHTML-Strict compliant code, I whipped up a quick sample here. I didn’t want to publicize the link because I didn’t want to hijack your blog with a link drop for something like this (that, and if I post a sample like this it looks like I’m trying to show you up and be arrogant which isn’t the intention at all):
http://www.searchenginefriendlylayouts.com/blogbar-xhtml-strict-code.html
Note: In IE (6 and 7), you’ll have to make sure mattcutts.com is a Trusted Site for it to work because of the cross-site data retrieval. For some reason, in Firefox it’s fine.
Cool tip, though. Thanks.
Matt
Thats a nice Gadget indeed. It will be great if Google blog bar be included in AdSense inventory. I can imagine publishers choosing topics for their blog bars, the rest AdSense take care of!!!!
Anybody else seeing $$$$ in the blog bar
Sorry, Matt…if you saw it before, I fixed a bug within IE (and used the default feed just for the sake of getting this done quickly for you).
The blog-bar.html file contains a conditional comment so that the inset border doesn’t show around it when loaded. So you’ll need it too if you want to use it.
Thanks.
Matt,
If you are going to iframe the blogbar or newsbar, make sure to over-ride the default link target. Just add this option:
linkTarget : GSearch.LINK_TARGET_PARENT
Your net options should be:
var options = {
largeResultSet : false,
title : “The blogsphere”,
horizontal : true,
linkTarget : GSearch.LINK_TARGET_PARENT,
orderBy : GSearch.ORDER_BY_DATE,
autoExecuteList : {
executeList : ["Matt Cutts", "Google", "SEO"]
}
}
Not sure if your aware of your plug-in doing this Matt, but in Thunderbird, I get multiple copies of your last 10 blog posts, This time around it has been 50 extra messages in my listings in the past week.
I know there are probably better readers out there than Thunderbird, but I don’t really want a separate reader, and I’m pretty sure I’m not alone. Anyway, if you can fix that issue, I’m sure there is at least one person who would appreciate it.
Matt
I know it isn’t a big issue for the friends at the plex. However I wish to ask whether we should expect and update of GTBPR soon?
Also.. is it still the case that PR wouldn’t be updated on these two DCs
72.14.207.99
72.14.207.104
Thanks.
By the way, clicking the Matt Cutts link in it (on the left) opens a Google page in that tiny frame…
keniki, you got my curiosity piqued with that last post.
Don’t suppose you could share the thought with the class, could you?
Matt – you may want to check this link – http://www.labs.darkseoteam.com/noarchive/not-trapping-users-data-good/
M
This is greatooo!!!
Matt these changing link change to fast. I cant see the link long enough to click on the one i am interested in
Slow it down imo … information is good but .. not everyone one has black belt reaction speed on the mouse button. Also, do remember the average reading age of a internet user is something like 16 years of age. Lastly, how will screen reader technology be able to cope with this? Will the blind and partially sighted miss out on his stuff?
Isn’t the story 1.5 years old? Post dockarl pointed to is from October 2005.
This is really cool. I placed the same in my blog
.
It would be a better tool if it were a little bit slower, more web 2.0 and opening links in a new window.
But I support bringing different content idea. Useful tool, but needs some make-up.
I’m confused by one thing: could you not just block the proxy server itself by IP? Chances are that not too many people would be using screen readers and proxies anyway.
Or am I missing something because it’s 2:30 and I can’t sleep?
Thanks Matt I added it my site but there are two issues
1.when user click on it it doesn’t open in new window – the issue must be solved otherwise the user go from my site.
2.I can’t use your code – XHTML doesn’t support it, and sorry I can’t use ifram in my site.
please advice.
thanks
Deb
Deb: http://www.searchenginefriendlylayouts.com/blogbar-xhtml-strict-code.html .
Matt, I’m not trying to be a smartass when I ask this, but how come you didn’t just take the code and edit the original post with it? It wouldn’t have bothered me any if you did; that’s why I passed it privately. Guess I didn’t make it overly clear though. My bad. Sorry about that.
what is the use of the text which we enter in “title” ?? i dont get it in the blog bar anwhere. instead i see the keywords in the blog bar (left of the links)
Very cool little gadget.
The Google Blog bar is cool. I have a website and looking at having a blog that will feature the bar.
The new Google Blog Bar is a Google AJAX Search API application that lets you easily add application and page-controled blog search results to your web pages or blog. It provides search-driven bars of blog search results, and is highly customizable too.
I am waiting for someone to make a Blogroll widget that displays the latests posts by all your friends instead of just links to the root of there site.
When I tried to use the Google blog bar on my blog, I didn’t like all these JavaScript I’ve to add.
So, I’ve rebuilt the Google blog bar(118KB) as jQuery plugin (4KB)!