How to Split Blogger Header into 2: Pre- & Post Template Designer

There are 2 methods depending on whether your Blogger template is pre-Template Designer or already using the new Template Designer templates.

1. Pre-Template Designer: How to split blog header into 2 (if you are on the main page, click Read more first)
2. Post-Template Designer: How to split blog header into 2 (if you are on the main page, click Read more first)
Read rest of post >>>

Template Designer: How to increase entire blog width beyond maximum

The new Blogger Template Designer has made it very easy to change overall blog width as well as the width of the main column and the sidebars. All you need to do is to sign into Dashboard, click DESIGN > TEMPLATE DESIGNER > ADJUST WIDTH and you will be provided with sliders to drag and drop to whatever values your heart desires, then click APPLY TO BLOG to save the new settings (see screenshot below):



Not only that, you can view the result of your selected changes below and if horrified by your changes, just click RESET WIDTHS TO TEMPLATE DEFAULT. (Note that while there is no slider to adjust the width of the main column, it would be indirectly set by the overall width - whatever width you have set for the sidebar)

However with the Simple (and I believe the others too) template, the overall width is limited to maximum 1000px. So what do you do when you want your overall blog width to be greater than 1000px.?

Update: It may be interesting for you to read the comment by Vanja Milicevic and my responses before you change your blog width to wider than 1000px. However, if you have specific reasons for not worrying about getting that inconvenient horizontal scroll bar like for example you upload a lot of large photos, it may still be a good idea to have a wider template and main column

Well, while in the DESIGN tab/mode, click EDIT HTML to open the template editor and search for these codes (use ctrl+ F and search for, say, <b:template-skin> or any portion of the codes below:

<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

then change that 1000px to whatever values you fancy and you would have changed the overall blog width.

BTW the default for the overall blog width is 930px which is roughly the value you would need to set in order to optimize your blog for 1024x768 screen resolution which is what many web designers are doing because the previous lowest denominator 800x600 screen is now used by very few people.

Styling the blog date header

A reader asked: " I really want to make a different date header!"

Well this can be done via editing the Read rest of post >>>

How to center post title (customization)

If you want to center (or align left or align right) the post title, sign into Dashboard > DESIGN > EDIT HTML to open the template editor and search for .post h3 (use ctrl+F) or code that may look something like those below (code below for Minima template, yours may be slightly different):

Reminder: Always backup template and backup gadgets before editing the template.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

The just add this line text-align:center;

.post h3 {
text-align:center;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

preview and if OK, save template.

Update: Different template may define post title differently. For example, a commentator found that for her, it was
h3.post-title {

If you want to align the post title to the left or to the right, just substitute text-align:center; with either text-align:left; or text-align:right;

Note: If you can't find the relevant code, let me know what template you are using via my contact form

How to hide blog date header

While blogs started as web logs or weblogs (chronological publication of personal thoughts or diary) and thus characteristically have a date header like the one above this post, but because blogs have now become a convenient way of putting content online, many have been using blogs for other purposes more like a typical website, many bloggers want to get rid of the typical date header.

That is not difficult to do. Sign into Dashboard > Design > Edit HTML to open the template editor and look for the block of code like the one below (for the Minima template, yours depending on your template may be slightly different):

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

and just add this line: visibility:hidden; for example like below:

/* Posts
-----------------------------------------------
*/
h2.date-header {
visibility:hidden;
margin:1.5em 0 .5em;
}

and the date header will be gone.

How to change post title background color with template designer

"And how can I give my post title a colour background?"

The first thing I thought of trying is to go to LAYOUT > FONTS AND COLORS as described in my previous post Changing fonts and colors for New Blogger (xml).

However, Blogger for better or for worse is constantly evolving and the LAYOUT tab is no more, replaced by a DESIGN tab and apparently have moved the template designer from Blogger in Draft to standard Blogger.

I believe that it is still possible to edit the template direct to add CSS (Cascading Style Sheet to control the post title background but found that Blogger Template Designer has provided a "Advanced" option to do that via the template designer with INSTANT PREVIEW. And apparently some of the functions of the new Blogger Template Designer can be used even if the template you are using for your blog has not been designed with Blogger Template Designer
Read rest of post >>>

Create sub-domain with custom domain

If you are just interested to know how to create sub-domain, skip directly to How to create sub-domain

A blogger's complaint that the static page he created has unwanted expandable post summary (if I understand him correctly is the push I needed to finally write this post on sub-domain. He suspect it may have something to do with the fact that he is using a template with built-in expandable post summary (again if I understand him correctly. He may be right but it looks that the static page one created via Blogger uses the same template.

Anyway I figure his solution might be to abandon blogspot and upgrade to custom domain and create a sub-domain instead as the sub-domain can use any template which may or may not be the same as the original. It is practically a separate independent website. Look at the one I created recently faq.bloggertipsandtricks.com/ (still under construction). If you go to BT&T FAQ which is the title of that sub-domain, you may see me using the same template, but the blog title, sidebars, etc are different from Blogger Tips and Tricks.

A bit more rambling. While for a long time, Blogger.com was negatively compared with Wordpress, since it abandoned the old classic template and forced everyone to upgrade to the new Blogger xml templates, Blogger has improved by leaps and bounds. Not only that, now coupled with Google Apps, you have a very easy "content management system" to create many things without getting too technical. In fact, I know that Google (here in Malaysia anyway) is working with a students from a University to help SME (Small and Medium Enterprise) using Blogger and Google Apps to create >websites for businesses.

How to create sub-domain

Read rest of post >>>

Create static Blogger Pages for Contact Form, About, privacy, etc

Definition of static page: A web page that is not modified by an application server before the page is sent to a browser. and do not employ dynamic technologies (like PHP, ASP, Perl...).

"I'm new to blogging, how do you create a contact me form on a separate page on your blog, without it showing up as a post or in the Archives."

The above question is the kick I needed to finally write this post about Static Pages which will be very useful for stuff like contact form or an About page, etc. especially if you don't want them to appear in the blog archive or irritate those who subscribe to your RSS feed with too much notifications as static pages will not be part of the normal post although the way to create these static pages is almost the same as ordinary posts.

To do this currently, you must switch to Blogger in Draft (UPDATE: According to Sean McCullough: Blogger Buzz, PAGES is no longer confined to Blogger in Draft to, and you can now create static PAGES in your standard Blogger Dashboard) and sign into your Blogger account and click on the New Post tab to open the post editor. However, this time, you will see an extra tab in the Blogger in Draft post editor, namely Edit Pages tab and below that, a NEW PAGE tab.



Clicking NEW PAGE will open the PAGE EDITOR which looks exactly like the normal post editor except instead of POST TITLE there is a field for entering the PAGE TITLE. Prepare the static page just like you would a normal post and click publish. You would then choose get the link to the static page either in BLOG SIDEBAR or as BLOG TAB below the header or NO GADGET (link pages manually)



Click SAVE AND PUBLISH and your static page will be publish but not as normal post which will appear in the blog archive and will not trigger your RSS feed to inform your subscribers that there is a new "post".

I have chosen for this blog, NO GADGET (link pages manually) and what you will see in this blog header is the horizontal navigation bar I manually added and which currently has 3 tabs, | HOME | CONTACT | PRIVACY POLICY | of which only one CONTACT is a static page. The other 2 were created earlier as ordinary post (I may change it later).

If you want to link pages manually, refer to Creating simple text horizontal navigation bar. One advantage of using this option is that you can link to any website you choose like what I have recently done and will not be constraint to only pages create in this blog which would be the case if you choose the following 2 options.

To show you what the other 2 choices would look like, refer to the screen shots below:

Static page tabs (HOME CONTACT PRIVACY) in sidebar

Now I experiment with dragging the Pages gadget from below the blog Header right into the blog Header itself, hoping to create a horizontal menu bar inside the blog Header itself, but unfortunately that is not to be, for the horizontal tabs arrangement change into a vertical one (see screen shot below). If you prefer the pages tabs created by Blogger to be within the Blog Header, you will have to use the manual method plus create a horizontal navigation bar.

Static Pages tabs (HOME CONTACT) changed into vertical bar of tabs

Related posts:

How to include active link to your Twitter page in navigation bar

Simple text horizontal navigation bar

Skip to instructions if you are only interested in reading the instructions on how to do create the navigation bar. You may also be interested in How to create static pages as things like contact forms, About this blog, etc is ideally suited to using Pages and the horizontal navigation bar.

Preamble

There are 2 things that we want in designing a blog or website. One is to make it easy for visitors to find content and the other is to make full use of the portion above the fold. And both of these can be fulfilled by creating a horizontal navigation bar either just below the Header or even within the Header itself.

Because I am comfortable with tables (<table>) I have used I have used table to create horizontal navigation bar before. However, current opinion is table should be used for data, and navigation bar which contain links are not data and the proper HTML tag to use for navigation bar should be list (<ul>). This has to do with web sematic which I think relates to how a computer, not a human, see a website. However, this will involve CSS (Cascading Style Sheet) and a lot of coding. The method I am going to describe here just use a simple <div> tag and http://bloggerfordummies.blogspot.com/2008/07/dummies-guide-html-tutorial-hyperlink.html" target="_blank">hyperlinks and is simple to do.

I am not a trained programmer so don't know yet the significance of web sematic and don't know yet what is the significance of using this method on the blog, SEO, whatever, but any significance I doubt it will have a large bearing on the blog, and I quite like the simplicity. If you have doubts regarding using this method, perhaps you can wait until I publish a new post on using CSS. In the meantime, I am very happy using this method for my blog.

How to create simple text horizontal navigation bar without CSS

Step 1: extra "Add a gadget" in the LAYOUT for the blog Header. Briefly, this just involved the simple step of finding editing showaddelement='no' to showaddelement='yes' in the template.

Step 2:Go to LAYOUT, click ADD A GADGET in the blog Header section and choose a HTML/Javascript gadget (formerly called page element). Then type in this HTML, with any number of links you wish(the first code is just to show how it is done, the following codes are to show how to make it look better):

<div>
<a href="URL 1">Link 1</a>
<a href="URL 2">Link 2</a>
<a href="URL 3">Link 2</a>
</div>

where you should change the URL and the "Link 1" to any text that describe the page you want to link to like HOME, ABOUT US, etc.

Now if you use the code above, the links will all be bunched together. If you don't like that, you will have to add space by using the space bar. You can only use the space bar once. If you want to add more space, then you will have to type where nbsp stands for non breaking space.

Further, you may also want to consider putting a vertical bar | (one with the backslash key) to separate the links like what I have done for this blog. I have also experimented with [ ] as separator and if you want to see how it looks, refer to FAQ for Blogger Tips and Tricks

The codes for the above will be something like this:

<div>
| <a href="URL 1">Link 1</a> |
| <a href="URL 2">Link 2</a> |
| <a href="URL 3">Link 3</a> |
</div>

Step 3:If you are happy with the navigation bar above the Blog Title, you may leave it as it is. Otherwise, go back to LAYOUT and drag the gadget to wherever you want.

If you still want to embellish the navigation bar, perhaps you may want to add background color to distinguish the navigation bar from the rest of the blog Header. You can add an attribute background-color:red to the div tag like this

<div style="background-color:red;>
| <a href="URL 1">Link 1</a> |
| <a href="URL 2">Link 2</a> |
| <a href="URL 3">Link 3</a> |
</div>

I have used the example red for the color, but you can use any color or use HTML color code #E1E1E1; for more color choices. For tasks related to color, I have found the free Iconico Color Pic and Color Blender invaluable. For color, I may write a general blogging tip on colors for blog later. In the meantime, this getting started with Color Pic may be useful.

Creating Contact forms with Kontactr (plus comparison with Google Docs)

Rather than publishing your email address which may attract robotic email harvesters and spam, it is wise either to display a graphic of your email address or even better, a contact form (which I have done at Contact form for Blogger Tips and Tricks which don't reveal your email address. This post will discuss the pros and cons of using either plus how to use Kontactr for your contact form. I think I will leave a post about how to use Google Apps for contact forms till later since I have opted for Kontactr for contact form.

Kontactr for contact form

It is very easy to create a contact form with Kontactr. All you need to do is to sign up for an account, using the email address which you wish to receive emails sent from the contact form. On successful registration, an email will be sent to that email address with an activation link which you must click to activate your account. If after some time you still haven't receive the activation email, click RESEND and it will be sent to you again.

Once your account is activated and you successfully signed in, there will be a total of eight choices out of which 3 will send your respondent to Kontactr's website and the other 5, your respondent will not leave your website. I have put demonstration contact forms, links and buttons over at my test blog with the eight possibilities in the exact order as they occur over at Kontactr

The very first one is uses AJAX Embed Widget and is highly recommended.



You can also customize the color to blend with your website's colors. All you need to do is to copy and paste the script into the post editor and publish the post and if you want the contact form in a post or alternatively, into a HTML/Javascript gadget (page element) if you want it in your footer, sidebar or whatever, but the place where you embed it must be wide enough to contain the contact form. However, the good thing is it will not send your respondent to Kontactr website, but will remain in your website.

The last one at the bottom of the page is the HTML embed widget which I do not recommend



as you will have to edit the HTML to get rid of all the line breaks, otherwise you will get lots of blank spaces above your contact form.

Somewhere in the middle of the page will be the codes for the "button contact form" which is what you should choose if you don't want a large contact form and a little non space invading button that fits nicely into a little space in your sidebar. Don't take those three codes on the left. Pick any of those 3 "KPU form" with KPU a short for Kontactr Pop Up. If you install these either somewhere in a post or in the sidebar or anywhere, clicking on the button will cause the contact form to pop up with the respondent staying on your site.

Pros and cons of using Google Docs and Kontactr for contact forms

I have used Kontactr before for contact forms for other blogs except for this blog until recently. In fact, I made a small donation to Kontactr in gratitude.

Kontactr: Kontactr gives a "true contact form" in the sense that when someone enters his true email address into the Kontactr contact form, what you receive is actually an email from that email address and not a message from Kontactr that someone has sent you a message and you have to go to Kontactr's website to read the message. With that email message, if you so choose, you can respond direct to that email address. In addition, Kontactr provides a captcha (word verification) to help you reduce spam from the contact form.

What I don't like is that you will be dependent on Kontactr, a third party not as big or as strong as the mighty cash cow Google. If Kontactr services or website goes offline, there goes your contact form. Not many people provide services and products for charity, and if a provider is not making any money or worst, losing money, it is very likely to cease to provide support. This is exactly what happened in the case of a Philippine online favicon generator and host.

Google Apps: While Google Docs is still a third party provider, I have confidence in Google Apps because it is backed by that cash cow Google and so unlikely to go bust anytime. Another pro if you consider it a plus is that all the fields created in that contact form when someone fill in and submit will go to an online Google Spreadsheet which tabulates them neatly into searchable rows and columns. That can be mighty handy for you to organize all the data collected.

Unfortunately, using Google Docs don't give you a "true" contact form because it only provide you with the possibility that when someone fill in that contact form, an email message is sent to you plus a link to read the fields (such as name, email address, message) that you included in the contact form at the Google Spreadsheet that is created when you create that contact form.

Make blog into a website

The title of this post could just as well be How to remove the time stamp, etc or Configure blog post. Let me explain.

This post is inspired by a blogger's question - how to remove the time stamp. I don't know his motivation for wanting to remove the time stamp, but I suspect that it is likely to be that he wants it to look more like a website than a blog. Which takes us to the question, what is the difference between a website and a blog?

Let me just quickly state what to me are some characteristics of a blog without going into controversies and then described how to remove those characteristics of a blog such as "time stamps", "posted by ....", comments, etc. so that they look more like a "website". Update: to those characteristics, perhaps I should also add Hide navbar.

Blogger with the "drag and drop" LAYOUT (New Blogger xml template) has made this very easy. All you need to do is to sign into Blogger (Dashboard), click on LAYOUT, then click EDIT in the BLOG POST section (see screen shot below):



Clicking on EDIT will then give you a window to CONFIGURE BLOG POSTS where you can just simply remove the ticks against those elements which you do not want to appear in your blog (see screen shot below):



The above screen shot showed all the elements (Day and Date, Posted by, time stamp, comments, trackbacks {links to this posts}, labels, quick edit icon) characteristic of a blog post removed (unticked). You can see an example of how such a blog will appear at Computer and Internet. I have left the other "give away's" like blog archive intact. The things you would notice missing are Day and Date accompanying the post title and the time stamps, "posted by", comments, labels, etc. at the bottom of the posts. This leave just the title and the post body.

Perhaps later I will elaborate more on the difference between a blog and a website and an illustration of what I mean.

How to center date header and change font size

"Do you know how centre the date?????"

Open the template editor by going to Dashboard > Layout > Edit HTML and look for these codes:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

and change it to

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
}

and if you also want to change the font size, add this line - font-size:200% or font-size:12px; or whatever values you wish, so that the codes become

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
font-size:200%;
}

Easy favicons ready to use

A Favicon (short for FAVorite iCON) is a little image displayed in the browser address bar and tabs or in bookmarks, like this in the address bar of this webpage above.

The very first step to installing a favicon is the creation of the image to use for the favicon which if you trying to create in the small size allowed for favicons, is no easy task (unless you use an existing photo and shrink it to size like mine )

To cut the hassles, Favicons4free have created a huge library of ready to use favicons together with the codes you need to install them. Just click on one of the categories (examples - animals, flags, birds, etc.) and in the new page, copy the single line of code next to the favicon you want,


then go to the template editor and paste the code just after ]]></b:skin> and just before </head>, preview and if everything looks all right, save template. (span style="color:red;">

Note that the codes given by Favicon4free is not compatible with XHTML which requires ALL HTML tags to be closed. For example, the given code is

<link rel="shortcut icon" href="http://www.Favicons4Free.com/icons/flags/malaysia.ico">

You will have to add a matching closing tag </link> at the end of the code so that it become

<link rel="shortcut icon" href="http://www.Favicons4Free.com/icons/flags/malaysia.ico"></link>

or alternatively edit the tag to include a backslash / to make the tag self-closing, like this:

<link rel="shortcut icon" href="http://www.Favicons4Free.com/icons/flags/malaysia.ico" />

(note the space in front of the backslash / and the (red) backslash itself just before the last "greater than" symbol.

This was tested on a blog Guide to Malaysia for which the country's flag was selected for the favicon.

Change sidebar title background color

A blogger asked: "I want to add background colour to the sidebar title / header. pls show me the way.".

Well, that is not too difficult. Sign into Blogger (Dashboard), click LAYOUT > EDIT HTML to open the template editor and search for this:

.sidebar h2 {
etc. etc.
}

etc. etc. means whatever may be in between { and } but which is not relevant to this post

Edit it (add a line) to read

.sidebar h2 {
background-color:blue;
etc. etc.
}

If you cannot find

.sidebar h2 {
etc. etc.
}

Then just add this:

.sidebar h2 {
background-color:red;
}

(or any color rather than red or any other HTML color code

to anywhere before

]]<>/b:skin<

but preferably just after:

/* Sidebar Content
----------------------------------------------- */

so that it is together with others in the template which is related to the sidebar. That section of the template will then look like this:

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
background-color:red;
}

Note: My aim is to make this blog easy to understand, so if the above is difficult for you to follow, do make a comment and let me know what is the source of your difficulty.

Related post: How to change background color of sidebar

Baby customization step: Header background color

A vast majority of bloggers like unique template different from, and distinquishing their blog from other blogs. Many too likes fancy graphics. I on the other hand prefer simple template with no graphics and I use the no frills Blogger standard Minima template as this is a blog which soughts to provide useful information and simple easy to understand instructions. So far, the only substantial customization is to convert the standard 2 column Minima template to 4 column Minima template.

Today, I went a teeny weeny step more by changing the Header background color to #5588AA; which is the same blue color for the hyperlinks. All I need to do is to change the following in the template (via EDIT HTML in the LAYOUT):

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header-wrapper {
width:100%;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

to

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
background-color:#5588AA;
}

#header-wrapper {
width:100%;
margin:0 auto 10px;
}

Please tell me what you think of this teeny weeny customization by leaving a comment:

Extra Add a gadget (page element)

The standard 2 column Blogger template have only 3 ADD A GADGET (page element) as shown in the screen shot below:



It is useful to have extra ADD A GADGETs in the blog Header, below the blog Header and in the main column as shown in the screen shot below:



Examples what I use them for is the Google custom search at the top of the main column and the AdSense link units below this blog title. A blogger also wanted to add a Marquee like the one above the blog title in the demo blog. This can be done by adding extra ADD A GADGET. To do this, go to LAYOUT, click EDIT HTML. This will take you to the template editor. Look for showaddelement. Change showaddelement='no' to showaddelement='yes'. If there is a a maxwidgets='1' in front of the showaddelement. Change it to maxwidgets='2' or more or even leave it as maxwidgets='' (unlimited number). If you have problem looking for the above, press ctrl+F and search.

The above (searchbox, ad unit, marquee) were added using a HTML/Javascript gadget. Whatever you add can be dragged to any sections of your blog using your mouse.

Change main background color for Rounders template blogs

A blogger complained in my post How to change blog background color, fonts, etc that she could not find the option to change the main background color. I check the only blog I have which uses the Rounders template - Kids and teens - Tips and Tricks and confirmed that there was no option to change the main background color.

So while signed into my Blogger account and at the blog, there should be a "Customize" link at the top right corner of the page. I clicked "Customize" which gets me into the LAYOUT. I click the EDIT HTML sub-tab which opens the template editor. I found this code in the CSS (Cascading Style Sheet) of the template:

/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#333" value="#333333">

and changed value="#ffffff" to value="#000000", preview and saw that the left sidebar and the main column (posts) background have changed to black. The right sidebar color remained original. So I discovered a way to change the main background color. However, since I have no intention to really change the color, I just click "Clear Edit" to get rid of the change and left the blog as it is.

If you want to learn more about HTML colors codes and how to get them, refer to HTML color codes, color charts and color pickers

If you have intention to change, perhaps you should also changing default="#fff" to some other color (note: the HTML color code #fff in this case contain only 3 alphabets {it can also be numeric}, but you can put either 3 or 6 alphabets or numerics or combination depending on what color you want, preview and see what changes you get. I have no interest, so I did not try.

IMPORTANT: It is always wise to backup your current template PLUS any Page Elements that can be backup before you tamper with the template. See Backup template PLUS Page Elements and edit template.