After posting a mini tutorial on adding a Technorati Rank widget for WordPress, Shawn commented on whether such a widget is possible for Blogspot. Yup, it can be done but slightly more complicated. And it won’t work on Blogger Classic templates as it requires the use of page elements available only in New Blogger. Classic Bloggers may want to try PurpleMoggy’s technorati rank widget

So here’s a look at the final product:
Technorati Rank Widget

Step 1:
1a. Enter your blogspot url at Tecnorati Rank RSS Feed (Yahoo Pipe created by engtech). Leave the “display before” and “display after” field empty. Click “Run Pipe”.

Technorati Blogspot Figure 1

1b. Right click on “Get as RSS” and copy the url e.g http://pipes.yahoo.com/…?textinput7=http%3A%2F%2Fericulous.com…&_render=rss

Technorati Blogspot Figure 2

Step 2:
Login to your Blogspot and go to Template > Page Elements. Click “Add a Page Element” and add a “Feed” element. Paste the url from Step 1b and click “Continue”.

Technorati Blogspot Figure 3

Technorati Blogspot Figure 4

Step 3:
Go to “Edit HTML” tab. Do a backup first by clicking “Download Full Template”. Look for the </head> tag and insert the following BEFORE </head>.

<style type='text/css'>
#Feed1 {
width: 88px;
height: 26px;
background: url(http://i16.tinypic.com/4gpcya1.gif) no-repeat;
}
#Feed1 h2 {
display:none;
}
#Feed1 ul {
margin: 0;
padding: 1px 3px 0 0;
}
#Feed1 ul li {
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
text-align: right;
text-decoration: none;
}
#Feed1 a:link, #Feed1 a:visited {
color: #4096EE;
text-decoration: none;
}
#Feed1 a:hover {
color: #3F4C6B;
text-decoration: none;
}
</style>

note: if you have more than 1 Feed page element, it may have a different ID other than Feed1. See what other Feed ID you have by doing a search for “id=’Feed” and note them down e.g Feed2, Feed3. Replace all instances of Feed1 in the above code with Feed2 or Feed3 etc..

Further Customization (Optional)
* Change the way you link to Technorati
Use the different flavours of Technorati Yahoo Pipes created by engtech.wordpress.com


What's Next?

» Bookmark and Share
» Subscribe to Feed
» Leave a Comment

Related Posts:
» Add a Technorati Rank Widget in 3 Simple Steps
» Add a Alexa Rank Widget in 3 Simple Steps
» Beta Launch: OneNews Singapore

» Newer Post:
« Previous Post: