Blogger Template Tricks

Immediately Go to your First Post

2006-01-26T20:33:00.000-08:00

Here is a simple blogger hack to immediately forward a user to the first post in your blog.

Put the following code between the <head> and </head> tags in your blogger template:

<blogger><Mainpage> <script language="JavaScript">  </script> </Mainpage></blogger>

3 Column Blogger Templates : The City

2005-12-23T09:58:00.000-08:00

Isnaini has a sweet 3 column template you can view or download. Very nice.

Template per Iobloggo.com

2005-12-07T20:59:00.000-08:00

"Template numero #56 per Iobloggo.comQuesto template lo trovo molto elegante oltre ad essere particolare e curato nei dettagli :�)

"

K2 for Blogger

2005-11-29T21:10:00.000-08:00

Click to see a fully functional blog
Original Design by Michael Heilemann and Chris Davis for WordPress

Beckett

2005-11-29T21:09:00.000-08:00

Click to see a fully functional blog
Original Design by Lilia Ahner for TypePad

Wedding

2005-11-29T21:08:00.000-08:00

Original Design by Lilia Ahner for TypePad

A Tiny, Subtle Shift

2005-11-29T06:41:00.000-08:00

As with anything that you do frequently, patterns emerge. Certain choices become comfortable, unrequired of a second thought. Such is the case for me when choosing colors for the web. There have been certain hex values that I'll gravitate toward: #eee, #ddd, #ccc, #999, in the grey family, for example. I know what each of these will accomplish for me and how they play with each other before a stylesheet is created. I'm sure you have your favorites and old standbys as well. I fall into using and reusing these values because they work like a trusty wrench.

But it's fun to cast those aside (at least temporarily), changing things by an extremely small measure. At times, it can mean all the difference in devising something fresh, new and different.

This happened while working on a recent project. Instead of combining my usual #eee, #ddd, and #ccc, I instead settled on combining #f5f5f5, #e5e5e5, and #d5d5d5. I know, this sounds completely trivial, doesn't it? I mean, the difference is so damn subtle, it's liable to go unnoticed by the average user, not to mention indistinguishable on varying screen types. And on top of that, they're all far from being web-safe hues. But all that aside, for me at that moment, the slightest change made all the difference in making this particular project stand on its own. A temporary step outside the familiar -- even if that step is purely the benefit of me, as the designer.

The main point here being: sometimes a tiny, subtle shift in the way you do things can be all it takes for things to seem new, exciting and right again (perhaps a micro-realignment?). This same philosophy can of course be applied to the non-web world. Just a few hours ago, Kerry and I were tossing around statements like, "we need a new house" or "we need to put on an addition". Later, we started hypothetically shifting furniture around in our minds, and suddenly there was this renewed excitement in making something old, new again. A tiny adjustment that (for the time being anyway) quenches an urge for broad, sweeping changes.

Next week? I'll be back to #eee. Maybe.

BlogSkins Skin of the Year

2005-11-29T05:42:00.000-08:00

One of my favorite BlogSkins features, like, ever is the Skins of the Day. So in continuation of that theme, and the fact that we're approaching the end of 2005, I'd like to announce an idea I've been thinking about lately: The BlogSkins Skin of the Year.

Here's how it will work:

Some time after the end of this year, I will open up voting for the best skin submitted during 2005.
I will also use the same algorithm used to pick the Skin of the Day to programmatically pick the best skin of 2005.
Both skins (the users' choice, and the computer's choice) will be given prominent awards on their skin info pages, and the contributing users will receive $50 Amazon gift certificates.
The awards displayed on the skin info pages will be designed by BlogSkins users. I will pick the best one, and the designer of it will also receive a $50 Amazon gift certificate, and a permanent acknowledgement on this site that he/she was the creator.
So, obviously there's some time left before voting begins, so why am I telling you now? The first reason is that I want to give skin contributors time to submit skins before the end of the year. The second reason is that I need designs for the awards. My only criteria for the awards design is that they be clear that they are awards (so, like, trophies or stars or something) and that they look good at large sizes and small sizes (you may design 2 different awards, one big and one small, if you like). Please send all your entries in the awards design contest to blogskinsawards@mylesgrant.com.

Any other questions, please leave them in the comments.

Template natalizio 1 Iobloggo

2005-11-29T05:40:00.000-08:00

Template Natalizio numero #1 per Iobloggo.com
Anteprima del template
Scarica il template

linus zhu's blog

2005-11-24T18:26:00.000-08:00

linus zhu from China recently switched from MSN Spaces to Blogger. Here is his post telling why:

After trying new set of blogging and picture sharing tools, including blogger.com, blogger for word, hello+picasa, flickr. I decided to quit the domain of Microsoft blogging field, follow google for the following reasons:

blogger has more flexible template definition tools, it gives you ability to manage you site appearance in html code level

blogger from word really improve my productivity of blogging, in contract to the old msn space’s online editing or email publishing. Now you can take advantage of word’s powerful editing capability

hello+picasa indeed brings picture uploading and sharing process into a new era, instead of spaces’s loose resolution picture sharing.

xml communication indicates the Web 2.0’s coming, you can use a bunch of tools not matter you are online, or in word, or hello, or any other xml-aware tools

personal belief that google’s fasting growing and effect of rapid evolution process including new technology implementation and fresh tools

etc.

Blogger HOWTO: Syndication

2005-11-09T21:01:00.000-08:00

From Girl Interrupted:

So what exactly is syndication? What is this Really Simple Syndication (RSS) I keep hearing about? And how is this useful for my Blog? Whats in it for me?

Well, I'll tell you. Syndication is ... ...(as far as I understand it) a way of letting certain webpages (like Google, for example) and other incomprehensible internet machine thingies (such as information aggregation tools) know when your site (eg, your blog) has been updated. Aggregators (or newsreaders) scan these feeds, and let you know whenever the site has been updated. They're kind of like your own personalised newspaper, with everything you've chosen to read, and none of the crap (unless someone has added AdSense to their feeds, or something).

Read the rest here

Blogger Can Save Your Lost Posts!

2005-04-08T11:02:00.000-07:00

In a great move that is very appreciated, Blogger has upgraded their post-editing page with a nifty "recover post" link (see screenshot).

I used this feature last night to rescue a post I worked on for 5 minutes. I pushed POST, and it dissapeared! Clicking "Recover Post" magically brought it back. Phew!

Blogger is quick to say "This feature is not guaranteed to work every time you lose a post, but it's always worth a shot."

Beyond that, you can read more about Blogger's Recover Post feature.

Filed Under: blogger updates cool web public blog

2005-04-07T18:15:00.000-07:00

One of the coolest blog helper-apps of all time, Feedburner allows you to take your Blogger Atom formatted XML feed and convert it to Feedburner's flexible format, which automatically switches to the best feed format for your site visitor's feed reader.

Once you convert your feed, be sure you funnel all your feed traffic through it, and also check out these cool publicity tools.

Feed Your Feeds Through Feedburner

2005-04-07T18:06:00.000-07:00

If you're using Feedburner to publish your feed or to transform your Blogger Atom xml feed into RSS versions 1.0 or 2.0, or to podcast, then be sure all your feed traffic gets piped through feedburner.

Use this simple code hack in your Blogger Template to drive any autodiscovery traffic to your feedburner feed:

Step One: Find the following code at the top of your Blogger Template...
<$BlogMetaData$>

Step Two: Wrap the code with the following information from your feed...

<link rel="alternate" type="application/rss+xml" title="Blogger Template Tricks" href="http://feeds.feedburner.com/BloggerTemplateTricks" />
  <$BlogMetaData$>
<link rel="alternate" type="application/rss+xml" title="Blogger Template Tricks" href="http://feeds.feedburner.com/BloggerTemplateTricks" />

This ensures that if any newsreaders or search engines scan your blog for an XML feed, it will catch your Feedburner feed, not your plain-vanilla Atom.xml feed.

Of course, replace my feed information with your own, from feedburner.

2005-04-07T18:01:00.000-07:00

Personalize the link for the comments on your blog by using this simple hack by Blogger Templates.

2005-04-07T17:57:00.000-07:00

Blogger makes Web updates easy. At a minimum, all you have to do is write a post and click "publish" to see your page updated. When you submit a post to Blogger, it gets saved to our database and this is where Blogger tags come in. Blogger tags tell our blog publishing program which information to fetch from database and put on the page. "Please put the title here, the post right underneath, and then the date and time go here and here. Thank you." It's all very polite.

Expandable Post Summaries

2005-04-07T17:17:00.000-07:00

Zhen posts a good tutorial on how to have only portions of your blog posts show on the main page.

With this trick, you can choose to display an arbitrary amount of text from the beginning of each post, as a teaser for the whole thing. Then users who want to read the rest of the post can click a link to see the full text. This is handy if you have lots of long articles all on one page. Note that you'll need to have post pages enabled in order to make this feature work.

Losing Weight? Show the world on your blog

2005-04-06T10:50:00.000-07:00

3 Fat Chicks have a cool weight loss tracker you can post in your blog, email signature, forum posting or just about anywhere else you can put a signature.

Check out the tracker and get your own.

Filed Under: blog tricks tips hacks add-ins blogger weight loss

RSS Feeds in Blogger

2005-04-05T15:55:00.000-07:00

Syndicating your blog is like having hubcaps on your car--you don't have to have them, but everyone who sees you will ~~laugh out loud at you~~ think you should spend some more time in Blogger School before venturing out in public.

While some good primers on syndication exist on the web, it may be enough for you to know that its a cool way for people to have your blog follow them around the web through what is called "feeds". A feed is like an electronic ticker-tape of your blog's content that people can plug into a variety of other web applications.

For example, they might plug your blog into their MyYahoo page, or their MSN page, and then they'll see your bold movie critiques or your newest dandelion photos every time they go online.

Others might even link to your blog posts on their own websites, along with comments like: "look how cool this guy is!"

However, if Syndication is like hubcaps on your car, allowing people to syndicate your content with their choice of format is like the steering wheel.

Currently, Blogger only outputs feeds in Atom format. However there are others. RSS 2.0 being the most commonly desired.

If only there was a way to reformat your Atom feeds into RSS or other formats... hmmm.

Hack: Google from your site

2005-04-04T21:23:00.000-07:00

Point-N-Click has a page where you can copy some code to allow you to Google Search from your own website (or allow your visitors to search on their own).

Click here to get the code for this hack.

Notes:

If you adjust the number in the size="25" attribute of the <input type="text"... tag, then it will make the text box smaller (less width). The maxlength attribute should stay where it is. Having these two set differently allows you to type a lot of text into a small textbox.
See the Point-N-Click homepage to see how this has also been reworked into the small right-hand column of the site.

Next Post Hack

2005-04-04T21:04:00.000-07:00

Movable Type & other templates allow you to have a link bar across the top and bottom of link posts with links to the previous item and the next item in your blog, by title.

You can do this in Blogger now, too. While hacking the Kubrick template for Point-N-Click, Michael Heilemann included this very cool hack.

Code:

 <itempage><div align="center">« <a href="<$BlogURL$>">Home</a> <BloggerPreviousItems> | <a href="<$BlogItemPermalinkURL$>">Next: <$BlogPreviousItemTitle$></a> »</div><div style="display:none"></BloggerPreviousItems></div></itempage>

Notes:

This line of code must be outside the Blogger tags. If you have to, close the Blogger tag (</Blogger&rt;), paste the code in, then reopen the Blogger tag.
Right now, this will only show up on Post Pages, the pages of your individual items. To show on all pages, remove the <itempage> and </itempage> tags.
It seems the best place for this is at the top of the posts on the page. In most Blogger templates, just before the Blogger tag is opened the first time is usually great!

Stats Hack: Show your page stats

2005-04-04T20:51:00.000-07:00

Use this hack, combined with StatCounter's free website stats application to graphically show your page stats on a website of your choice. See an example on this page.

Using this hack?
Please leave a comment to this post with your website URL

To use:
Copy the following code to your website, editing the first two variables (see comments in the code for details.
Note: Please keep the web friendly--if you use this hack, link back to this post!

Click the "Read More" link, below, to see the code:


<script language="JavaScript">
<!--
//++++++++++++++++++++++++++++++++++++ STATS HACK +++++++++++++++++++++++++++++++++++++
//
//     written by Robert Merrill
// http://point-n-click.blogspot.com/2005/01/statshack-show-your-page-stats.html
//
// This code is provided free of charge and without support, warranty, and liability
// Please keep reference intact, pointing users to http://point-n-click.blogspot.com/2005/01/statshack-show-your-page-stats.html
//
// To scroll users to the graph on your page, use the code: <a href="#seeStats">See page statistics</a>
//
//++++++++++++++++++++++++++++++++++++ STATS HACK +++++++++++++++++++++++++++++++++++++
//Step One: What is your STATCOUNTER Project ID Number?  Default is '513981', the ProjectID for http://point-n-click.blogspot.com
scProjectId = 513981

//Step Two: How many DAYS of stats do you want to show? Default is 15
scNumDays = 15

//Step Three: Sit back and watch your stats graph appear on the page
ed = new Date();
bd = new Date(ed.getFullYear(),ed.getMonth(),ed.getDate()-scNumDays)
bdStr = bd.getFullYear() + '-' + (bd.getMonth()+ 1) + '-' + bd.getDate();
edStr = ed.getFullYear() + '-' + (ed.getMonth()+ 1) + '-' + ed.getDate();
document.write('<a name="seeStats"></a><span class="siteStatisticsGraph">Our statistics for the last ' + scNumDays + ' days:<br>')
document.write('<a href="http://my.statcounter.com/project/standard/stats.php?project_id=' + scProjectId + '&guest=1">')
document.write('<img border="0" src="http://my.statcounter.com/project/standard/graph_daily_summary.php?hide_page_loads=0&project_id=' + scProjectId + '&startDate=' + bdStr + '&endDate=' + edStr + '&guest=1">')
document.write('</a><br> StatsHack provided by <a href="http://point-n-click.blogspot.com/2005/01/statshack-show-your-page-stats.html">Point-N-Click</a></span>')
//++++++++++++++++++++++++++++++++++ END STATS HACK +++++++++++++++++++++++++++++++++++++
//-->
</script>

Code conversion powered by SimpleCode

Got Hacks?

2005-04-03T20:35:00.000-07:00

If you'd like to join us here and post hacks along with us, I can add you as a writer to our blog. Just show me whatcha got. Post a comment here...

Template Tricks

2005-04-03T20:06:00.000-07:00

This blog is for all the sweet Blogger template tricks, hacks and hints I've found over time since I began using Blogger. I'll share some smart linking ideas, javascript, html, and more.

Please post a comment to the Wishlist if you are looking for something specific.

And, please remember that this is linkware... it won't cost you anything but a few kilobytes. Just link back to this site, templatetricks.blogspot.com if you use any of these ideas. It's only fair. Besides, if you link to me, I will link to you! And, if your site is interesting to me, I will add you to my newsgator and then the whole world will know about you.

Wishlist

2005-04-03T20:01:00.000-07:00

Wanna know something? Post a comment here and we'll ~~all laugh at you~~ see what we can do about it.