A New Footer Section

After deciding to stay with this template, I wanted to spruce it up a bit. One thing I hate is the speed of loading. My solution? I added a new Footer section, which I named the cellar. I got the idea from Amanda over at Blogger Buster. Then I added a twist or two of my own.

First, let me explain why this is a solution. I know what the slow loaders are on my blog. My blogrolls are horribly slow. As are my Amazon widgets, and Blogger Play. I'm not sure if Feedjit is or not, but I put it in the cellar anyway.

I have my blog arranged so the posts load first, then the sidebars, and my cellar loads last. So, unless you are a speed reader, by the time you reach the cellar, it is fully loaded. No waiting. No fuss. No muss.

My cellar is defined by a horizontal line with text across the top and a horizontal line across the bottom. This is how it appears on the Page Elements page.


Not only does it contain the 3 column area, it contains a full width column before and after the last horizontal line!

As always, it is a good idea to save your template before starting.

Now, add this code to the CSS sheet between <b:skin><![CDATA[/* and ]]></b:skin>:

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
.footer-bottom {
padding: 10px;
}

Next find this code:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Replace <b:section class='footer' id='footer'/> with this code:

<div id='footer-column-container'>

<div style='clear:both;'/>

<p>
<center><b>{ <i>YOUR TEXT</i> }</b></center>
<hr align='center' color='#cccccc' width='90%'/>
</p>

<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='footer3' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='footer4' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-top' preferred='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
</div>

<p>
<hr align='center' color='#cccccc' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div style='clear:both;'/>
</div>

You can name your footer here or remove this code if you don't want text. You can also change the color of the horizontal line.

Save your template. Depending on your blog, you may have to change some of the widgets from HTML1 to a different name...like HTML 15. Just depends upon what type of widgets you have in your blog. Remember you can always delete the widget and put in a different type later. This is just to get the code in place.

Now you have widgets out of the wazoo!!! I love widgets!!!!!!!

UPDATE:
04/09/08: Error fixed! Thanks for pointing out a problem, Gelo!!!

Add "Subscribe to Comments (Atom)"

In each Blogger template, below the posts, is a link that allows readers to subscribe to your posts Atom feed. Remember when I wanted to put this feature back in my template, but couldn't figure out how? Well, I finally found out how to restore the Subscribe to Comments (Atom) feature.

Here is what you need to do if you have *ahem* misplaced yours like I did. Open your Dashboard | Template | Edit HTML and check Expand Widgets Templates. Find this code:

<!--Post feed links -->
<div class="post-feeds">
<b:loop values="data:posts" var="post">
<b:if cond="data:post.allowComments">
<b:if cond="data:post.feedLinks">
<b:include data="post.feedLinks" name="feedLinksBody">
</b:include>
</b:if>
</b:if>
PUT NEW CODE HERE
</b:loop></div>

Replace PUT NEW CODE HERE with:

<a href="http://yourblogname.blogspot.com/feeds/comments/TYPE">Subscribe to: Post Comments (Atom)</a>

Put your blog's name in, and change TYPE to full or summary.

Poll is closed and the verdict is...

Today the poll for my blog template is finished. The results?

• Original: 66%
• Pink: 33%

Thanks to everyone that voted. If the truth be told, I'm glad that I'm keeping the original. I put a lot of time and effort into this template...testing, trying out, tweaking, arranging, posting about all of it.

It was fun thinking about a new one and dabbling in a different code, but it feels good to be home.

Change "Post A Comment On:" Text

Hi, I've been reading your blog for a few weeks now and I've gone way back into your archive. It's been a huge help for me. Thank you! I am writing however because I can't figure out how to edit the "Post A Comment On:" page. See this link for my specific example.

I've been creating a wedding website based on Blogger and have only allowed comments on the Guestbook "page" of my site and I've changed all references to "comments" to read "entries" or "guestbook entries" or "sign my guestbook". The only exception is this page which I can't quite figure out how to modify. Do you have anysugestions. The wedding site is: www.florandbrian.com
Thanks,
Brian


Brian, first you must open your dashboard | Template | Edit HTML and check Expand Widget Templates. Search until you find this code in the template:

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>

Change the code in red to the code in green:

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Sign my Guestbook</a>
</p>

That should do it! And congratulations to you and Flor!!

Vote for a template

I thought it might be time to do a new look for BlogU. And pink makes me happy. I found this awesome pink template and I've been adding widgets to it and tweaking it here and there. There is so work much to be done in it, if that is the way I decide to go.

I'm asking my readers to vote in the poll to let me know if I should stay with the original BlogU or use the new Pink BlogU.

Please vote, while keeping in mind that many items will be changed (like widget colors etc) on Pink BlogU if I make the switch.

The other reason for changing templates is I can spread out the items that make BlogU slow in loading. I think that would be a great improvement! Pink BlogU loads much faster.

So, vote and let me know!!

Link Tooltip

i wonder how you make the text thingy appear when you mouse over a link (text or image) then the text thing appears - like when i mouse over buttermilk cloud the text "my new blog" appears under the hand icon in a square box.

That is a tool-tip that displays when you move your cursor over the link. It is created with a simple little change to the link code.

<a href="http://buttermilkclouds.blogspot.com/" title="My Food Blog">Buttermilk Clouds</a>

That code will make this link: Buttermilk Clouds. Just change the URL, title text (where I have My Food Blog) and what is displayed.

Go ahead, test it by hovering the cursor over the link!

Locating the CSS style sheet

and i again i am able to do something with my blog with your very easy to use instructions. it took me a while before i can get it going as i didnt know where the CSS style sheet began. thank you so much! my blog is still in the works so no links yet. again, thank you. ;>

It seems the CSS style sheet is an elusive piece of code for some of you. Here is how to find it.

• Classic Blogger: Between the <style> and </style> tags. The first tag could have more in it like <style type="text/css" media="screen"> so don't let that concern you.
• Beta Blogger: Between the <b:skin><![CDATA[/* and ]]></b:skin>

The first tag is towards the beginning of your template in Classic and Beta Blogger. The style sheet it's self contains a lot of code that looks like this:

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

and

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

Note the "{ }" and the "#". They will be all over the place. That is a tale-tell sign of the CSS style sheet code.

Blogger Play

In mid September blogger launched a new toy...Blogger Play. It shows the pictures that are being uploaded to blogger in real time. A never ending stream of images. Addictive.

You are able to add this wonderful little toy to your sidebar. You can see mine in my sidebar now!

Add Blogger Play to your blog

Play with the borders and title until you get exactly what you like. Then open your Dashboard | Template | Page Elements | Add a Page Element | HTML/JavaScript and paste the code in the window.

Simple as that. Prepare to become addicted.

FEEDJIT

I just found a new widget that I thought I'd share with you.(I love widgets!!!) FEEDJIT gives you real-time traffic data on your blog or website.

Get a live arrival and departure traffic report
FEEDJIT

No registration is required and it's completely free. You are able to see at a glance where your visitors are located in the world, which websites they're arriving from and what they're clicking when they leave your site.

I absolutely love seeing where you all come from! So, this widget is right up my alley. (Translation for my foreign visitors...this widget is one I really like.)