Stubborn Fanatic – Tech Blog

Category: blogging

  • 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.

  • Hack updates

    Hello all,

    Here is your round of hack updates which covers recently introduced new hacks for blogger beta.

    1. Expandable/collapsible post with Peek-a-boo style (updated to Super peek-a-boo)

    Ramani has come out with another hack where in users can provide their reader with a summary view of their post and a peek-a-boo style link to view the rest of the post. This is a very good hack for people like me who use one blog for publishing hacks, writing musings, diary notes, book reviews etc. And it also allows one to display more number of posts on the main page with out making the posts section super long.

    Update (Sep 22):Ramani and Hans of beutiful beta have jointly developed a modified version of this hack (super peek-a-boo) which allows one to have expand/collapse post feature and skip offering this functionality where they don’t want it. You can down the hack from hackosphere or beautiful beta. A non-beta implementation is also available on their blogs.

    2. Hoctro’s hacks

    Talking of flexibility, Hoctro has been doing wonders. He has brought out a series of hacks on blog navigation and template design. I highly recommend you check out his recent hacks like:

    a. Creating a Table of Contents
    b. Yahoo-ui-libraries for blogger beta
    c. Adding breadcrumbs navigation

    3. Bloggeratto’s updates

    For more hack updates please visit Avatar’s bloggeratto. Also, Avatar plans to announce a hack on how to auto-hide the navbar in blogger beta. So stay tuned to bloggeratto.

  • 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.

  • From rags to riches and hack updates

    I found this article on rediff.com. It’s about a man who came out of absolute no where and completed his engineering/MBA from premier institutes in India to become an entrepreneur. A very inspiring and touching tale. Click here to read the article.

    On the hacks front:

    Please make a note of Hacks Wiki. This is a one stop database which contains most of the hacks that are available out there. However, the latest hacks or a few others might not be in there. Many if not all of the old blogger hacks can be re-engineered to fit in the new beta blogger interface. Also check out some interesting links I have found:

    Add calendar navigation to your blog

    E-mail icon generator

    Scroll lists in your template (used in my sidebars)

    RSS chicklet creator

    Chicklet drop-down creator (javascript based and used in my blog)

  • Hacks from Hoctro’s place and other hacks

    Hey all,

    There is a nice add-on or improvement to Ramani’s original hack on sorting and display of search, label and archive results available here. Here is a description of the hack:

    “My improved hack is based upon not showing the date at which a post is created, and make the posts indented as a nice bulleted list” – Hoctro

    However if you do want the date header on the label search pages, just insert the line in red, in that code, as show here:

    <b:if cond=’data:blog.pageType != “item”>
    <h2 class=’date-header’><data:post.dateHeader/></h2>
    <ul><li><a expr:href=’data:post.url’><data:post.title/> </a></li></ul>

    In addition, if you are trying to get to terms with the beta blogger code (like me) and wish to understand more of it, there is a tutorial by Hoctro on defining and calling functions in beta templates. Do check it out here.

    Ramani has come up with another hack. Blogger, by default limits the number of posts that can be displayed on a single page when a label’s contents are viewed. This has been modified to show upto 100 results per page (useful if you have Ramani’s search hack through which only post titles are shown instead of the entire post, on label and search pages). check it out here.

  • Hide your Nav bar, add search and other blogger beta hacks

    Hiding the navbar in blogger beta is not much of a task but it has been made a piece of cake by praveen of apt thinking…. Click here to learn how to hide the nav bar in a jiffy.

    The search box on my blog has been picked up from here. Simple code and no scripts make it light and cool . You might also want to checkout that blog for it’s unique design and look.

    Have you tried Ramani’s new Multi style widget labels? It offers reader to select from a zoom view, a menu view and a list view to view the labels on a blog. My labels box is using this hack. Check out the hack here and stay tuned for more of such hack from hackosphere.

    Phydeaux3 has presented code for developing a label cloud which you can check out from here. Nice work there!