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 >>>

30+ Pure CSS Horizontal Menus Tutorials

The navigation menu of a website is very important for that website. It gives more attraction your website or blog.Also it will very useful to navigate through your website very easily without confusing.So every web master should give special attention for the top navigation menu of their websites.Here I listed below some of best CSS horizontal menu collection with full configuration tutorials

Attractive Subscribe Section + Search Box For Blogger

In this article,I am going to explain how to add more attractive Subscribe Section + Search Box to your blogger blog.This subscribe section is included Feedburner feed and Email subscriptions boxes,Twitter and Facebook boxes for your Twitter and Facebook profiles and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious) to share your articles among social networks.These social

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.

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.

Scroll box for putting long URL, large photos, scripts containing long unbroken lines

I have previously published posts regarding scroll box (click BACK button to get back to this page):

How to make a scroll box

Scroll box for images like photos, screen shots, etc

Scroll box for Label List

Scroll box FAQ

I am not sure if this is mentioned in the above posts, but what I have done is to save a Notepad file with different attributes to fit the width of the main column and also, to save me the bother of having to edit the script for the scroll box each time I need one with different height, I just have in the Notepad file with different heights to fit the more frequent occurrences, and inside the scroll box below is the content of the Notepad file I used:

<div style="width: 395px; height: 200px; background-color: ffffff; color: ffffc0; font-family: arial black; font-size: 10px; text-align: left; border: 1px solid 000000; overflow: auto; padding: 4px;"></div>

--------------------------

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>

--------------------------

<div style="width: 395px; height: 100px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>

<div style="width: 395px; height: 30px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>

Note that the width in the above was set to fit the width of the main column (posts) of my main blogs and you will of course have to use different values for different templates. For this, refer to How to find the width of the Header, sidebars and main column (click BACK button to get back to this page).

Now a blogger complained about the background color changing each time she edit a post. Now I am no CSS (Cascading Style Sheets), not being an IT person, but I would hazard a guess that she should look for some pseudo-elements in the template for <div> that may look something like the below:

div:background-color {color:#ff0000;font-size:xx-large}

and change the code for the color to whatever she wants. Note that this is only a guess, and if you happen to get a similar problem and have tried to solve it, your feedback by leaving a comment will be highly appreciated.

How to display underlined text

Want to underline some text in your post? It is very easy.

However, to do this, you must use the EDIT HTML mode and not the COMPOSE mode. You will need to do what they call Inline CSS (Cascading Style Sheet) which is CSS inside a HTML element. However, don't get frightened off by the technical jargon as you need not know what I mean by the above. All you have to do is to examine the HTML I used to display It is very easy inside the scroll box below and just copy what I do:

<span style="text-decoration:underline;">It is very easy</span>

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.

Centering photo, search box, etc.

Previously, the way to center something is to use the <center< tag. That has been deprecated and its use is not encourage (It will still work though, but we don't know about the future).

Now if you want to center something, you must use inline style sheet. You have to surround the "something" with <div style="text-align:center;"> and </div>

That is, you have to type it as

<div style="text-align:center;">somthing</div>

Change blog title from all uppercase to only first alphabet uppercase

The previous post Change blog title from all uppercase to all lowercase or vice-versa (click BACK button to get back to this page). This post will describe how to change a blog which has its blog title all in all uppercase to only the first alphabet of a word in uppercase, with the rest in lowercase.

This has been tested on the blog Natural Remedies which you will notice have only the first alphabet of the blog title and description in uppercase. Previously, the blog Header looked like this:



This was how the blog title and description was changed to only the first alphabet in uppercase. Before you do anything with the template, it is always wise to backup your current template PLUS the Page Elements as described in Backup New Blogger template plus Page Elements and edit template. When you are finished with what the above post instructed, you will still be in the template editor. Look for this block of codes:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Add a line

p:first-letter

to the block of codes so that it become

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
p:first-letter
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

For the blog description, look for this block of codes:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Just as above, add the line

p:first-letter

so that the block of codes become

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
p:first-letter
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Preview, and if everything is OK, save the template.

NOTE: Both the examples in the previous post Change blog title from all uppercase to all lowercase (click BACK button to get back to this page) and this post use New Blogger Minima template modified to 3 column by Hackosphere (click BACK button to get back to this page). If you are using a different template, the codes may be different or the particular lines may be missing altogether. If so, just add the necessary lines in.

Change blog title from upper case to lower case or vice versa

I use New Blogger Minima template modified to 3 column by Hackosphere (click BACK button to get back to this page) for my blog Generating revenue from your blog. Originally, the blog text title is all in uppercase font. Below is a screenshot of what it used to be:



This is how I changed the blog text title to lowercase font. I sign into Blogger (Dashboard) and see a list of blogs including "Generating Revenue from your Website". At that section, I click on LAYOUT, then click the TEMPLATE tab. Whenever, your make any changes to the template, it is always wise to backup your current template AND the Page Elements. Refer to Backup your New Blogger template PLUS Page Elements and edit the template. This is all explained in that post. After you have backup your template, you will still be in the template editor window. Look for this block of code:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

This is what is originally in the template. Note in particular this line:

text-transform:uppercase;

If you want to change the blog title font to lowercase, just change the line to

text-transform:lowercase;

so that the block of code become

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:lowercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Preview, and if you are happy with the result, click "Save template".

Different templates may have different #header. Yours may not have the line

text-transform:uppercase;

If so, and you want it in lower case, just add the line

text-transform:lowercase;

Just do the opposite of the above if your blog title font is in lowercase and you want to change it to uppercase.