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
Step 1
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.
Read More...
Summary only...
