asked what was up with these little icons in my post footers and I pointed her to
where I said I talked about putting the little guys in there. Well, pointing here was a load of crap since I just realized that I didn't actually explain in that post what I did. Sorry Laura!
Following is the template code I use to produce these links. Note that in some instances I had to break long lines and thus put some whitespace in where technically it shouldn't belong. If you implement any of this code, be sure to collapse any whitespace in URLs/template code that produces URLs AND USE YOUR OWN LINKS TO GRAPHICS.
<span class="PostFooter">
<a href="<$BlogItemPermalinkURL$>" title="permanent link">posted</a> by julie at <$BlogItemDateTime$> ...
<$BlogItemControl$> <a href="http://del.icio.us/login/?url=<$BlogItemPermalinkURL$> &title=<$BlogItemTitle$>"><img src="[link to image]" alt="add to del.icio.us" title="add to del.icio.us" border="0" width="21" height="10"/></a> <a href="http://www.technorati.com/cosmos/search.html?rank=&sub=mtcosmos&url= <$BlogItemPermalinkURL$>"><img src="[link to image]" alt="who's commenting on this post?" title="who's commenting on this post?" border="0" width="21" height="10"/></a> <a href="http://search.blogger.com/?q=<$BlogItemPermalinkURL$>&btnG=Search+Blogs&hl=en& ui=blg"><img src="[link to image]" alt="blogsearch" title="blogsearch" border="0" width="21" height="10"/></a> ... <a href="javascript:HaloScan('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCount('<$BlogItemNumber$>'); </script></a> | <a href="javascript:HaloScanTB('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCountTB('<$BlogItemNumber$>'); </script></a>
</span>
AAAAARGH! Scary code, must break apart.
Let's start with line 1..
<!-- 1: POST FOOTER STARTS -->
<span class="PostFooter">
This is just the opening tag of the post footer area. Your template will probably differ—a common way in standard Blogger templates to enclose all post footers is in the use of the <p class="post-footer"></p> tag pair. The point of showing Line 1 is just for context, it's not something you'd have to change if you decided to throw little icons into your post footer.
<!-- 2: "posted by" PERMALINK INCLUDES DATE & TIME, MY NAME -->
<a href="<$BlogItemPermalinkURL$>" title="permanent link">posted</a> by julie at <$BlogItemDateTime$> ...
Line 2 shows the creation of the permalink in my post footer. The permalink is a basic <a href="..."></a> tag where the Blogger template tag <$BlogItemPermalinkURL$> is used as the value of the href attribute. The <$BlogItemPermalinkURL$> template tag is wildly popular as it can be used for so many things (as you'll see). When your blog is published, and all the lovely template tags are turned into real values, the <$BlogItemPermalinkURL$> template tag is replaced by the full URL to your post (repeated for all posts that are shown on a page). Also used here is the <$BlogItemDateTime$> template tag. This prints the date and time of your post in the date format stored in your settings (dashboard -> settings tab -> formatting).
<!-- 3: THIS TEMPLATE TAG INSERTS THE EMAIL-POST LINK -->
<$BlogItemControl$>
If "Show Email Post links?" is set to "yes" in your settings (dashboard -> settings tab -> basic), and this template tag is present in your template, Blogger will automatically place a linked envelope graphic wherever this template tag occurs. The link takes the user to the "Email Post to a Friend" interface, and the information for the selected post pre-populates the "Email Post to a Friend" form.
<!-- 4: ADD TO DEL.ICIO.US -->
<a href="http://del.icio.us/login/?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$> "><img src="[link to image]" alt="add to del.icio.us" title="add to del.icio.us" border="0" width="21" height="10"/></a>
This is the first of the three wee icons I added to my post footer. When clicked, this icon will add the post to your del.icio.us bookmarks (provided you have an account and are either logged in or login when asked to do so after clicking the link). The add-to-del.icio.us URL is standardized, which allows us to use a combination of static text and Blogger template tags to create the link. The href value is "http://del.icio.us/login/?url=" + "<$BlogItemPermalinkURL$>" + "&title=" + "<$BlogItemTitle$>", that's it. The link surrounds a del.icio.us icon stored on my server.
<!-- 5: TECHNORATI SEARCH FOR LINKS TO POST -->
<a href="http://www.technorati.com/cosmos/search.html?rank=&sub=mtcosmos& url=<$BlogItemPermalinkURL$>"><img src="[link to image]" alt="who's commenting on this post?" title="who's commenting on this post?" border="0" width="21" height="10"/></a>
When clicked, the wee Technorati link will take you to a list of posts linking to my particular post. Typically, there are no Technorati search results for a post, but that's not because Technorati sucks, it's because I do. For instance, a random post from Dr. B produces these Technorati results while a random post from little ol' me does not. My post on expandable blog posts has a few incoming links, though. You get the idea—the link is there, and I (or you) can click it to see who has linked to a particular post.
The href value is "http://www.technorati.com/cosmos/search.html?rank=&sub=mtcosmos" + "&url=<$BlogItemPermalinkURL$>", that's it. The link surrounds a technorati icon stored on my server.
<!-- 6: GOOGLE'S BLOGSEARCH LINKS TO POST -->
<a href="http://search.blogger.com/?q=<$BlogItemPermalinkURL$>&btnG=Search+Blogs &hl=en&ui=blg"><img src="[link to image]" alt="blogsearch" title="blogsearch" border="0" width="21" height="10"/></a>
I recently added the Blogger icon as the link for Blogger Backlinks, but I don't like how Blogger Backlinks work. It's not the searching that I mind, because I kept that aspect of it, it's the changes made to the template and the individual post pages that I don't so much dig. When Blogger Backlinks are turned on, code is added to your template that will cause text to be printed to your individual post pages regardless if there are backlinks present or not. I don't like that; I don't like labels (e.g. "Backlinks found:") that have no items under them. It looks like a mistake. Sure, if I were Grandmaster Flash SuperBlogger that wouldn't be an issue because everyone and their cousin would link to my posts. But that's not the case, so instead of printing a lot of labels with no items under them I just removed the Blogger Backlinks functionality from my blog.
This little Blogger icon, when clicked, has the same underlying functionality as Blogger Backlinks: it initiates a search at Google's BlogSearch and returns the results. Most of the time there are no results (again, my fault and not the search engine's fault) but when there are, they are listed. See here, for example. By making this just a link to the search results, I don't have to deal with individual post pages that look funky without backlinks, or individual post pages that do have backlinks but look funky anyway because I can't completely control the output. It's a good idea, the Blogger Backlinks, as everyone has been aware forEVer that the lack of a trackback-like functionality was kinda crappy...but I think that the implementation of Blogger Backlinks (not the search part, that's fine) needs some fine-tuning from a template/output/control standpoint.
So what does the Blogger icon in the post footer link to? Specifically, the href value is "http://search.blogger.com/?q=" + "<$BlogItemPermalinkURL$>" + "&btnG=Search+Blogs&hl=en&ui=blg". You can change the value "&hl=en" to whatever language encoding you want to use for the interface; for my Spanish-speaking friends, that would be "&hl=es", for Portuguese use "&hl=pt-br" and so on. The link surrounds a blogger icon stored on my server.
<!-- 7: HALOSCAN COMMENTING AND TRACKBACK -->
... <a href="javascript:HaloScan('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCount('<$BlogItemNumber$>'); </script></a> | <a href="javascript:HaloScanTB('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCountTB('<$BlogItemNumber$>'); </script></a>
This last big chunk of code is the standard Haloscan commenting and trackback code, using the Blogger template tag <$BlogItemNumber$> to dynamically insert the value of the Blogger item (post) ID. This value is used by Haloscan to relate to the comments and trackbacks stored for your posts.
<!-- 8: POST FOOTER ENDS -->
</span>
The end. The post footer <span></span> tag pair is closed. As stated in step one, your template might have a closing </p> tag at the end of your post footer, or something else.
technorati tags: blogger, blogger templates
go to main page