Stubborn Fanatic – Tech Blog

Tag: blogger

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

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

  • Get socially bookmarked! (blogger beta)

    See the image links to the social book marking sites under each of my post footers?

    Working on Ramani’s original post regarding adding hotlinks to Del.icio.us and digit!. I learnt how to rearrange the stuff that appears under each post using the widget code in the template and also added images instead of plain text links for hot linking purpose. Thanks to one Cal Evans I was able to get all the images in one place from the plug-in file on this page. All I had to do was some coding. I must tell you that I am not a programmer or some thing and know very little about coding. But ever since Ramani modified beta blogger templates into 3-column templates I think I have moved from knowledge to knowledge while exploring its code. Thanks to him for that.

    While the tags for Del.icio.us and diggit! were with me from Ramani’s blog, I was lucky to stumble upon this site. It has additional hotlinks and I got the “submit” URL from there. Here is how the code goes:

    http://www.furl.net/storeIt.jsp?u=http://www.broobles.com/blog/posts/46&t=Furl+vs.+Spurl

    becomes (based on the syntax from Ramani’s post)

    http://www.furl.net/storeIt.jsp?u=” + data:post.url + “&amp;amp;t=” + data:post.title’

    This is important to know because if you find other “submit’ hotlinks you can develop the tag on your own. If you like to have all of my hotlinks for your Beta blog template, expand your template widgets and search for “post-labels”. You will find the portion of code shown below. Insert the code in red above the /span tag.

    <span class=’post-labels’>
    <b:if cond=’data:post.labels’>
    <data:postLabelsLabel/>
    <b:loop values=’data:post.labels’ var=’label’>
    <a expr:href=’data:label.url’ rel=’tag’>
    <data:label.name/>
    </a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
    </b:loop>
    </b:if>

    Click here for the hotlink code to social bookmarking site (updated to 22)

    </span>

    Know that [image source] should be replaced with the image URL. Between each set of “span” and “/span” tags, an individual element (like label or quick e-mail icon or comments) is located. And the line on which it is displayed depends on this tag:

    <p class=’post-footer-line post-footer-line-2′>(it encloses elements in line 2, in my blog the hotlinks).

    Here is how the code 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-labels’>
    [ label code ]
    </span>
    <span class=’post-icons’>
    <!– email post links –>
    <!– quickedit pencil –>
    </span> </p>
    <p class=’post-footer-line post-footer-line-2′>

    code is here

    </p>

    Though this was not much of a task I feel happy to have done some thing that might be useful for other bloggers.

    P.S. For links to other bookmarking sites in my post footer, copy the link from there and follow the code above. Incase you have any issues implementing this or if you need links for some more sites (checkout this and this) and/or drop a line here.

    Update: Also check out:

    1. An extension to a social bookmarking hack
    2. Feeds, Social Bookmark Drop-downs and alternatives

  • Three column template finally!

    Do you find my blog radically different since your last visit? Yup its the three column template! Many thanks to Ramani of Hackosphere for working with the existing beta template codes to convert it to a three column template.

    Three column templates are useful if you have too many items on your sidebar and wish to avoid superlong side bars. To learn more about these templates click here. Also note that the label drop down and search result sorting on my blog is yet another hack from Ramani. For more info on that check out his blog.