Adding an XML feed button to your Blogger blog
After much searching around for where to get the "right" button graphic for the XML "feed" button for this blog, I stumbled across some interesting HTML code to do a feed button without needing a graphic image at all. It looks as good as the typical .GIF image, but also give you the flexibility of editing the button label and monkeying with the size and other attributes any time you want. That's really cool, especially for the graphically-challenged such as yours truly.
The annoying thing is that you have to hand-edit your blog template (in Blogger' template editor), and that means you'll lose these edits if you later decide to change templates. So, make sure you save your changes in an external text file.
I made a serious attempt to show you the HTML code right here in this post, but Blogger simply would not cooperate. That will be the subject of another post, but for now, all I can say is that you'll have to use your browser to "view source" for this web page and look for the text "powered-by" and "Powered by Blogger" and you'll find the custom HTML for the my XML, Yahoo, and Bloglines buttons a few lines back. My XML button code starts with the HTML comment "XML feed button code" and ends with the HTML comment "End of XML feed button code". You'll have to find the "Powered by Blogger" text in the HTML template for your own web page before inserting the button code snippets. You'll also have to change my blog name ("jackkonblog") to your blog name.
You can play around with the text (e.g., change "XML Feed" to just "XML" or "Feed" or "Atom", or even "RSS" or "RSS Feed"). You can change the "padding" around the text, the color, etc.
You can insert the "+ My Yahoo" and "Bloglines" buttons in a similar manner, but you really need to go to My Yahoo and Bloglines and use their interactive web pages to automatically generate the HTML code snippets that you will then have to manually insert before the "Powered by Blogger" entry.
This is not my idea of an "easy" button, but this is what works.
-- Jack Krupansky
posted by Jack Krupansky @ 7:54 PM
3 Comments
3 Comments:
Interesting little tip. I took the liberty of copying part of your HTML and pasting it here, since you were complaining you couldn't put it in your post. If you want the < and > symbols you have to represent them with the codes < and > respectively.
<!-- XML feed button code -->
<p>
<a title="XML Atom Feed - You can pretend it's RSS!"
href="http://jackkonblog.blogspot.com/atom.xml">
<span style="border:2px solid;
border-color:#FC9 #630 #330 #F96;
padding:2px;
font:bold 10px verdana,sans-serif;color:#FFF;
background:#F60;text-decoration:none;margin:0;">
XML | Feed
</span></a>
<p>
<!-- End of XML feed button code -->
Thank you kato. I do know about the < and > HTML "entities", but even they were mangled in the Blogger post editor. Fortunately, they do work here in the comment editor, sort of.
One additional tip on your tip to my tip... Replace the text:
href="http://jackkonblog.blogspot.com/atom.xml"
with
href="<$BlogSiteFeedUrl$>"
and Blogger will automagically substitute your feed URL.
I'm glad to see that this Blogger comment editor is a bit more cooperative than the main post editor. I think the problem is that it tries to be too smart, but is in fact too smart for the developers to understand.
-- Jack Krupansky
This is a pain... I had to select the text in Blogger's template editor, paste it as text in FrontPage, switch to HTML mode in FP, select the HTML text (which then has HTML "entities" for all the angle brackets and ampersands), then paste the text here, and finally removed trailing &<br&> tags. In any case, here's the final HTML template text snippet for the dynamic XML feed button:
<!-- XML feed button code -->
<p>
<a title="XML Atom Feed - You can pretend it's RSS!"
href="<$BlogSiteFeedUrl$>">
<span style="border:2px solid;
border-color:#FC9 #630 #330 #F96;
padding:2px;
font:bold 10px verdana,sans-serif;color:#FFF;
background:#F60;text-decoration:none;margin:0;">
XML | Feed
</span></a>
<p>
<!-- End of XML feed button code -->
-- Jack Krupansky
Post a Comment
Subscribe to Post Comments [Atom]
<< Home