Monday, August 2, 2010

How to - Alexa review badge

Due to popular demand, I'll be showing you how to add a floating Alexa review banner for your blogger blog. The usual way is to post through with the use of blogger's "HTML/Javascript" gadget, it'll be a static logo. What I'm about to show you is how to create a floating link just like how it's showed in the upper left portion of my blog.

Note: If the image is not large enough, just click on the image.

1. First go to Alexa's review banner links here.

2. Choose a banner type:

3. At the lower portion of the same page, fill up your blog's url(it should start with the "http://" protocol as per example below,  then click on "Build Widget".

4. Copy the code provided by alexa:

5. Now, login to your blogger account. Once logged in, go to the "Design" tab.

6. Click on the "Edit HTML" tab. Once you arrive there. Back up your working template by clicking on the "Download Full template" and save it to your pc. Also, make sure to tick on the "Expand Widget templates" checkbox.

7. On the html codes, look for the "]]></b:skin>" code. Do not include the quotes (" "). This code is usually next to the "</head>" code.

8. Then copy this code and paste it directly above the "]]></b:skin>" code that you found earlier.
#float_uppercorner {
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
 Like this:

Note: Please note that the code I've provided you will position your banner at the upper left most corner of your page.

You can change the position by adjusting the values on the following code:

9.Next is to look for the "</body>" code. Don't include the quotes (" ").

10. Once found, put this(<div id='float_uppercorner'></div>) code directly above the "</body>" code. Then insert the code from Alexa in between the
tags like the example below:

 11. Once done, Click on the "Save Template" at the lower portion of the HTML code box.

12. A dialog box at the upper center of the page will appear. Click the "View Blog" button.

And there we go! A floating Alexa review banner. It's also advisable that you create an Alexa account so that you can check the the reviews you've received. Hope that helps!

Yes, you! We want your feedback! We believe that by seeing your feedback, we can help improve our blog and in turn, we can serve you more efficiently.

Also, if you have any questions, suggestions or any violent reactions, don't hesitate to post a comment or send us a feedback.

{ 2 comments... read them or add one }

saikrishna 8/2/10, 4:03 PM
Thanks Digi,It Helped Me To Have A Floating Widget Of Alexa Just Like Your Site Had..!
Thanks For Your Help..! It Worked For Me...!
I Will Keep Visiting Your Site
Have A Nice Day..!

digiknowzone 8/2/10, 4:15 PM
No problem! Feel free to repost! If you have any request, just let me know. Nice day to you as well!

Post a Comment

Feel free to post your comments!^^

Minute Maid Pulpy Juice Drink!
Minute Maid Pulpy Juice Drink!