Rotating Post Titles gadget for Blogger

I was snooping around today looking for something to inject some more life into my blog. I found an excellent new custom gadget which uses some Google AJAX magic to tap into your blog’s feed and display a sort of post slideshow.

You can see the result on the main page of this blog.

From the get-go I’d like to give credit where it’s due and the site where I found this custom gadget is a massively popular blogger’s paradise called The Blog Doctor.

Why this gadget is so useful

Mainly because it allows your blog readers to access all of your content from a compact, dynamic little window which can be positioned anywhere you like.

I placed it over my posts section and set it to display on the homepage only.

You can find the post with the instructions for installing this gadget here – Rotating Post Titles Gadget.

If you have problems installing the gadget let me know and I’ll try to help. Read more

How to install Blogger expandable post summaries

This is an oldie but a goldie. One of the first things I did when I created the first version of this blog early last year was to hunt around for a way to implement expandable post summaries.

There are a few ways to accomplish this but I eventually opted for this method…

Before we begin please make a Backup of your Blogger template – if you don’t know how to do this have a quick look at my post – Always back-up your Blogger templates!

Step 1 – Add some style rules

Go into your Blogger template (Layout/Edit HTML) and look for the following tag:

]]></b:skin>

Immediately AFTER it add this:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Now save your template.

Step 2 – Add the “Read More” links

Once again, go into your Blogger template (Layout/Edit HTML) and make sure you have your widgets expanded.

Find the following tag:

<data:post.body/>

Immediately AFTER it add this:

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>

Now save your template.

Step 3 – Add some span tags to your template

Now go into your Blogger Settings menu and hit the Formatting tab. Down the bottom of this menu you will find the Post Template field.

In this box add the following:

Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

Now save your Settings.

Step 4 – Modifying your posts

Ok now every time you create a new post the text above will automatically appear in the editing box.

Anything that you put into your post BEFORE the <span class="fullpost"> tags will become your POST SUMMARY (this includes images).

Anything that you put into your post AFTER the <span class="fullpost"> will become the MAIN BODY of the post only visible when a reader clicks on the Read more link.

Check out the main page of this blog to see it in action.

You can easily customise the way the “Read more” text appears, in fact I may do a quick post on it next.

NOTE: Unfortunately for your old blog posts you will have to go back and manually implement these span tags to convert them to post summaries.

Let me know if you have any problems.

Newsflash: I have heard rumours that Google may be implementing an even better post summary method into Blogger in the near future, but in the meantime this method works pretty well. Read more

10 tips for writing better blog posts

Some of them are common sense, some you wouldn’t necessarily think of – but here are my top 10 tips for writing better blog posts (in no particular order)...

10 – Stay on topic

Readers (and search engines) will feel cheated if your post title has little or nothing to do with what your post is actually about.

9 – Check your spelling

Come on, how hard is it? Just use Blogger’s built-in spell check feature.

Besides everyone knows how easy it is to run a spell-check so the fact that you didn’t means that:

(a) You were in a great hurry or
(b) You don’t respect your readers

Unless you can prove otherwise most people will assume it’s reason (b).

8 – Avoid the wall of text

When confronted with a massive block of text many readers will feel daunted and run (or click) for the hills.

Break your posts up using short sentences, images and paragraphs.

7 – Use lists

If something in your post lends itself well to the list format then convert it into one. People tend to skim through text on web pages and the human eye seems to be naturally drawn to lists.

Which brings me to my next point…

6 – Sub-headings make text more readable

Most people read from the top of a page and from left to right. It’s also a widely known fact that text readability is greatly increased using well placed sub-headings.

5 – Involve your readers

Do you want to be some kind of demented preacher flinging your righteous posts down upon an unworthy audience?

Or do you want to engage your readers in a meaningful dialogue and encourage them to contribute to your blog with valuable feedback and insightful comments?

If you chose the latter then write some posts which proactively ask for your readers’ opinions. Don’t be afraid if no-one responds at first, eventually someone will.

4 – Try to write one ‘extra special’ blog post a month

Ok I realise that “extra special” is a bit vague but by this I mean a blog post that you put a lot of effort into.

Some of these will miss the mark but the ones that don’t will go on to become your blog’s audience builders.

Without a doubt the most popular post on this blog is my 3 column Minima tutorial. I put a lot of effort into making this post really easy to understand and it has paid off in the long run.

3 – Lose the flab

There’s a line from the book Cold Comfort Farm where the lead character tries her hand at writing - very poor writing as it turns out.

In an effort to be poetic and grandiose she writes something to the effect of “The golden orb slowly climbed into the azure blue sky…”

Translation – the sun rose.

Don’t make the same mistake. Unless your blog is concerned with poetry and literature always make your point as quickly and concisely as possible.

2 – Edit your posts

Stream of consciousness may work well for the likes of Robin Williams, but for the rest of us it’s always wise to go back and check our posts before we publish them.

Do they make sense? Are they bloated?

1 – Always nurture your post titles and leading paragraphs

Regardless of how entertaining or informative the main body of your post may be, no-one will ever feel inclined to read it unless your post title and, to a lesser extent, your leading paragraph hooks them in.

To this end make them relevant but make them catchy and impactful.

Did I miss something?

Well that’s my 2 cents worth but if you have more to add then feel free to speak up. Read more

How to hide the Blogger Navbar

I’m not a huge fan of the Blogger Navbar – it sits at the top of our Blogger blogs looking incongruous and ugly.

It also makes it easy for malevolent readers to flag our blogs (whether it’s deserved or not) and/or navigate to a new one.

You may have noticed that the Blogger Navbar is not visible in any of my blogs. Sure the little sucker is technically still there but I made it invisible using a simple CSS trick.

Here’s how you hide your Blogger Navbar…

To hide your Blogger Navbar you simply add a few lines of CSS to the header section of your Blogger template.

Simply go into the Layout/Edit HTML menu and put the following CSS in your Blogger template:

#navbar-iframe {
height: 0px;
visibility: hidden; /* Gets rid of Blogger Navbar */
display: none;
}

It’s worthwhile leaving the /* comment */ in there too so you can remember what you did.

Now save your Blogger template.

Voila! That’s all there is to it – no more annoying Navbar! Read more

How to customise your Blogger Minima header section

A visually striking logo image or banner is one of the best ways to make your Blogger blog stand out from the crowd but the standard Blogger header management system has its limitations.

Here’s how you go about putting anything you like in your Blogger Minima header section…

Before we start be aware of the following:

1. We are about to circumvent the standard Blogger Minima header management system so you will no longer be able to change your blog logo or blog description using the Blogger Layout editor – you’ll have to do it manually instead.
2. You will need somewhere to host your image files (Picasa Web Albums is fine for this).
3. You will need some form of image-editing software to create your logo/banner images – I use Adobe Fireworks.

Please note: Do not attempt to cut and paste the CSS and html in this tutorial into your own Blogger template – IT WILL NOT WORK! The code in this tutorial is for demonstration purposes only.

Step 1 – Backup your template and any logo images you have!

I can’t stress how important this is! You’re going to make some mistakes when customising your Blogger template in this way – it’s an inevitability. Be smart and backup all your image files and your full Blogger template so you can always return to square one.

Step 2 – It might be wise to create a test blog

With Blogger it’s very easy to create a test blog which is a copy of your live blog. You can then make this test blog private and use it to get your new layout working without disrupting your readers too much.

Image layout of my #header-wrapper

Step 3 – Create your images

For the purposes of this tutorial I’ll tell you exactly how I created the header section for this blog - The Beginner's Blogging Guide.

In the interests of fast page load times it’s smart to split your logo/banner up into multiple smaller images.

I created three separate images for the header section of this blog using Adobe Fireworks, they are –

begin_logo.png (the logo which is 4Kb in size)
begin_title.png (the title text which is 6Kb in size)
beginner_header_repeat.png (the gradient background which repeats horizontally and is less than 1Kb in size)

You can literally create any type of images for your header, just try to keep the file sizes small and make a note of the image dimensions. You will need these measurements to place the images in the next step.

If you don’t own Adobe Fireworks, you might like to try using a free image editing program like IrfanView or Paint.NET.

Once you have finished your images – upload them to your host and make a note of their URLs.

Step 4 – Create your divisional elements

The div layout of my #header-wrapper

In my last post on this topic I gave you a rundown on the divisional layout of the Minima template. In case you forgot you will find that information here – Minima template header tutorial Part 1.

For this blog I created two new divisional containers (divs) – “#logo” and “#title.” I also modified the existing #header-wrapper div.

You will need to go into the Blogger Layout/Edit HTML to create your divs. You will also need the exact measurements (i.e. height and width) of your logo/banner image files in order to adjust your div containers so the images fit inside and are correctly laid out.

For this blog I added the following divs to my template (Note: these are examples only and will not work for other blogs using different sized images)

My example header divs –

#header-wrapper {
height: 125px;
background-color: #586894;
background-image: url(your image URL goes here../images/beginner_header_repeat.png);
background-repeat: repeat-x;
width:1000px;
margin:0px;
}
#logo {
width: 137px;
height: 103px;
padding-top: 11px;
padding-left: 60px;
float: left;
}
#title {
width: 656px;
height: 78px;
padding-top: 25px;
padding-right: 35px;
float: right;
}

The main things to notice here are the repeating gradient background image of #header-wrapper, and the widths and padding in #logo and #title for image placement.

Use your image editing program to work out the widths and padding for your divs, then add them to your Blogger template.

Once you’ve finished save your template.

Step 5 – Remove your old logo images and blog description text

Go into the Blogger Layout/Page Elements menu and remove your existing logo image and set the header to display the default title and description text.

Now go into your Blogger template – Layout/Edit HTML and make the following changes to the #header-inner div –

#header-inner {
height: 0px;
visibility: hidden;
display: none;
}

This will effectively hide the blog title and description text, allowing you to display your own custom banner/logo.

Save you template.

Step 6 – Add your custom banner/logo html to your Blogger template

Once again, go into your Blogger template – Layout/Edit HTML and make sure you have the “Expand Widget Templates” box ticked.

Scroll down until you find:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your blog title (Header)'type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>

Now add your custom html directly after the <b:includable id='main'>

For this blog I added (Note: this is an example only and will not work for other blogs):

<div id='logo'>
<img alt='The Beginner's Blogging Guide logo image' border='0' height='103' src='your image URL goes here../images/begin_logo.png' width='137'/>
</div>
<div id='title'>
<a href='http://www.thebeginnersbloggingguide.com' target='_self'><img alt='The Beginner's Blogging Guide title text' border='0' height='78' src='your image URL goes here.../images/begin_title.png' width='656'/></a>
</div>

Once you’ve added your custom html save your template and take a look at the finished result.

Using these techniques it’s possible to put absolutely anything into your Blogger header!

In my next post I’ll tell you how you can add a Flash banner to your Blogger blog. Read more