Blank title widgets

For some strange reason, Blogger, in it's infinite wisdom, once again has decided to do something bizarre with the templates. It is now making us put a title in each widget/gadget title field.

Why? Good question. I wish I knew. But, until the person in charge of Template Management on the blogger team wakes up and realizes the error in this way, I have a work-around. And, thankfully, it is a simple one.

Every time you edit a gadget that had no title, or when you create a new gadget that you don't want a title on, put this code in the title field:

<h2></h2>

For the time being we have fooled the gadgets to believe there is a title in the field.

I hope they realize that this behaviour is just plain silly and put it back the way it was.

"Read More" and controlling posts per page

Hi Annie,

I stumbled upon your university and i'm learning a lot!

I don't have much knowledge in creating htm pages so i want to learn more...

I have some questions that i want to ask you:

First: How do you display only 1 blog post in the home page?

Second: How do i get to cut my post if it's too long? I mean you could display 100-200 characters then it will be cut, then there will be a displayed message below it that say's "read more" which is linked to the full post?

I wish you could help me.. Thanks in advance!


Blogger has really made this easy for us now. You must post in Blogger in Draft to access the "Read More" feature. They call it insert jump break. It allows a portion of your post to be shown on your blog's index page. It then inserts a "Read more" link to the full post page where your readers can keep reading.

Here is how to do it:

1. Open your post editor window and click on the Compose tab.
   
2. Write your post till you get to the point you would like a Read More break.
   
3. Then click on the 'torn page' icon on the right.
4. Finish writing your post.
   

You can also customize the "Read more" text to something more clever. Edit it by clicking Layout | Blog Posts Widget | Edit.



Now, to make your blog display only one post, go to your Dashboard | Settings | Formatting | Show. That is where you change the number to 1. Also make sure posts is selected in the box and not days.

A couple of simple little fixes!

Add Your Blogger Post to Twitter

If you have a blog and you tweet, this is for you. Automatically tweet your blog posts! Head over to twitterfeed. It is a three step process:

1. Create an account
2. Add your feeds
3. Track your feeds

Step 1: Create an account is simple enough. OpenID can sound scary, but fear not. Look here. If you have one of these accounts...or others, you have an OpenId already. This step is pretty easy. Let's move along.

Step 2: Add your feeds. This is actually a two step process.

1. First, make sure twitter is in the little drop down box. Then click on Connect your feed to your Twitter Account. You are then swooped away to Twitter where you are asked...Allow twitterfeed access? Click allow and you are then returned back to twitterfeed.
   
2. Now for the second part of step 2...Give your feed a name. I called mine BlogU. Then find your feed. Easy. Go to the Blogger Dashboard | Settings | Site Feed. Your feed URL is in the box by Post Feed Redirect URL. (Do you need help with getting a site feed? Read Setting up a RSS Feed.) After you get your RSS URL, paste it in and then test it by clicking on the little button. If all is well, you will get a message saying Feed parsed OK . Now click on the Create Feed button.

Step 3: After you clicked that last button, you will be taken to the page where you can track your feeds, edit them, delete them, or add another feed. I also clicked on switch to plain list view. It just made my options seems cleared to me.

TA DA!!!!! You are not blogging and twitting almost simultaneously. Welcome to the 20th century.

Add a double line border

How do you get it to make it a double line? I tried experimenting but I'm not sure which fields should be changed. Thanks, this site is awesome!


This is an easy thing to change. You will look for the code that you wish to change. If it is the post, you look for the post code in the CSS style sheet. If it is the sidebar, you look for the sidebar code. As a matter of fact, anything in the CSS style sheet that says border can be changed.

This is the code in my template (a modified Blogger Minima template) for the post:

.post {
margin:.5em 0 1.5em;
border:1px dashed $bordercolor;
padding: 5px;
padding-bottom:0px;
}

This is the line we are interested in changing. See where mine says dashed? That gives me the dashed line around my posts. Change that to double. You may want to also change the 1px to something a little thicker, like 3px or 4px just to make it stand out better.

Actually, there are other styles you can use. Here is a list of them:

1. dotted
2. solid
3. dashed
4. double
   
5. outset
6. inset
7. groove
8. ridge

There may be more, but I'm not aware of them.

And here is another little tip. You can apply a different border to each side. For instance if you want a double border on the bottom only, you would change the above code to:

.post {
margin:.5em 0 1.5em;
border-bottom:3px double $bordercolor;
padding: 5px;
padding-bottom:0px;
}

See where I added -bottom? That same line can be changed for all sides using:

1. -top
2. -right
3. -bottom
4. -left

Or if you want it on the bottom and right only do this:

.post {
margin:.5em 0 1.5em;
border-bottom: 3px double $bordercolor;
border-right: 3px double $bordercolor;
padding: 5px;
padding-bottom:0px;
}

You get the idea. There are a million ways to play with this. It is just a matter of what look you want.

Change comment script from plural to singular

Things that drive me crazy...I hate it when I look at a blog and it says "1 comments". I had a fix for classic blogger, but just realized that I didn't have one for the the new blogger. So, if it drives you crazy too, roll up your sleeves and dive in. But first...always first...backup your template! This fix requires you to go deep within the bowels of you template. GASP...the dreaded Expand Widget Templates. So, expand them and let's go!

First find this code in your blog. I'm basing this on the Minima template, so your code may be slightly different.

Step 1 Find this code:

<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if>

Step 2 Replace that with this code:

<br /> <b:if cond='data:post.numComments == 1'>1 comment<br /> <b:else/><br /> <b:if cond='data:post.numComments == 0'>Reply to this post<br /> <b:else/><br /> <data:post.numComments/> comments<br /> </b:if><br /> </b:if> <br />

Step 3 Repeat Step 1 and 2 because this code is in your template twice.

Now you can get a little fancy and instead of where it says Reply to this post, you can put whatever you want. Like...Let's talk...Be the first to comment...Don't leave me hanging.

Now your blog is approved by the Emily Post Institute of Etiquette. Well. Maybe not. It depends what else you put in your blog. But at least she is smiling over your comment grammar.

Do you want to wrap text around an image?

When using images in your post, do you sometimes get upset with where the text around the image goes? Here is a way to get the text to wrap the image...either to the left or the right. It is simple enough. All you need to do is put a little CSS in your template, then tell the image where to go.

So, basically it is a two step process. But, once you get the CSS code placed in the CSS style sheet, you only have to tell the image where to go from then on when posting images. If you notice, I have my flowers to the left and the gingerbread boys to the right, and the text wraps around them.

Here are the steps.
Step 1: Locate the CSS style sheet and paste this code (I put mine under the post section):

/*Wrap text around image
----------------------------------------------- */
.left {
float: left;
margin: 6px;
}

.right {
float: right;
margin: 6px;
}

Step 2:This is what your image tag will be similar to:

<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" />

Add class="left" or class="right" to that image tag. It will look like this:

<img src="http://farm4.static.flickr.com/3599/3515377006_db67e698de_m.jpg" class="right" />

Since I added class="right" to that image tag, the image will float to the right and the text will wrap on the left.

One more thing. When using this method to post an image, you will have to use the Edit HTML tab in the posting window...not the Compose tab.

EDIT: Thanks to an email from David Cosier/Fear Healing, I discovered a potential error in this code...it has been corrected. I left out the ----------------------------------------------- */ part of /*Wrap text around image. It really matters!

Troubleshooting the Label Cloud

I just figured out something that may be baffling others. I was looking at my photography blog, Sharondipity Photography, and noticed that my label cloud was not there. PFFFFTTTTT....gone.

If you have installed the label cloud and have problems, this may be the reason why. Quotation marks. Make sure that you don't have quotation marks in any labels. If you do, go through and remove them.

Another thing. At least one of your labels have to be in more than one post. Otherwise it won't work. I don't know why. I just know that is the way it is.