Free Premium Business Blogger Templates Collection

In this article I have listed below premium quality free blogger templates collection for business purposes.All of the templates listed here have premium look and features like Horizontal Navigation Menus,Auto Read More Feature with Thumbnails, Header Ads banner, Search Box, Featured content sliders,Favicon support, Numbered Page Navigation Hack Installed and more...You can download all of these

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.

LK Magazine v3 Premium Blogger Template

This is the Third version of LK Magazine Blogger Template Series.I corrected many weaknesses of LK magazine v2 blogger template and add some features from Prozine Blogger Template to this template.To configure this template correctly, read the instruction given below.Like LK Magazine v2 blogger template,I think you will like this blogger template very much.The features of this template as given

Prozine v1 Premium Blogger Template

This blogger template is a another magazine style premium blogger template created by me.You can download this template completely free.To configure this blogger template completely, please read the configuration guide below.I hope you will like this Prozine v1 Premium blogger template very much.Template FeaturesColumn: 3 Columns/2 Sidebars/Right Sidebars.Fixed Width Template (1000px width).1

Pure Magazine V1 Premium Blogger Template

This is a magazine style free premium blogger template created by me.It has many advanced features, you can see in a blogger template.I hope you will like it very much.To configure this template read the instructions given below.And also read the instruction inside the downloaded zip file.Template FeaturesColumn: 3 Columns/2 Sidebars/Right SidebarsFixed Width Template (1000px width)2 Horizontal

3 Blogger Business Card Templates - Your Online ID Cards

In the this highly competitive 21st century, you must have your unique online identity, which can be accessed from anywhere in the world. By registering your own name as a domain name you get an edge over others during interviews and business deals. So make sure that you do have your unique domain where you can host your profile, achievements etc.


To make a business card like website, all you need is a domain with your name in it and a webhost where you can host your website. As it is highly possible that your name has been already registered, so try some different combinations of your name like these:
yourname.com or your-name.com (around $10 per year)
yourname.me or your-name.me (around $10 per year)
yourname.im or your-name.im (around $11 per year)
yourname.name or your-name.name (around $9 per year)

You can register these domain names from www.Name.com

You may add some other words too, like DrJade.com, PainterJohn.com, WriterAlen.com etc.

Once you register the domain, you need to host a website at that domain. For that, either you can buy web space from any web-host or simlpy redirect your domain to Blogger. Read these articles on how to use custom-domains with blogger:

1. Blogger Custom Domain, Unlimited Hosting And Bandwidth For Free
2. Blogger Custom Domain - Subdomain vs. Naked Domain (Use Both)

So, once you are ready with the domain and a blog, your next job is to give a it a professional business card look. For that, download and use any of these templates:


The Antagonist


DEMO | Instructions | Download



Visiting Card


DEMO | Instructions | Download



MiniCard


DEMO | Instructions | Download


Read the correct way to change your Blogger Template.

Image Credits: WD-Depot

Divide footer into 3 column

A blogger: "I want to divide footer into 3/4 columns as like in your 'goodcomputersoftware.blogspot.com'

The above demo blog uses template from Ourblogtemplates.com. If you just want to modify your existing template, Amanda of BloggerBuster has a very good instructions at How to add 3 columns to your footer which should work for any template as the new columns uses fluid width.

I tested her instructions by modifying my 4 column Minima template into 4 column Minima template with 3 column footer and you can see the result at Star Self Improvements. The 3 columns at the footer had been used to contain widgets from Amazon and may take some time to load.

"Rounders 3" 3 column template by Amanda Fazani

I love the Rounders 3 template by Douglas Bowman because it is beautiful, green and I think a perfect fit for an environmental blog. However the standard Blogger Rounders 4 template is only 2 column when I prefer 3 column and 4 column. I was thus very happy when Amanda of BloggerBuster converted the standard 2 column to the Rounders 3, 3 column template. I thus used her template for the Environmentally Friendly Presents. Not only has Amanda converted it to 3 column, she also included a very handy Labels cloud. Do have a look at Labels cloud in the right sidebar of Environmentally Friendly Presents, you will fall in love with it I am sure.

Changing widths of blog - sidebars, main column

I have previously showed how to determine main column and sidebar widths. A blogger asked how to change the widths. It is not difficult, but before I show how to change the widths, let me explain something about web designs. If you are only interested to find out how to change widths, skip to Change Width

Webmasters always take into considerations the kind of visitors to their websites. One important considerations is the screen resolutions of their visitors and previously, small screen resolutions of 800x600. This is so that such small screen visitors will see the whole blog without having to use the horizontal scroll bar. Visitors with larger wider screen will see so called "wasted space". Even Vprofessional webmasters for big websites like CNN.com have this "wasted space". The so called "wasted space" are there for a reason, that is, to make things convenient for small screen visitors. You would not want to make it inconvenient for small screen visitors and discourage them from coming back to your blog.

Now we come to the part about changing width:

---

Change Width
The widths of the whole content, the Header, the Footer, the main column and the sidebar or sidebars are controlled via the CSS (Cascading Style Sheet) of the template. The sections involved in the case of the 4 column template used for this blog are:

Overall
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}

Main column
#main-wrapper {
margin:0 0 0 20px;
width: 450px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Left sidebar
#left-column {
width: 163px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 163px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

second right sidebar
#rightsidebar-right {
width: 164px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Note that the total widths of the main column plus the 3 sidebars = 450+163+163+164 = 940 pixels

The overall width is 990px. The difference = 990 - 940 = 50 pixels are taken up by the margins.

If you do not want to change the overall width, but only want to change the widths of the sidebar and/or the main column, what you should do is to make sure the the total widths of the main column plus the sidebars are alway 940 pixels (assuming you want the margins to be maintained)

For example, I want to change the main column to 400 pixels. Thus there will be an extra 50 pixels to be distributed among the 3 sidebars. Thus I might add 30px to the first sidebar, 10 each to the 2 right sidebars. Thus the new widths will be

Left sidebar = 163 + 30 = 193
Main column = 450 - 50 = 400
First right sidebar = 163 + 10 = 173
Second right sidebar = 164 + 10 = 174

and that part of the CSS become

Overall (no change)
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}

Main column
#main-wrapper {
margin:0 0 0 20px;
width: 400px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Left sidebar
#left-column {
width: 193px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 173px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

second right sidebar
#rightsidebar-right {
width: 174px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

ANOTHER EXAMPLE:

You want to make the whole blog wider to, let's say 1200 pixels wide. That means there will be an extra 1200-990=210 pixels to be distributed among the 4 column. Thus I may add, for example, 120 to the main column, and 90 (30 each) for the 3 sidebars.
Thus
overall width = 1200
Main column = 450 + 120 = 570
Left sidebar = 163 + 30 = 193
First right sidebar = 163 + 30 = 193
Second right sidebar = 164 + 30 = 194

Error code bX-jdokxi - what to do

Have you ever got the error code bX-jdokxi when you try to change template? I did not too long ago while trying to change the template of Blogger FAQ from Blogger Buster's Red Web 2.0 template to my own 4 column Minima template. This is what I did to solve the problem:

1. temporally changed to a standard 2 column Blogger Minima template, then try to change to the 4 column Minima template. Error message - error code bX-jdokxi

2. I found out that there were a few gadgets (formerly Page Elements) that were not deleted (left behind) when changing to the standard 2 column Blogger Minima template. I removed all gadgets (Page Elements), then only change to the 4 column Minima template I actually wanted. EUREKA. Problem solved. No error message. Template successfully changed to the 4 column Minima template.

Important reminder. Before doing anything to the template, always backup template and backup gadgets (formerly called Page Elements). After successfully changing to a new template, you can use the backup gadgets (Page Elements) to copy-paste back into the new template via the LAYOUT.

Blogger Tips Tricks now using 4 column template optimized for 1064x768 screen resolution

Blogger Tips and Tricks is now 4 column and optimized for 1024x768 pixels screen resolution as well as AdSense. Blogger Tips and Tricks now used a 4 column fixed width Minima template with widths of 450 pixels for main column, 163, 163 and 164 pixels for the 3 sidebars respectively. Rationale for the change is as follows:

Below are the most recent system statistics (visitors' screen resolution):

Visitors' screen resolution bar chart

Visitors' screen resolution in percentage

This showed that today, only less than 1% of visitors have the small screen resolution of 800x600 pixels while 32% has screen resolution 1024x768 pixels. Visitors having screen resolution of 1024x768 pixels and bigger total slightly over half have screen resolution over 83. This means that the vast majority of visitors to this blog with this new template will not have to use the horizontal scroll bar

to view all the content of this blog with this new 4 column template optimized for 1024x768 pixels screen resolution.

The main column (content) was only increased from 400 pixels to 450 pixels. This is because as discussed in What is the best template?, a readability study showed that content should be around 60 CPL (characters per line). I tend to agree because I use a wide screen and when I come across text which stretches the whole breath of my wide screen, I find it difficult to read and to scan. When I read until the end of one line, I have to search for the beginning of the next line and that can be a bit difficult as the end of a line and the beginning of the next line can be separated by a large distance.

The sidebars were kept to slightly over 160 pixels because the popular AdSense skyscraper (wide vertical banner) ad unit is 160x600 pixels and will then just fit in nicely in any of the 3 sidebars.

If you want this template, please go to 4 column New Blogger template.

Additional "Add Page Element (gadget)" for LAYOUT

IMPORTANT NOTE: Page Element is now referred to as GADGET. This ADD A PAGE ELEMENT is now ADD A GADGET

Below is the LAYOUT of a standard Minima template:



Note that there are only 2 "Add a Page Element (gadget)" (one of them highlighted with red ellipse). Below is an extract of relevant section of the template:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Temporary (Header)' type='Header'/>
</b:section>
</div>


<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Now if you want to have additional [Add a Page Element]'s, change
showaddelement='no'
to
showaddelement='yes'

and where appropriate, change '1' in
maxwidgets='1'
to any number greater than '1'. If you just delete '1' and leave it as
maxwidgets=''
you can add an infinite number of Page Elements.

The edited script shown is in the scroll box below:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Temporary (Header)' type='Header'/>
</b:section>
</div>


<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Note that all three showaddelement='no' had been changed to showaddelement='yes', and in the LAYOUT, you will see three additional "Add a Page Element":

Blog display blank page or funny characters: What to do?

We get questions like these every now and then. One said he signed into Dashboard, then click VIEW to view a blog, but only see a blank page. What I can suggest is to click VIEW > PAGE SOURCE (in Internet Explorer, it is VIEW > SOURCE) in the menu bar:



and a new window will open. Very likely, you may see a blank template or a truncated (incomplete) template. The template should always begin with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

or something similar. Note particularly the second line

<html .......

The very last line should always be

</html>

If the last line is not </html>, then part of your template is missing. If this is the case, you will have to change to a new Blogger template and your problem should be solved.

The other possibility is that your template may have become corrupted and thus your blog may display funny characters. In this case, First backup your template PLUS Page Elements. This post backup your Page Elements should explain the process in greater details.

Then change to a new template which may be the same template you used originally before you started any blog customization or it may be a brand new Blogger template. Once you have a fresh template installed, start putting back in whatever Page Elements you had been able to back up. Those which cannot be backed up like ARCHIVES or PROFILE, most likely you can get it again by clicking ADD A PAGE ELEMENT in the LAYOUT and selecting from a list. The one which you most likely have to start from scratch will be LINK LIST. That is why I prefer to use HTML/Javascript Page Element and HTML for hyperlinks for my Link List. This, using an UNORDERED LIST (<ol>) is described at the bottom of the post linked to above.

Background graphic for blog

I would be very careful with adding a graphic background to a blog as the photo must be selected carefully, otherwise, something on the blog become very hard to read or may even become invisible. Anyway look at blog with repeating graphic background.

Instructions on how to add a repeating graphic background to a blog

I would first assume you have a graphic or photo that will suit color of the text, hyperlinks, etc. Save it into your computer into a folder where it can be easily found. Now you have a choice of the free Photobucket image host or hosting it by uploading to a post in Blogger. In my case, I have chosen to host the photo at photo of clouds for blog background.

The very first thing you need to do is to get the correct photo URL. In that post, I will click View > Page source (the language may differ a little in different web browsers) in the menu bar at the top of the web browser:



Since the title of the post is "Photo of clouds for blog background", I will press ctrl+F and a search box will appear. I copy-paste all or part of the above post title and click "Find Next" to get to the section of the Page Source where the scripts to display the post is. I found:

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwav-rKO1gTXKgD2py1yiLm59532fCuFEX3iYGYlmYE0WvQSAMLiaddrL-CvOU5jTIPQQ_OLF9Cgbw7Qpc8Z2sLSWqRUeH0CRzX7iBqCk9JJxZP5pmpoYnBJd0QepobjrXmpM-EsSXuMKf/s400/cloud+ktratboy+cropped.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5183480981056349650" />

and after src=" I found the URL of the photo:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwav-rKO1gTXKgD2py1yiLm59532fCuFEX3iYGYlmYE0WvQSAMLiaddrL-CvOU5jTIPQQ_OLF9Cgbw7Qpc8Z2sLSWqRUeH0CRzX7iBqCk9JJxZP5pmpoYnBJd0QepobjrXmpM-EsSXuMKf/s400/cloud+ktratboy+cropped.jpg

I then go back to blog with repeating graphic background (this is best done in a different tab of a web browser while signed into Blogger like FireFox with tabbed browsing. At the top of that blog, you will see the navbar with your email address, "New Post", "Customize", "Sign out".



Clicking on "Customize will take you to the LAYOUT. Click EDIT HTML and that will open the template editor window. Look for

---

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

---

and somewhere after {body

create some space for the script to add the graphic background which should be

background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwav-rKO1gTXKgD2py1yiLm59532fCuFEX3iYGYlmYE0WvQSAMLiaddrL-CvOU5jTIPQQ_OLF9Cgbw7Qpc8Z2sLSWqRUeH0CRzX7iBqCk9JJxZP5pmpoYnBJd0QepobjrXmpM-EsSXuMKf/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat

and then that part of the template will become

body {
background:$bgcolor;

background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwav-rKO1gTXKgD2py1yiLm59532fCuFEX3iYGYlmYE0WvQSAMLiaddrL-CvOU5jTIPQQ_OLF9Cgbw7Qpc8Z2sLSWqRUeH0CRzX7iBqCk9JJxZP5pmpoYnBJd0QepobjrXmpM-EsSXuMKf/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat

margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Downloading and changing New Blogger template

A number of readers have been having problems downloading and installing templates from third party creaters and modifiers of New Blogger templates, so here is a post to explain the process.

Before I get to that, let me again repeat the importance of backing up your current template AND Page Elements before you change template. Refer to Backup New Blogger template PLUS Page Element and change template. This post will also show how to get to the template editor window.

Generally, 2 methods are offered. One, the one offered by Stavanger of Blogcrowd, gives the template which you have to copy and paste into the template editor window. For tasks like these, it is best you have a browser like FireFox which has tabbed browsing. Then you can be in the page with the new template in one tab and logged into Blogger in another tab in the same window.

In the box containing the new template, click inside the box, press ctrl+A (or right-click and chose "Select all") to highlight all the template, press ctrl+C (or right-click and chose "copy" to copy the new template into clipboard. Go the the Blogger template editor window, click inside the template editor window, press ctrl+A (or right-click on mouse and chose "Select all"). Press the DELETE key. The template window will now be empty. Click inside the empty template window, press ctrl+V (or right-click and select "Paste" to paste the new template from the clipboard into the empty template window. Preview, and if there is no problem, click "Save template.

In most cases, the template is downloaded and saved as an xml file. In this case, in the template editor, click "Browse" at the top of the page, navigate to where you saved the xml file, select it, click "Upload". When done, click VIEW BLOG to make sure everything is OK.

Any further problem, comment in this post and I may use your comment to make the above clearer.

Change font size of blog footer

I did a test blog Test Footer Font Size. Note the size of the fonts in the footer.

---

The instrutions below will involve scanning through long line of codes in a template. See section on how you can find code easily at the bottom of the post if you have difficulties. Also, before you do anything to the template, always backup your template PLUS the Page Elements. See
Backup New Blogger template PLUS Page Elements and change template

Backup New Blogger template PLUS Page Elements and change template

Amazon computer products

---

To change the footer font size, sign into blogger.com (Dashboard). Click LAYOUT for the relevant blog, then under the TEMPLATE tab, click the EDIT HTML sub-tab. Look for block of codes that may look something like this (the exact code will depend on template. The one below is for the Blogger Minima template):

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Just add a line

font-size: 400%;

so that the block of codes become

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
font-size: 400%;
}

Preview and if everything seems OK, click "Save template".

NOTE: The font size can be in % or px (pixels). You may also use 250% or 18px. Experiment, preview until you get what you want before you save the template.

How to easily locate the code you are looking for

To make your task of scanning the long lines of codes in the template, press ctrl+F and a Find [ ] will appear at the left of bottom of the browser. Tpye all or part of the code you are looking for and the scrollbar will scroll down to the part where the code is located and highlight it. See screenshot below:



Do all the necessary editing and preview. If everything seem OK, click "Save template" and VIEW BLOG" to ensure everything is OK

If this method don't work, click on the inside of the template editor window and press ctrl+A (or right-click and chose "Select all") to highlight all the template. Click ctrl+C (or right-click and chose "copy") to copy the template into clipboard, open a Notepad file, click ctrl+A again (or right-click and chose "Select all"), then click EDIT > FIND in the menu bar of Notepad at the top (or press ctrl+F), and in the "pop-up" FIND box, type or copy all or part of the code into the box and click "Find Next" and again the code you are looking for will be located and highlighted (see screenshot below):



Do whatever editing you need to do, then press ctrl+A (or right-click and chose "Select all") to highlight all the edited template in Notepad to copy into clipboard. Go back to the template editor. The whole unedited template should still be highlighted. Click the DELETE key and the template editor window will become empty. Paste the edited template into the empty template editor window, preview, then save.

---

Remove 'pencil' and 'screwdriver and wrench (spanner)' quick editing icons permanently

(If you only want to know how to permanently get rid of those quick editing icons, skip to Permanently get rid of pencil icon or Permanently get rid of screwdriver/wrench icon but I hope you will read the explanation on why you should not remove those useful icons)

We have received numerous complaints of bloggers seeing those "irritating" quick editing icons - the pencil quick edit icon for the posts, and the screwdriver and wrench (spanner) quick editing icon for the Page Elements (widgets). Personally they don't irritate me at all.

To me, these are really useful features, especially if you put a lot of HTML/Javascript Page Elements and you don't type a title for the Page Element (which is the norm). In the LAYOUT, they will all read "HTML/Javascript" and there is no way for you to tell which HTML/Javascript is for what unless you click on EDIT to look at what is inside. On the other hand, if you are logged in and you go the the blog, you will know exactly which Page Element you want to edit/delete and all you have to do is to click the icon and you will be editing/deleting the Page Element you want to edit/delete.

Further, they are only visible to me when I am logged into Blogger. No one else will see it. I have written about it before at How to get rid of the irritating "pencil" and "screwdriver and wrench (spanner)" quick edit icons (click BACK button to get back to this page). This however don't seem to satisfy some bloggers, especially those who have private blogs and can view their blogs only when they are logged in.

Here is one comment from a particularly irritated blogger:

"Okay 300 ducats to cooked art, his method worked. The other anwers are basically saying, 'Don't worry -- nobody who uses your blog will see these eyesores but you.' Which seems like an odd thing to tell me, since I will be using my blog more than anyone else, and I don't actually enjoy looking at eyesores any more than they would."

OK, if getting rid permanently of those very useful quick edit icons is what you want, here is how you can do it:

Permanently get rid of quick editing Pencil icon for posts

Sign into Blogger (Dashboard), click SETTINGS for the relevant blog and you will be in the SETTINGS > BASIC sub-tab by default. Just a bit down from the top of the page, you will see "Show Quick Editing on your Blog?". Click the down arrow and select "No" At the bottom, click "Save Settings". (Warning: There is a button "Delete this blog" very near that "Save Settings" button, and it is not uncommon to hear of bloggers who accidentally deleted their blog this way). Once you have done that, you will never see the quick editing Pencil icon again.

Permanently get rid of quick edit screwdriver and wrench (spanner) icons for Page Elements (widgets)

Sign into Blogger (Dashboard). Click LAYOUT for the relevant blog. Click TEMPLATE tab, followed by EDIT HTML sub-tab. Before you do any editing of the template, backup the template PLUS the Page Elements. See Backup and edit New Blogger template PLUS backup Page Elements. Once you are done with that, you will still be in the template editor window. Tick the "Expand widget templates" box and wait for the template to fully expand. Then look for this line of code:

<b:include name='quickedit'/>

If you face difficulties finding that line of code, press ctrl+F and you will see a "Find" followed by a box for you to type or copy-paste what you want to find. Type or copy-paste the above line of code into the box and click "Next". The scroll bar will scroll down to the line and the line will be highlighted. Use your mouse to highlight that line of code again and press the DELETE key. Preview, and if you don't get any error message, click "Save Template". You will never see the "irritating" (to me, useful") screwdriver and wrench icons again.

Update: 25 May 2010: A commentator Susie Hovendick Chan said that she got rid of the quick edit icons by putting

quickedit:display none;

at the end of the style sheet, that is, just before ]]> thus ending with

quickedit:display none;
]]>

Update: A comment from a blogger which I myself haven't tested. Updating here in case any visitor interested in what he has to say. If you do try it, do give us some feedback by leaving a comment: "Sweet! I realized that the wrench icon was causing layout problems in IE7; I got rid following your instructions of it even though its pretty useful.

In case if this helps anyone: the wrench icon is floated right. Float right inside divs that are already right floated will cause the div to stretch unnecessarily in IE7."

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.