I was meddling with some of the blog sites and I saw they have this customized RSS icon at some corner of the site. I thought to myself ...why not? If you are close follower of my blog, you would have noticed the addition of the black cowboy hat that lingers at the top right corner of my blog site. On it is a signature RSS logo which was tied to this white ribbon around the hat. So.... for those of you who shares the same thought for the moment, I'm going to provide a guide on how to add that personal touch to that site of yours.
GUIDE
Firstly you got to get a custom RSS icon which at least you fancy. If you got no idea where to get it, you could try here.
Step 2
Look around your site's template design to source for a suitable location for the placement of the custom rss logo.
Step 3
Upload the picture to some online photo hosting sites like photobucket. Create an account if you do not have one, upload the picture and get the URL which points directly to the image. (Eg. http://myrsslogo.jpg)
Step 4
Use the following code block to insert the image link in your desired location. Insert the URL of the picture where you uploaded in Step 3, and replace the code at "YOUR IMAGE URL" with the URL you've got.
<a href="YOUR FEED ADDRESS URL" target="_blank"> <img src="YOUR IMAGE URL" border="0" /> </a> |
Also remember to link your rss logo image to your feed address URL which should be replace at "YOUR FEED ADDRESS URL".
You should see your custom logo up and running. Congrats!! IF your logo is in a odd shape like mine, you might want to customized the hyperlink to the shape of your image. That way, your hyperlink only works within the shape of the image. I used Microsoft Frontpage to generate the what you call the "Image Map" that bounds the region of the hyperlink.
Step 5(Optional)
Open the image with Microsoft Frontpage. Insert-> Picture -> From File
Step 6
Select an image map tool which is either rectangle, circle or polygon. The best tool which suits your needs of course to draw the outline of the image. Finish the outline and choose a destination for the hyperlink.
Step 7
The code generated will be something like this:
<map name='Map0'> <area coords='24, 61, 28, 40, 35, 30, 43, 26, 54, 24, 64, 24, 73, 26, 83, 24, 96, 28, 100, 41, 104, 49, 102, 55, 119, 53, 125, 35, 127, 60, 127, 69, 126, 76, 119, 82, 107, 87, 96, 91, 31, 96, 20, 99, 54, 104, 45, 107, 35, 108, 25, 108, 15, 104, 9, 104, 1, 100, 0, 86, 1, 78, 54, 71, 13, 63' href='YOUR FEED ADDRESS URL' shape='polygon' target='_blank'/> </map> <img alt='RSS Black Hat' border='0' src='YOUR IMAGE URL' usemap='#Map0'/> |
Copy the code and paste it in your site. Save and now your hyperlink is customized!
That's all for today's quickie.
Bookmark this post:
This entry was posted
on Thursday, September 25, 2008
at Thursday, September 25, 2008
and is filed under
programming
. You can follow any responses to this entry through the
comments feed
.
