Post Template

Adding code or text to every post

If adding a bit of code to every post is sufficient to do a certain job, why bother with Copy and Paste? Why not use the Post Template? You can use CSS for some things, but it's more difficult in some cases. If you're new to Blogger, it's easier to wrap your brain around the Post Template! Go to Dashboard, click on Settings. click Formatting. Go almost to the bottom of the page. Post Template is the eleventh item, I believe. Place any code or text that you wish to have in every post. Every time you create a new post, that template will take effect. If you start your post above the code, then that code will be at the bottom of each. As far as that goes, any code you wish could also be at the top of your post, as long as you're careful to put your post between the top template code and the bottom template code. You are already at the bottom of the Formatting List, but be sure to "Save Changes" before you exit.

[More below...Examples]

Below are items of code or text you might want in every post and can put it in every new post with the Post Template. These are only examples, not meant as literal recommendations—after all, I don't know you well enough! I used to put a colored line at the bottom of each post with <hr color=crimson> a <br /> (or 2 or 3 of them) would add a small blank space. You might add the codes needed in each post for your Expandable post hack or some other item of code (font size or font colors, perhaps) that you like, but hate to type in each time. You can either use it a little or a lot, depending on how comfortable you can get with it or how often you wish to have some of the same formatting in each post. The Post Template will not help you with existing (old) posts, only with ones you create after the Template has been created.

Post Template

Adding code or text to every post

If adding a bit of code to every post is sufficient to do a certain job, why bother with Copy and Paste? Why not use the Post Template? You can use CSS for some things, but it's more difficult in some cases. If you're new to Blogger, it's easier to wrap your brain around the Post Template! Go to Dashboard, click on Settings. click Formatting. Go almost to the bottom of the page. Post Template is the eleventh item, I believe. Place any code or text that you wish to have in every post. Every time you create a new post, that template will take effect. If you start your post above the code, then that code will be at the bottom of each. As far as that goes, any code you wish could also be at the top of your post, as long as you're careful to put your post between the top template code and the bottom template code. You are already at the bottom of the Formatting List, but be sure to "Save Changes" before you exit.

Below are items of code or text you might want in every post and can put it in every new post with the Post Template. These are only examples, not meant as literal recommendations—after all, I don't know you well enough! I used to put a colored line at the bottom of each post with <hr color=crimson> a <br /> (or 2 or 3 of them) would add a small blank space. You might add the codes needed in each post for your Expandable post hack or some other item of code (font size or font colors, perhaps) that you like, but hate to type in each time. You can either use it a little or a lot, depending on how comfortable you can get with it or how often you wish to have some of the same formatting in each post. The Post Template will not help you with existing (old) posts, only with ones you create after the Template has been created.

Table for Horizontal Photos In Post

Ronald	Southern

Haven't done any of those in a while. Tedious.

[Those of you wishing to cut to the chase quickly, start reading below the fourth straight red line below.]

Below is the code that makes a small table like the one above have photos side by side:

<center><table border=4 width=95%><tr><th align=center>Ronald</th> <th align=center>Southern</th></tr><tr><td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYWmbzDx0ZTNhzkxcnvD1E8roURVwVz91WLs1tbj9CR7Hm7k_MxFNEzWtzGtqjXTACBfVpxPN89G28V9DhtDv50-fAKL24BcsM5UOZxSYweUFjdFcrVBf9EZrXSqsPwipoki46n9NWSo/s1600/twinkiebite.gif\" /> </td> <td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYWmbzDx0ZTNhzkxcnvD1E8roURVwVz91WLs1tbj9CR7Hm7k_MxFNEzWtzGtqjXTACBfVpxPN89G28V9DhtDv50-fAKL24BcsM5UOZxSYweUFjdFcrVBf9EZrXSqsPwipoki46n9NWSo/s1600/twinkiebite.gif\" /> </td></tr></table> </center>

---

A MORE SIMPLISTIC SAMPLE OF A TABLE (followed by its code) is shown below:

PICTURE

OR TEXT

<table border=2>
<tr>
<td>PICTURE</td>
<td>OR TEXT</td>
</tr>
</table>

---

PREVENT LINE BREAKS:

In order for the Table not to cause extra line breaks in Blogger posts, there are two methods:

Method #1: You may need to copy it out like this (no line breaks of your own):

<table border=2><tr><td>PICTURE</td><td>OR TEXT</td></tr></table>

--To create additional row(s), add another set of "table records" such as

<tr><td>picture or text</td></tr>

as needed. Place them after the first table record and before the end tag, </table>.

--Remember that the photos cannot exceed the width of the area where you are placing them or else it will create problems, probably your sidebar being pushed down.

---

Method #2: This is something I've tried a number of times now. It does seem to be very effective, especially if you're going to use tables often. It is not good, though, for creating a table around a list (numbered or otherwise) because it will remove the page breaks and show the list as if it's a regular paragraph. It'll make the info resemble a traffic jam. This method makes the change in this way, using css:

Table Formatting In CSS

---

My explanation of the Table Formatting (Method #2) which I learned from the site above is as follows--changing the table in the CSS: Place the following line of code in your CSS: .nobr br { display: none } Then place the DIV tags around your table as below: <div class=nobr> <table border=2> <tr> <td>PICTURE</td> <td>OR TEXT</td> </tr> </table> </div>

Table for Horizontal Photos In Post

Ronald	Southern

Haven't done any of those in a while. Tedious.

[Those of you wishing to cut to the chase quickly, start reading below the fourth straight red line below.]

Below is the code that makes a small table like the one above have photos side by side:

<center><table border=4 width=95%><tr><th align=center>Ronald</th> <th align=center>Southern</th></tr><tr><td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYWmbzDx0ZTNhzkxcnvD1E8roURVwVz91WLs1tbj9CR7Hm7k_MxFNEzWtzGtqjXTACBfVpxPN89G28V9DhtDv50-fAKL24BcsM5UOZxSYweUFjdFcrVBf9EZrXSqsPwipoki46n9NWSo/s1600/twinkiebite.gif\" /> </td> <td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYWmbzDx0ZTNhzkxcnvD1E8roURVwVz91WLs1tbj9CR7Hm7k_MxFNEzWtzGtqjXTACBfVpxPN89G28V9DhtDv50-fAKL24BcsM5UOZxSYweUFjdFcrVBf9EZrXSqsPwipoki46n9NWSo/s1600/twinkiebite.gif\" /> </td></tr></table> </center>

---

A MORE SIMPLISTIC SAMPLE OF A TABLE (followed by its code) is shown below:

PICTURE

OR TEXT

<table border=2>
<tr>
<td>PICTURE</td>
<td>OR TEXT</td>
</tr>
</table>

---

PREVENT LINE BREAKS:

In order for the Table not to cause extra line breaks in Blogger posts, there are two methods:

Method #1: You may need to copy it out like this (no line breaks of your own):

<table border=2><tr><td>PICTURE</td><td>OR TEXT</td></tr></table>

--To create additional row(s), add another set of "table records" such as

<tr><td>picture or text</td></tr>

as needed. Place them after the first table record and before the end tag, </table>.

--Remember that the photos cannot exceed the width of the area where you are placing them or else it will create problems, probably your sidebar being pushed down.

---

Method #2: This is something I've tried a number of times now. It does seem to be very effective, especially if you're going to use tables often. It is not good, though, for creating a table around a list (numbered or otherwise) because it will remove the page breaks and show the list as if it's a regular paragraph. It'll make the info resemble a traffic jam. This method makes the change in this way, using css:

Table Formatting In CSS

---

My explanation of the Table Formatting (Method #2) which I learned from the site above is as follows--changing the table in the CSS: Place the following line of code in your CSS: .nobr br { display: none } Then place the DIV tags around your table as below: <div class=nobr> <table border=2> <tr> <td>PICTURE</td> <td>OR TEXT</td> </tr> </table> </div>

Where Is "Style" In New Blogger?

When you open the template, move to the Edit Html tab and click it. Search for "Body" and other Style (CSS) items that you might already be familiar with from Classic Blogger, though they are not called "Style" any more in New Blogger templates! (Note: CSS stands for Cascading Style Sheets). You might see something like this: body { background:oldlace; url("http://www.blogblog.com/harbor/rocks.jpg") no-repeat right bottom; background-attachment:fixed; margin:0; padding:0; font:x-small Georgia, Serif; color:$textcolor; font-size/* */:/**/small; font-size: /**/small; } At that point you are in the Style (or CSS) section.

END.

Where Is "Style" In New Blogger?

When you open the template, move to the Edit Html tab and click it. Search for "Body" and other Style (CSS) items that you might already be familiar with from Classic Blogger, though they are not called "Style" any more in New Blogger templates! (Note: CSS stands for Cascading Style Sheets). You might see something like this: body { background:oldlace; url("http://www.blogblog.com/harbor/rocks.jpg") no-repeat right bottom; background-attachment:fixed; margin:0; padding:0; font:x-small Georgia, Serif; color:$textcolor; font-size/* */:/**/small; font-size: /**/small; } At that point you are in the Style (or CSS) section.

END.

Centering Header Image

A. First try making the image the right size

To center image in the header, use a photo program to resize the width of the image to fit the size of the header. To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

[More below...]

B. Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Selection A would then be the better choice. #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 1000px; text-align:left; }

Hopefully you made a safety copy of your template before you started monkeying with the code or making any changes--you know, in case all hell breaks loose and you need to rescue yourself!

Centering Header Image

A. First try making the image the right size

To center image in the header, use a photo program to resize the width of the image to fit the size of the header. To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

B. Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Selection A would then be the better choice. #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 1000px; text-align:left; }

Hopefully you made a safety copy of your template before you started monkeying with the code or making any changes--you know, in case all hell breaks loose and you need to rescue yourself!

Use CSS To Align Header Text

Text-align: center/left/right

Header Alignment
Setting alignment for the header has to be done in the template. The first section below of CSS instructions (from my blog, "The Rat Squeaks") does various things including that it sets the blog title to be centered. .Header h1 { margin:0 0 .25em; color:$titlecolor; font: $pagetitlefont; font-variant: small-caps ; text-align: center; }

[More below...Description alignment]

Description Alignment
Not far behind it comes this section for parameters of the Description, also setting the alignment to Center: .Header .description { margin:0; max-width:700px; line-height:1.8em; text-transform:none; text-align:center; letter-spacing:.2em; color:$titlecolor; font: $blogDescriptionFont; }

Your template may vary, so I can only give this example of where and how to find/place these CSS instructions. Use the exact formula if you are placing a new instruction there. Examples given below:

text-align:center; text-align:left; text-align:right;

END.

Use CSS To Align Header Text

Text-align: center/left/right

Header Alignment
Setting alignment for the header has to be done in the template. The first section below of CSS instructions (from my blog, "The Rat Squeaks") does various things including that it sets the blog title to be centered. .Header h1 { margin:0 0 .25em; color:$titlecolor; font: $pagetitlefont; font-variant: small-caps ; text-align: center; }

Description Alignment
Not far behind it comes this section for parameters of the Description, also setting the alignment to Center: .Header .description { margin:0; max-width:700px; line-height:1.8em; text-transform:none; text-align:center; letter-spacing:.2em; color:$titlecolor; font: $blogDescriptionFont; }

Your template may vary, so I can only give this example of where and how to find/place these CSS instructions. Use the exact formula if you are placing a new instruction there. Examples given below:

text-align:center; text-align:left; text-align:right;

END.

Background Color Of A Post

Classic Blogger:

In your template, just before the </style> occurs (the end tag), place the couple of lines below (which you can change to your colors or fonts). This will just be an example you can start with as a test. This paragraph demonstrates what the code below causes.

#birdlist {margin:0px;padding:0px;background:navy;color:lightblue;font: 1.1em "Times New Roman","Trebuchet MS",Trebuchet,Verdana,Sans-Serif; font-weight:none; }
</style>

After that is established in the template, any time that in your post you place <p id=birdlist> at the beginning and </p> at the end of that text, you will create the font color and background color that you want. You might change navy to white and lightblue to black, depending on what you want. If you don't invoke the paragraph id in your post, it will just write in black over your current background (if any).

Don't be tripped up by the list of fonts; the computers in the world will choose the first one they come to that they possess. So if you choose a really new and esoteric font, you may be the only reader who sees it in just that font. But they will see it in the second, third, or fourth font listed.

New Blogger

The main difference here is that you don't make the addition in the same place. When you open the template, you need to search for the Style items that you know, though they are not called that! Search for "Body" and other style (CSS) listings that you might already be familiar with. You might see something like this: body { background:oldlace; url("http://www.blogblog.com/harbor/rocks.jpg") no-repeat right bottom; background-attachment:fixed; margin:0; padding:0; font:x-small Georgia, Serif; color:$textcolor; font-size/* */:/**/small; font-size: /**/small; } Put the additional (birdlist) lines after the above, but BEFORE the closing } bracket. There are other places that would be correct, and I'm just pointing out one. This #ID is not limited to paragraphs; it could also be applied to a <div>, etc.

THE END.

Background Color Of A Post

Classic Blogger:

In your template, just before the </style> occurs (the end tag), place the couple of lines below (which you can change to your colors or fonts). This will just be an example you can start with as a test. This paragraph demonstrates what the code below causes.

#birdlist {margin:0px;padding:0px;background:navy;color:lightblue;font: 1.1em "Times New Roman","Trebuchet MS",Trebuchet,Verdana,Sans-Serif; font-weight:none; }
</style>

After that is established in the template, any time that in your post you place <p id=birdlist> at the beginning and </p> at the end of that text, you will create the font color and background color that you want. You might change navy to white and lightblue to black, depending on what you want. If you don't invoke the paragraph id in your post, it will just write in black over your current background (if any).

Don't be tripped up by the list of fonts; the computers in the world will choose the first one they come to that they possess. So if you choose a really new and esoteric font, you may be the only reader who sees it in just that font. But they will see it in the second, third, or fourth font listed.

New Blogger

The main difference here is that you don't make the addition in the same place. When you open the template, you need to search for the Style items that you know, though they are not called that! Search for "Body" and other style (CSS) listings that you might already be familiar with. You might see something like this: body { background:oldlace; url("http://www.blogblog.com/harbor/rocks.jpg") no-repeat right bottom; background-attachment:fixed; margin:0; padding:0; font:x-small Georgia, Serif; color:$textcolor; font-size/* */:/**/small; font-size: /**/small; } Put the additional (birdlist) lines after the above, but BEFORE the closing } bracket. There are other places that would be correct, and I'm just pointing out one. This #ID is not limited to paragraphs; it could also be applied to a <div>, etc.

THE END.

Hide Navbar?

FOR CLASSIC (OLD) BLOGGER
How to hide the Blogger Navbar at the top and why not to: Hide Navbar! http://blogger-tricks.blogspot.com/2006/04/tip-hiding-navbar.html

OR FOR NEW BLOGGER

The css is defined between <b:skin><![CDATA[/* and ]]></b:skin> </head> So put the following 5 lines of code in the css: #navbar-iframe { height:0px; visibility:hidden; display:none } before: ]]></b:skin> Despite references above or arguments against it, I no longer recommend caution about hiding the Navbar because Blogger has no right to inflict the violence or pornography that Next Blog sometimes inflicts on users. They should make that aspect of the Navbar optional for us so that schools, churches, and old ladies of every kind can choose not to play if they don't want to.

END.

Hide Navbar?

FOR CLASSIC (OLD) BLOGGER
How to hide the Blogger Navbar at the top and why not to: Hide Navbar! http://blogger-tricks.blogspot.com/2006/04/tip-hiding-navbar.html

OR FOR NEW BLOGGER

The css is defined between <b:skin><![CDATA[/* and ]]></b:skin> </head> So put the following 5 lines of code in the css: #navbar-iframe { height:0px; visibility:hidden; display:none } before: ]]></b:skin> Despite references above or arguments against it, I no longer recommend caution about hiding the Navbar because Blogger has no right to inflict the violence or pornography that Next Blog sometimes inflicts on users. They should make that aspect of the Navbar optional for us so that schools, churches, and old ladies of every kind can choose not to play if they don't want to.

END.