Sticky Posts (no longer sticky, this one)

Wouldn't it be great to have a real sticky post at the top of your page? Well, you are reading a sticky post right now.

I already developed a sticky message-board at the top of my Blog, but that is not really a post, and you can't leave comments on it.

So right now I am "burning the night-oil" on sticky posts for Blogger Beta. I am onto some interesting javascript, but a lot of work has still to be done.

But this morning, wide awake after a good night's rest, a tremendously simple solution revealed itself before my inner eye. So... this is my Mark I Sticky Post.

Please let me know how you feel about Sticky Posts. Do you need them? Should we develop a more elegant hack?

As I said before, the solution I used here is tremendously simple and doesn't require any hacking. When you have written your post, click Post Options and set the date of the post anywhere in the future. As you can see, I set the date of this sticky post at December 31 in the year 9999 (but it was posted on October 7, 2006).

And if you don't need the post to be sticky an longer, set the date to somewhere in the recent past.

What we should do to make this real good is adding some code to the template that checks whether the date-header is in the future or not. If so, it should not be displayed. Maybe one of you guys has some spare time the next few days to give it a try!

Blog Navigation: Top of Page and Top of Post

This hack adds two new links to the footer of your post. One link to the top of the page, and one to the top of the post.

Implementing this hack is easy if you follow the next steps.

Step 1: Backup your template by downloading it and saving it to your harddisk.

Step 2: Edit the HTML of your template, and expand the widgets.

Step 3: Find the post includable, and add the code to it that is highlighted in red:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id' >
 
If you are using the Peek-A-Boo hack, this code is already there.

Step 4: Scroll down to the code-lines for the post-footer. Just below the code for the quick-edit icon, insert this code:

<!-- to top of page and top of blog -->
<a href='javascript:scroll(0,0)' title='Scroll to top of this page'>Top of Page</a>
<a expr:onclick='"javascript:document.getElementById(\"post-" + data:post.id + "\").scrollIntoView(true);"' href='javascript:void(0);' title='Scroll to top of post'>Top of Post</a>

Save the template and you are done.

Pullquotes for your Blog

It is definitely an oldy, but it is an oldy I really like. I first encountered it at AnnieBlueSky's BlogU. It is an easy trick to let your post jump out of the screen, by showing an interesting quote, that gives the essential idea of the post itself.

Sometimes text needs a little help to make it more interesting. Graphics works miracles in this department. But often you don't have a graphic that you can use. Jazzing up your text is an excellent option.
The pullquotes are easy to implement: you only have to add some CSS to your template, so strictly speaking it is not even hacking. Or maybe we could call it soft-hacking.

The only thing you have to do is add a class called "pullquote" to your template, and configure it any which way you like. In your post, add a <span class="pullquote"> around the text that you want to show in the box, and there you go.

This is the CSS that I added to my template. As you see, I defined color variables, so that I can set the color from my Fonts and Colors page.

.pullquote {
width: 15%;
background-color:$pullquoteBgColor;
background-image: url(http://home.planet.nl/~hansoosting/images/quotes_grey.gif);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: right;
border:1px solid $borderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

Color Variables that need to be defined are:
pullquoteBgColor, pullquoteTextColor and borderColor

Pushbutton-style images and links

In the footer of the posts of this Blog, you will see the social bookmarking icons. If you hover your mouse over them, you will see that they "move" just a bit to the right and down, as if they are pushed down. Read on to learn how this is done.

The movement of the buttons is achieved using CSS. CSS lets you define a so called pseudo-class a:hover. This class contains the layout of the anchor-element <a> when the mouse hovers over it.

The bookmark-icons below have a html-structure like this:
<a href="url"><img src="imagesource"/></a>

We have to wrap it inside a span, with a unique class, for example:
<span class="pushbutton"><a href="url"><img src="imagesource"/></a></span> 

In the css-stylesheet we have to define the following style for the new class:
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}