6 Easy steps to add IndiRank widget to a blogspot blog

This is a beginner to mid level blogger tutorial – on how to add the IndiRank widget to your blogspot blog in 6 easy steps . I hope it helps :)

  1. Login to www.blogger.com and click on ‘Layout’ under your blog as shown in pic.

  1. In the resulting page, click on Add Gadget from the sidebar where you would like to display your Indi Rank Widget. See pic below:

  1. You will get a pop-up where you can choose the gadget to add to your sidebar. Select HTML/Javascript gadget by clicking on the ‘+’ sign to the right of the gadget title. See picture below:

  1. Now, keep these web pages open and log in to www.indiblogger.in. Then you need to visit the IndiRank page and select the widget from http://www.indiblogger.in/widgets_indirank_customize.php. To copy left click inside white box and then CTRL+C on your keyboard. Picture below:

  1. Come back to the pop-up window where you would see a place to enter the title of the widget and also a large space for entering the code. In the larger area paste the earlier copied code from IndiBlogger.in by pressing CTRL+V on your keyboard.

    Then click on ‘SAVE’. As in picture below:

  1. And Voila’ your blogspot blog can now show the IndiRank widget. Follow same procedure for other widgets and badgets too.

Cheers and all the best!!!

How to add IndiRank Widget to Windows Live Spaces

Some of our IndiBloggers who have Windows Live Spaces blogs have had some problems putting up the IndiRank widget on their blogs. We tested the code and here’s the result.

Comment: However, Windows Live Spaces is not accepting images. Could be a image compatibility problem. We are working on it as we blog.

1) Log in to your Windows Live Spaces blog

2) Select ‘blog‘ from the menu after logging. See e.g. below:

Livespaces_blog_1

3) Select the widget module:

  • Click on the ‘Customize‘ tab found on the upper right corner.
  • Click on ‘Add Modules‘ sub menu under ‘Customize‘.
  • Then click on ‘Add‘ next to ‘Custom HTML‘.
  • See picture below for details.

Livespaces_blog_2

4) On the next screen click on Edit button under ‘Custom HTML‘. See picture below for an example.

Livespaces_blog_3

5) IndiBlogger.in widget code

  • Log in to Indiblogger.in
  • Visit the IndiBlogger.in widget page
  • Select the blog for which you need the widget for and click on Get Widget button (see picture below)
  • Then click on the link where it takes you to the code for wordpress.com and Windows Live Spaces blogs (See picture below)
  • Click in the code box by the side of the widget color you prefer (see picture below) and copy the code onto the computer clipboard (press CTRL+C on your computer keyboard)

Livespaces_blog_4

Livespaces_blog_5

Livespaces_blog_6

6) Finish, the end, omega, or whatever

  • Go back to your Windows Live Space page where you had opened the edit page for the Custom HTML code (see picture below)
  • Paste the code in the box (CTRL+V on your keyboard)
  • Click on Publish (see picture below)
  • That’s it. Your widget should be visible now.

Livespaces_blog_7

Livespaces_blog_7

Happy blogging!!! Visit http://anwinj.spaces.live.com/ for a view of the end result.