How to remove a border from around a photo

How to completely REMOVE the border that appears around a posted photo within a post on Blogger??



This is easy to change! You will look for the code that you wish to change, which is .post img code in the CSS style sheet.

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

.post img {
padding:4px;

border:0px solid $bordercolor;

}

Or it could look something like this:

.post img {
margin: 5px;
padding: 5px;
background: $imagebgColor;

border: 1px solid $imageBorderColor;

}

Change this line to read:

.post img {
padding:4px;

border:none;

}

If you have difficulities in finding the correct code in your CSS template, keep in mind you are looking for .post img.

No more borders around your images!!

Make a custom favicon for your blog!

Do you have a favicon? Do you even know what a favicon is? Read on. At the end, you will know it all!

A favicon (short for favorites icon) is a 16×16 pixel square icon associated with a particular website or webpage.
From Wikpedia

I'm going to show you the easy way to make one. There is one program that I highly suggest downloading. It is free, and you can use it for all your quick photo needs. It is IrfanView. I use this program as my default photoviewer on my computer simply because it is so quick and great to use.

When I do a custom favicon, I generally use part of my blog header. Take a look at SeaSide Sharon and Buttermilk Clouds. Do you see my favicon in the address bar? And in Firefox, the favicon is also displayed on the tab. Each of those favicons were taken from my header image.

Here is how to do it:

1. Open your blog so you can see your header (or the part of you blog you wish to make a favicon with)
2. On your keyboard, click the PrtSc Sys Rq button (top row, third from the right)
3. Open IrfanView
4. Click Edit | Paste

What you see now is a picture of your screen and a picture of your header.

1. Placed your cursor in the header and select a 16x16 pixel area
2. Click Edit | Crop Selection
3. Click File | Save As | ICO - Windows Icon 

Upload that image to an online hosting site. You will use the favicon's URL from the hosting site to put it on your blog. I use to use Ripway...but I'm getting away from it because my bandwidth issues. I now use Flickr.

Now you have a little custom favicon! To install your favicon, follow the instructions on this post Adding a Favicon. Since there was some sort of problem with favicons on blogger, I had to find a fix. So be sure to follow the link at the end of that post for a  easy fix.

EDIT: please post a link to your blog with your new favicon so everyone can see!!!!

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.