On my last entry on Why I Just Hate Kongsiblog.com, I received quite a comment. Maybe it’s my lucky day, Am from starstreet.us came to visit and left a comment on this blog.

Basically he wanted to know how to put corner screen widget (actually I don’t know what it’s called) like my RSS feed button on the top right of my blog.

widget1

So Am, here’s the tutorial that you wanted ! It’s a simple one, so don’t be surprised how simple it can be.

1. Upload the picture you wanted to your hosting/image hosting.

First, you need to upload the picture to a hosting. After upload, copy the link location of the image.

2. Place the URL into the code below

<div style=”top: 10px; right: 10px; position: fixed;“>
<a href=”http://feedproxy.google.com/life4hire“>
<img style=”border:0;” src=”http://life4hire.berceloteh.com/wp-includes/images/rss2.png” alt=”RSS feed me now!“></a></div>

Above is the exact code for my RSS feed widget. Let me explain what the code does just in case for guys who are not familiar with coding.

The first line shows you how to position your widget. I positioned by widget 10 pixels from the top and 10 pixels from right. You can change top to bottom and right to left as well as the pixels to get your own result.

The second line basically the URL that you want people to go to when they click the image. In this case, I want people to subscribe to my RSS feed, so I simply put the RSS feed address there.

The third line is where you put the URL of your image earlier. You can set your border and alt tag is where you can put whatever you want user to see when they put their cursor on the widget. If you put your cursor on my widget, it will say “RSS feed me now”, it worked on Internet Explorer, not sure on Firefox though. After that, close the tag properly and you’re ready for the last step.

3. Edit your theme file accordingly.

Copy the codes that you have edited and place it in your theme file. If you want the widget to load at the starting of blog load, go to your header file and place it right before </head> and paste the code there. But if you wanted it to load last, put the code before </body> tag and it will appear at the end of your blog load.

There you have it. Quite simple and straight forward but a bit lengthy because I elaborated on the coding part. Or you can go to Adi Widget’s entry to generate the code and simply paste it to your blog. And did you know we can customize our Gmail appearances now? Refer to Kuan Hoong’s entry on customizing your Gmail theme !

As usual, I welcome any suggestions and tutorial request that you might want to know. I also open to questions regarding computer and internet especially regarding network including Cisco routers and switches, firewalls generally or Checkpoint firewalls in particular. Questions regarding operating systems like Linux, Unix and Windows are also welcomed ! :cool:

p/s : credit to Noktah Hitam because he’s the one who showed me this !!

Related posts