Seeing that JPF has a Alexa Rank Wordpress Plugin, let’s make another button similiar to the Technorati Rank Widget in previous post. The ones provided by Alexa are BIG, at least compared to the 80×15 badges. So here’s how to create one in 3 simple steps (deja vu!).

This will be our final product:
Alexa Rank Widget

Step 1: install JPF Alexa Rank Wordpress Plugin

Step 2: download alexa.gif (right click, save as) and upload into your theme’s images folder e.g /wp-content/mytheme/images/

Step 3: insert the following code to your sidebar.php

<style type="text/css">
.alexarank {
width: 88px;
height: 26px;
background: url(<?php bloginfo('template_url'); ?>/images/alexa.gif) no-repeat;
}
.alexarank a {
color: #4096EE;
float: right;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 1px 5px 0 0;
}
.alexarank a:hover {
color: #3F4C6B;
}
</style>
<?php jpf_alexa_rank('<div class="alexarank">','','</div>'); ?>

Further Customization (optional)

* A different background image
Download and edit the Photoshop PSD file

* Link to Alexa Traffic Details instead of Alexa Overview
This requires hacking the jpf_alexa_rank.php plugin file.
Replace $rankurl = “http://www.alexa.com/data/details/main?q=&url=”.$blog;
with $rankurl = “http://www.alexa.com/data/details/traffic_details?q=&url=”.$blog;


What's Next?

» Share This (Social Bookmarks/Email)
» Subscribe to Feed
» Subscribe to Email
» Leave a Comment

Related Posts:
» Add a Technorati Rank Widget in 3 Simple Steps
» Add a Technorati Rank Widget for Blogspot
» Google PageRank Update

» Newer Post: Ditch FeedBuner Site Stats for a Speed Boost!
« Previous Post: Add a Technorati Rank Widget in 3 Simple Steps