Posted by: h4ck@lyst | February 13, 2010

How to add your indiblogger badge to wordpress account!

We Blog, Therefore We Are. This is the motto of indiblogger.in. Indiblogger is an Indian blogger community & directory. You can have your blog listed in there and get a Indirank! The Indirank is an innovative creation of the indiblogger, which in their own words is

IndiRank – Ranking of Indian Blogs

IndiRank is a system we built to rank the blogs in the IndiBlogger network. Although we manually verify every blog before it’s allowed into the network, the IndiRank system is completely automated.

Ok, so after you get your Indirank, you ve the option to put up your Indirank on your blog. The higher, the better it is. Now Indiblog gives you an assortment of badges to put upon, but there is only one fall through! The badges are all external JavaScript driven. Now, if you have a blogspot blog, adding that external JS to your blog is not much of an issue. But if you are one of those SEO driven blogger who believes wordpress is the better option, then you have a slight problem. WordPress doesn’t allow inclusion of any JS into the text widgets! So how do we come about it? Simple. Just put in the generated HTML. Cutting the long story short, you can copy the following HTML, change your blogname and rank, and add it up in the text widget for your sidebar! cheers!

UPDATE


As Renie, one of the Team Indiblog commented, they do provide the HTML code on the site. Its just, err, well a lil hidden at the moment!

Actually we do have the HTML version for wordpress.com users – from the widgets page, select the blog from the select menu, “Get Widget”, and look for the link that says “Are you on WordPress.com? Get your code here.”

<div>
<div align="center">
<table cellpadding="0" cellspacing="0" style="width:160px!important;height:130px!important;background-image:url(‘http://www.indiblogger.in/widgets/img/indirank_red.png&#8217;);background-repeat:no-repeat!important;background-position:left top!important;background-color:transparent!important;"><tr><td style="height:20px!important;text-align:center!important;font-family:Arial, Helvetica, sans-serif!important;font-size:10px!important;color:#333!important;background-color:transparent!important;border:none!important;padding:0!important;">CHANGE_YOUR_WORDPRESS_ACCOUNT_HERE.wordpress.com</td></tr><tr><td valign="top" style="padding-left:10px!important;padding-top:0!important;text-align:left!important;"><a href="http://www.indiblogger.in/blogger/CHANGE_YOUR_INDIBLOG_ID_HERE/&quot; target="_blank" style="text-decoration:none!important;color:#C33C2A!important;font-family:Arial, Helvetica, sans-serif!important;font-size:60px!important;font-weight:bold!important;background-color:transparent!important;line-height:60px!important;margin:0!important;padding:0!important;">CHANGE_YOUR_RANK_HERE</a><span style="font-family:Arial, Helvetica, sans-serif!important;font-size:12px!important;font-weight:bold!important;color:#C33C2A!important;text-decoration:none!important;text-align:left!important;">/100</span></td></tr></table>
</div>
</div>

To get your INDIBLOGGER_ID , go to http://www.indiblogger.in/widgets_indirank_customize.php, there you will see something like

<script type="text/javascript" src="http://www.indiblogger.in/widgets/indirank.php?id=111111&c=1"></script&gt;

copy the http://www.indiblogger.in/widgets/indirank.php?id=111111&c=1 part and paste it in your browser.
You will get a distorted badge. Doesn’t matter , view the source of the page (Ctrl+U should do in firefox, Cmd+Shift+U in opera on Mac).
There you’ll see code similar to above. That is indeed my actual source of the code. Anyways, you should be able to find your relevant ID in similar looking place as in the above code!

PS: Indiblogger team, its not much of a work to provide the users with the HTML code as well. Please do so at the earliest. Regards!

Advertisements

Responses

  1. Good one ! Thanks for helping me post the badge for my wordpress blog > http://tinucherian.wordpress.com

  2. Hey thanks for the post! 🙂

    Actually we do have the HTML version for wordpress.com users – from the widgets page, select the blog from the select menu, “Get Widget”, and look for the link that says “Are you on WordPress.com? Get your code here.” Is this what you’re talking about?

  3. Nice tutorial dude.

    Cheers,
    Anwin


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: