Beautiful Beta: January 2007

Saturday, January 27, 2007

New Blogger Template - The Hobbit

Last week I discovered a very beautiful webdesign, and I decided to port it to a Blogger Template.

Get it now!
If you want to discuss this template, please visit the Beautiful Beta Forum.

Thursday, January 25, 2007

Playing with the Feed Links

Now and then one of your questions triggers my own curiousity. Shrish asked how to hide the Feed Link at the bottom of the frontpage, while keeping the Feed Link at each postpage. And how to change the text of the link. Well, here is how it is done. A new hack.

Step 1: Backup your template.
Better be safe than sorry.

Step 2: Edit you template
Open your template in HTML-mode, and search for the includable with the id feedLinksBody. You have to add some lines of code to it to make the hack work. Below, you will find the code of the includable, the new lines are marked in red.

<b:includable id='feedLinksBody' var='links'>
  <b:if cond='data:blog.pageType == "item"'>
    <div class='feed-links'>
    <data:feedLinksMsg/>
    <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>
</b:includable>

Adding these 2 lines of code makes the Feed Link only show up on an Item Page, and not on the Main Page or an Archive Page.

If you want to change the text of the Feed Link from "Subscribe to:" into something else, you have to replace <data:feedLinksMsg/> with your own text.
The same can be done with the "Post Comments" text, and with the "(Atom)" text.
Just replace <data:f.name/> and <data:f.feedType/> respectively with your own text (or remove them completely).

Friday, January 19, 2007

Adding a favicon to your blog

Old stuff, and explained by many excellent bloggers and hackers, but usefull all the same. How to add a small icon to your weblog, that shows up in your browsers favorites?
Well, that little thingy is called a favicon in webspeak. And this is how you add it to your blog.

First, create a icon using a program such as the freeware version of IconArt. Upload this file to the web.

Then, edit your blog template in html-mode, and add the following lines of code to the head of your template, just below the <head>-tag for example.

<link href='youriconfile.ico' rel='shortcut icon'/>
<link href='youriconfile.ico' rel='icon'/>

If you have already a link in your favorites-bar to your blog, in IE you will probably NOT see the icon right after adding it to your blog. You will have to delete the link from your favorites, empty your browser's cache, close your browser, start it again and add the link again to make it show up in IE.

Displaying code inside a post

In my posts I have put some code-snippets. I got some questions on how I did this. Well, to be honest, it is very easy.

I am using the <pre>-tag inside my post. Anything that is put between a <pre> and a </pre>-tag is handled by your browser as pre-formatted, and your browser leaves it as it is. You can add some styling to it inline, such as <pre style="font-size:90%;color:#009000;">, or you can add a class definition to your template skin.
If you want to display html-code inside your post, be aware that you have to replace every < by <, and every > by >.

Pages