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 {Like this:
position:fixed;_position:absolute;top:5px;left:3px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
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:
;top:5px;left:3px;clip:
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!
Also, if you have any questions, suggestions or any violent reactions, don't hesitate to post a comment or send us a feedback.
{ 3 comments... read them or add one }
Thanks For Your Help..! It Worked For Me...!
I Will Keep Visiting Your Site
Have A Nice Day..!
Post a Comment
Feel free to post your comments!^^