Stubborn Fanatic – Tech Blog

Tag: blogger

  • Displaying widgets only on comment, label, search and archive pages

    Hello Friends,

    From certain site tracking services, I have been looking at the way people come to know about my blog and I realized that only few of them access my blog directly (using its main URL). Most of them come looking for some hack (like social bookmarking, Google Translate etc) and land on an individual post page. When they land on such a page, a lot of space under the article + comments section goes waste as my blog’s sidebars (in most cases) are longer than the length of the post + comments section. This is also the case on label, archive and search pages. I was wondering how to make efficient utilization of this wasted space so that such first time readers (of my blog) get enough information about my other posts and I am able to convert them to returning readers/visitors.

    I turned to instabloke for ideas and found that Blogbloke has made very good use of this space by posting a list of other articles, newsfeeds of his blog and adsense code. Inspired by his ingenuity, I decided to implement the same for blogger beta. To understand what I am talking about have a look at these pictures:

    1. Bottom of the “main” section on my blog’s main page:


    2. Bottom of the “main” section on a label page:


    3. Bottom of the “main” section on a individual post/comments page:


    You will notice that certain sections that do not appear on my blog’s main page appear on the label, archive, post/comments and search pages (I refer to them as “non-main” pages). See this image below. The highlighted widgets in the following image do not appear on the main page but appear on all other pages (i.e. non-main pages):


    Here’s how you can also make a widget to appear on all other pages except the main blog page.

    1. Add a page element


    First add a page element (widget) of your choice from you blog’s page element (Edit Layout) section. Don’t forget to give it a unique title as it becomes easier to search for the widget in the template code.

    2.View template code


    Then go to the Edit HTML section of your blog and view the expanded widgets template code. (Please make a backup copy of your template before you proceed)

    3. Search for the newly added widget/page element


    Now in template code search for the widget you just added using its title.

    4. Modify the Widget code

    Modify the code as shown below by adding the “if” condition (in bold). Make sure you add the “if” condition just after the <b:includable id=’main’ section> and the closing “if” code just before the </b:includable>.

    <b:widget id=’AdSense1′ locked=’false’ title=” type=’AdSense’>
    <b:includable id=’main’>
    <b:if cond=’data:blog.homepageUrl != data:blog.url’>
    <div class=’widget-content’>
    <data:adCode/>
    </div>
    </b:if>
    </b:includable>
    </b:widget>

    5. Now save the template and you are done.

    A special mention here for an Ajax-based hack by Hoctro which I used to display a large number of posts on my blog’s “non-main” pages. I did not use the feed widget for this purpose as Blogger limits the list to a max of five posts.

    So go ahead and fill up those spaces and feel free to drop a line if you face any issues.

    Update-01: To learn how to display widgets only on the blog’s main page click here.

    Update-02: To learn how to display a widget only on a particular label page or any other URL (from the same blog), click here.

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

  • Google Docs & Spreadsheets (updated)

    You might have come to know by now that Google has released a service called Google Docs & Spreadsheets . In this service, one can use an online text editor (similar to Microsoft Word and others) to create posts and publish it to their blog.

    With this service, you can:

    – Have your documents published online (as a webpage) to share it with others (dedicated URL to each document, as in Google pages)

    – Export your online documents in word, openoffice, HTML and PDF file formats to store it on your hard drive.

    – Import various document (.htm, .doc, .txt, .rtf, .odt, .sxw) and spreadsheet (.csv, .xls, .ods) file formats into this service and publish them online instantly or save it to your hard drive in a different format. So if you want to convert a Microsoft Word file into Adobe PDF format, you can do it easily using this service.

    – Collaborate and work with others on projects and set access permissions to files.

    – Post to other blogging tools (other than Blogger) like wordpress, LiveJournal etc and also use with custom hosted sites.


    To learn more about this service, you may visit this page.

    Problems

    1. Unable to Login to Blogger


    While editing my posts yesterday, I noticed that Blogger had even added a small side-box on the edit post pages to inform users of this service. That’s how I came to know about this service. However, when I used this service, it could not authenticate my blogger beta account (even after my providing the correct login credentials). I knew this was a bug and it was confirmed when in the evening, I noticed that the side-box no longer appeared on the edit post pages.


    Once this service is ready for blogger beta, I need to check how this thing works with the tables. If you are used to copy-pasting text from Microsoft Word you might remember that tables cannot be pasted into the post editor in blogger.

    2. Formating issues with spreadsheets [Updated (14th Oct, 12:36)]


    There are formatting issues with imported Excel files (as seen in the images above).

    3. Issues with Spellcheck

    I noticed that the spell check is not up to the mark:

    Google needs to fix this problem at the earliest, because if any bloggers were to use this service, the bare-minimum they will look for is proper functioning of basic features like spell-check.

    Support

    Other than the usual support by Google, there is a Google help group for Google Docs & Spreadsheets, where you can post you questions, concerns and suggestions regarding this service and share your experiences with other users.

    Conclusion

    Google Docs & Spreadsheets is a powerful software/service but lots of errors and problems need to be ironed out before its ready for use (thats why its in beta stage). In a recent news article, I had read that Google’s CEO Eric Schmidt wants his developers to focus on improving current software/services. I couldn’t agree with him more. In the recent years, Google has brought out a range of powerful softwares and services from its labs but its the continuing improvement, feature additions and support for these services that will win the day for it.

    Update (Nov 12, 2006 IST): It appears that the connectivity problems between Google Docs & Spreadsheets and Blogger Beta is now fixed. So go ahead try using this service now.

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

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