Stubborn Fanatic – Tech Blog

Category: my hacks

  • Auto-hide blogger navbar like Windows taskbar

    Hello Friends,

    Avatar from Bloggeratto has put up a comprehensive post on how to get your blogger navbar to auto-hide like the Microsoft Windows taskbar. This means that after using the code from his post you can make the blogger navbar hidden and it appears only when one hovers the mouse cursor over the navbar section.

    To view what I am talking about, just view Bloggeratto in Firefox and check out the navbar section. See how the navbar appears when you bring the mouse cursor near it and auto-hides when the mouse cursor is taken away. You can learn this hack on Bloggeratto from here.

  • Comment Feed for individual posts (updated)

    I am not sure if this is a new feature or an old one that I missed. I was moderating comments on one of my recent posts when I came across this feed link under the post. It is a feed to the comments that appear only on that individual post (not the entire blog).

    To view this feed link just click on your post’s title (for example you can click on “Comment Feed for individual posts” in this post), and scroll down to see the following text:

    “Subscribe to: Post Comments (Atom)”

    This appears on posts that have comments as well as the ones that have no comments.

    The hack

    For people who have removed (or wish to remove coz they use feedburner etc) the “Subscribe to: Posts (Atom)” link (that appears at the bottom of the posts section on the blog’s main page), this comment feed link will not appear on the post page. Here is a work around to have the comment feed link displayed while keeping your main page settings intact.

    It requires a very small modification to your blog’s template. So, if you do not wish to display the “Subscribe to: Posts(Atom)” link at the bottom of the main page but still want to display the comment feed link to an individual post on that post’s page, add the lines in bold to the code in your blog:

    <b:if cond=’data:blog.pageType == "item"’>
    <div class=’feed-links’>
    Subscribe to:
    <b:loop values=’data:links’ var=’f’>
    <a class=’feed-link’ expr:href=’data:f.url’ expr:type=’data:f.mimeType’ target=’_blank’><data:f.name/> (<data:f.feedType/>)</a>
    </b:loop>
    </div>
    </b:if>

    It is a simple “if” condition and to work with it you need to search for “ class=’feed-links’ ” and add the code in bold as shown here.

    How do they make it work for an individual posts?

    I don’t really know that, but let’s look at the URLs of the feeds:

    Comments feed my previous post:

    http://stubborn-fanatic.blogspot.com/feeds/2189603568115404259/
    comments/full

    Comments feed for this post:

    http://stubborn-fanatic.blogspot.com/feeds/2453519588050438240/
    comments/full

    I am not sure what these numbers i.e. “2189603568115404259” and “2453519588050438240” are. I guess they refer to the total number of posts in all the blogs on blogger at the particular moment when you create a post (your post’s simplest possible unique-ID across the entire blogger i.e. your post number). I am also not sure of this feed’s exact purpose. Few people, who tend to have an elaborate discussion on a particular post, might prefer to use such a feed, otherwise I see no use. Whatever it is, it sounds like a good feature. Its presence might be useful to certain readers and its absence does no harm.

    Update: I have replaced <b:if cond=’data:blog.homepageUrl != data:blog.url’> in the above hack with <b:if cond=’data:blog.pageType == "item"’> because the blog’s default feed link was not displaying on the main page but still displaying on the label and archive pages.

  • Extension to a Social Bookmarking hack

    Hello all,

    This is an extension to Han’s hack on social bookmarking links. Please view the original hack here.

    Working on Hans’s original hack, I have added a few more Social bookmarking links to it and also made changes to its JavaScript code (that goes into the head section of the template).

    The links and the JavaScript (js) code are in one text file that can be downloaded from here. If you are already using Han’s hack, and wish to add more links to it, replace the original js code with the one that I have provided in the text file.

    Code to be replaced:

    <script src=’http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js’ type=’text/javascript’/>

    If you require any help, please let me know.

  • Rake in feeds with blogger beta and OPML (updated)

    I am not sure about classic blogger, but I can definitely tell about blogger beta, that it has a number of options to choose from as far as feeds are concerned. If you have the right idea, you can use all of these feeds to offer your readers the flexibility to choose what they wish to read and how.

    Full posts feed of your blog:
    http://[your blog].blogspot.com/feeds/posts/full (updated as per blogger buzz)

    Summary posts feed of your blog:
    http://[your blog].blogspot.com/feeds/posts/summary (updated as per blogger buzz)

    Full post feed for a label (topic):
    http://beta.blogger.com/feeds/[blog id]/posts/full/-/[label name]

    Summary feed for a label (topic):
    http://beta.blogger.com/feeds/[blog id]/posts/summary/-/[label name]
    (or)
    http://[Your Blog].blogspot.com/feeds/posts/default/-/[label name] (updated as per Phydeaus3)

    Full comments feed:
    http://beta.blogger.com/feeds/[blog id]/comments/full
    (or)
    http://[your blog].blogspot.com/feeds/comments/full (added as per blogger buzz)

    Summary of Comments feed:
    http://beta.blogger.com/feeds/[blog id]/comments/summary
    (or)
    http://[your blog].blogspot.com/feeds/comments/summary (added as per blogger buzz)

    Phew! Did I miss some thing? With so many feeds to play, you can offer your readers with tremendous flexibility in choosing what they want to read and how. Realizing the benefits of this (especially in my blog where there are a many topics(labels)), I have revamped my feed subscribe section in the side bar. Using drop-down menus, I have tried to ensure that the readers get to choose what they want.

    I picked up the code for the drop-downs from an article in Improbulus’s “A consuming experience”. However, the code for the drop-downs required some modification (I guess due to the differences between beta blogger and classic blogger). Here’s how a typical drop-down code looks:

    <select id=”feedURLs” onchange=”var feedURL=this.options[this.selectedIndex].value;var feedTxt=this.options[this.selectedIndex].text;showFeed(feedURL,feedTxt)”>
    <option selected=”selected” value=”clear” >Select Full or Shorter Feed</option>
    <option value=”FULLFEEDURL”>Full Site Feed</option>
    <option value=”EXCERPTSFEEDURL”>Excerpt Site Feed</option>
    <option value=”HEADLINESURL”>Headlines only Site Feed</option>
    </select><br/>

    Here is the modified version of this code that works with blogger beta:

    <select id=”feedURLs” onchange=”var feedURL=this.options[this.selectedIndex].value;var feedTxt=this.options[this.selectedIndex].text;showFeed(feedURL,feedTxt)”>
    <option selected=”selected” value=”clear” />Select Full or Shorter Feed
    <option value=”FULLFEEDURL”/>Full Site Feed
    <option value=”EXCERPTSFEEDURL”/>Excerpt Site Feed
    <option value=”HEADLINESURL”/>Headlines only Site Feed
    </select><br/>

    Basically the </option> tag is eliminated to get this thing working here. I dressed up all the essential feeds of my blog using FeedBurner and then used them in the drop-downs. Feedburner also lets you create the OPML file for all the feeds that you have burned using it. Once you have the OPML file, upload it somewhere and provide a direct link to your readers so that they may download and incorporate it in their feed reader. To learn about OPML click here. To find out your blog id in beta, just scroll to the bottom of your blog and hover the mouse cursor on the link which reads “posts(atom)”. The number after “feeds/” is your blog id.

    Another update: If you wish to post HTML code in your blog you can use this tool to encode HTML code such that it can be displayed just the way it should appear to a reader. I had found this link in John’s FreshBlog.

  • Label feeds and peek-a-boo for sidebar (blogger beta)

    Hello all,

    I had read about label feeds somewhere a while ago but ignored the idea thinking that I won’t need label feeds. Little did I realize that label feeds is a very good feature for a blog like mine where I got multiple categories that are fundamentally different.

    So finally I implemented label feeds after reading about it from Phydeaux3’s blog. Now, readers who are not interested in the main feed may subscribe to an individual category’s feed like blogger hacks or book reviews etc.

    Peek-a-boo for sidebar

    I have noticed some requests for peek-a-boo in sidebars, in the Blogger help group. If you want Peek-a-boo type drop-downs for your sidebar, please visit Blog University to learn how to add them.

  • Open feed’s links in new window

    Based on the hack/mod I suggested in my article on link-lists in blogger beta, I have extended the same idea to feed displays that one may have in their blog.

    Feeds are a powerful and popular means of staying updated and they are also powerful distracters on a blog. If you have feeds to other blogs or news sites (like I have), it would be a good idea to use the code given below. If you are new to HTML etc just make sure you backup your template before proceeding with this hack.

    Depending on the number of feeds you have in your blog, blogger names each feed widget as Feed1, Feed2 etc. To find out the blogger-assigned name of a particular feed widget, just hover your mouse cursor over the edit link of that widget in the layout -> page elements section of your blogger account and in the browser’s status bar you will see a link with the blogger assigned name a.k.a the widget ID.

    http://beta.blogger.com/rearrange?blogID=[edited]&
    widgetType=Feed&widgetId=Feed2&action=editWidget

    However, this exercise may not be required if you have assigned a title to your feed widget. You can search for a particular feed widget’s code in your template using its title or the widget ID. Once you have located the feed widget you wish to modify, you should look for the following code in there. Look for the line which goes <a expr:href=’data:i.alternate.href’… and add a target=’_blank’ to it and you are done. Simple isn’t it?

    <b:widget id=’Feed2′ locked=’false’ title=’Reuters: Top News’ type=’Feed’>
    <b:includable id=’main’>
    [blah blah!]
    <ul id=’feedItemListDisplay’>
    <b:loop values=’data:feedData.items’ var=’i’>
    <li>
    <span class=’item-title’>
    <a expr:href=’data:i.alternate.href’ target=’_blank’>
    <data:i.title/>
    </a>
    </span>

    I have applied this hack only to third-party feeds in my blog. If you are using your own feed to display recent posts etc this may not be required as even if some one clicks on a link in that feed widget, they remain on your blog.

    As always, if you face any problems, just drop a line here and I shall look into it. Also note that this hack is only for blogger beta blogs.

  • Listen to your blog and blog podcasting

    I have recently added a “Listen to this article” link in my post footer and a link to my podcast feed in my blog’s sidebar. Using the link in my post footer, you can listen to my articles by way of streaming mp3 audio. Isn’t that cool?

    Yes. But how did you do that?

    I was never into podcasting and had no clue about it. However, while browsing instabloke, I came across a link in its post footer which read “Listen to this post”. Through that link I found out about Talkr.

    Talkr is a podcast server that’s very easy and free to use. To learn more about Talkr click here registering at Talkr, you can submit your blog’s RSS feed to them and the. Aftery will create a podcast feed with your posts converted into speech perhaps using some “text-to-speech” software at their end and it’s pretty fast too. So you don’t have to use podcast creation software, host the prepared MP3 files somewhere and setup a feed to it. Talkr will take care of it all. Talkr will also contain instructions on how to add the “Listen to this article” link and a Talkr chicklet to your blog. However, you may use the following piece of code for setting up the post footer links in your blogger beta blogs. (To learn more about working with post footers refer to my previous article

    <a expr:href=’”http://www.talkr.com/app/fetch.app?feed_id=
    [Your Talkr Feed id]&amp;perma_link=” + data:post.url’ target=’_blank’ title=’Click to listen’>
    Listen to this article</a>

    However, I have also faced certain problems. For example, even after setting up the feed over a day ago I still don’t see all of my articles in my podcast feed. Pronunciation of certain words by the automated voice it not very good (I love it when she pronounces my name :D).

    Moving on, once you have the podcast feed, you might want to use FeedBurner to dress it up i.e. optimize it and publicize it using chicklets and other features that they offer. To publicize you podcast further, just submit its feed link to podcast feed crawlers. A quick search for “submit podcast feed” in Google will bring up a number of such crawlers/ search engines. When submitting you podcast feeds to crawlers or blogging communities etc I prefer using a well dressed feed like feed burner’s and not the source podcast link because clicking on a feed burner feed link displays a page that your potential readers might like to go through unlike the code gibberish that they would see when they click on the source feed’s link.

    Why podcasts?

    Podcast is one of the few technologies that entered main-stream from obscurity in a very quick fashion. It’s in and people use it to keep a track of whatever they like. In addition, podcast feeds, promise a wider reach for an average blogger by way of supplying readers with downloadable audio file which they can store in their MP3 player and listen to anywhere or share with others. Such audio files may also be shared on P2P networks, BitTorrents and IRC thus giving you a wider reach. So isn’t that a reason enough?

    Podcast feed reader

    Well I am pretty new to this stuff but I think I have found a good feed reader for myself and it seems this one is pretty popular too. I am talking about Juice. Juice is a cross-platform podcast receiver which is available for free under the GPL open source. For more features of Juice, you may visit its website.

    Click here to learn more about podcasts. If you find more examples of podcast servers (with text-to-speech ability) or a better podcast logo (see the subscribe section in the sidebar), please leave a comment about the same here. Thanks!

  • How to add some thing to the post footer (blogger beta)

    I have had a few people who wished to learn how I added the various links that I have in my post footer. I have written this small tutorial which I derived from my previous post about adding social bookmark hotlinks to post footer. I have written this article assuming that you are aware of basic HTML formatting and codes don’t scare you :-).

    Before we proceed, I suggest you make a backup copy of your template using the feature provided by blogger or by copying the entire (enable expand widget template check-box) XML code into a text file and saving it at a secure location. Incase some thing goes wrong just copy-paste that code into the HTML section and save it.

    To work with this tutorial, in a separate text file, copy your blog’s template code (enable expand widget template check-box) then look for the following text in the file:

    <p class=’post-footer-line post-footer-line-1′>

    As the tag “suggests”, it contains the links or elements, that will be displayed in the first line of your post footer. In my case it is the author name, time stamp, comments etc till the topic(label) name. This is how the code for first line of post footer in my template looks:

    <p class=’post-footer-line post-footer-line-1′> <span class=’post-author’>
    [Author and time stamp code]
    </span> <span class=’post-comment-link’>
    [Comments code]
    </span> <span class=’post-icons’>
    <!– email post links –>
    <!– quickedit pencil –>
    </span> <span class=’post-labels’>
    [ label code ]
    </span>
    </p>

    Note that each element like the comments or the e-mail post icon is within the <span> </span> tag. The </p> tag at the end marks the end of that line. The code for starting a new line in the post footer will be:

    <p class=’post-footer-line post-footer-line-2′>
    [your code]
    </p>

    I have not used the “span” tags and made use of the good old “center” tag to format my post footer’s second and third lines. Trial and error will show you what suits best. So go ahead and add your code to your post footers and feel free to leave a comment or e-mail me in case of any problems.

  • Linklists don’t open in a new window and new hacks

    Just a quick update. I found that links added via the link list feature do not open in a new window. This might take away traffic from your blog. The solution to this is however, very simple. Open up you template’s HTML code in expanded widgets format. Copy the entire code into notepad or some text editor and search for a particular link list using its title. (In my case the title is “friends on www”)

    Scroll to the line which reads a expr:href=”data:link.target’ blah blah blah… and append target=’_blank’ over there, as shown in the example below. As this piece of code is in a loop (b:loop) you need to type it only once and there you are. So go ahead and make the modification.

    <b:widget id=’LinkList2′ locked=’false’ title=’friends on www’ type=’LinkList’>
    <b:includable id=’main’>

    <b:if cond=’data:title’><h2><data:title/></h2></b:if>
    <div class=’widget-content’>
    <ul>
    <div id=’link’>
    <b:loop values=’data:links’ var=’link’>
    <li><a expr:href=’data:link.target’ target=’_blank’><data:link.name/></a>
    </li>
    </b:loop>
    </div>
    </ul>

    Also check out some cool new hacks I came across recently:

    1. Turning labels into menu tabs (used in my blog)
    2. Peek-a-boo label drop downs (used in my blog)
    3. Convert link lists to thumbnail picture list

    Update: I found an article which tell why one should avoid setting all links to open in a new window. It tells how this setting can backfire and kill traffic. Read it here.

  • Translate blogs using Google (blogger beta)

    I have been able to locate the URLs used for submitting a page to the Google translate tool. I have incorporated them into my template such that the links appear under every post and readers can use it to translate a post into another language. Currently Google translate supports few languages and I will update my post footer when they add more languages.

    You can view and copy the code for using google translate (as in my post footers) from here. (Placed it in an external link coz people started telling me that some thing is broken in my blog and code is spilling out!)

    The image based goolge translate code contains direct links to the images of flags of the respective countries. You may use the same links or modify and upload the images to your server or image host and replace [image source] with the direct URL. Or use text links like me. The code for the text links is also located in the link. Incase of any problems, feel free to drop a line here. adios!