2011

Remove 'pencil' option from blogger

Now you can choose to hide or display the quick editing tool by going into Blogger edit post options but do read aboutwhy you should keep the quick editing tool before you remove them.

(If you only want to know how to permanently get rid of those quick editing icons, skip to Permanently get rid of pencil icon orPermanently 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 atHow 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;
]]>

HOW TO ADD META TAGS IN BLOGGER BLOG INDIVIDUAL POSTS

1. Follow steps 1 to 4 as for adding meta tags to the Home Page

2. Add the following in the <head> section of your Blogger template. Enter this code below the Home Page code above you have just entered:

<b:if cond='data:blog.url == "http://url of your post"'> <meta content='keywords pertaining to your post' name='keywords'/> <meta content='crafted description of your post' name='description'/> </b:if>

Here is an example of optimized meta tags for this post:

<b:if cond='data:blog.url == "http://healthyfitnesstip.blogspot.com/2011/07/inside-dieting-tips-share-0-dieting-one.html"'> <meta content='HEALTH,DIET,TIPS,DIETING TIPS,FAT,FOOD,EAT' name='keywords'/> <meta content='EASY WAY TO DO DIETING,FIND OUT HOW TO DO DIETING IN VERY EASY STEPS' name='description'/> </b:if>

3. Add your post URL, keywords and description. To find the URL of your post navigate to the post's page and copy the link showing in the address bar of your browser including the http:// prefix

4. Click on the Save Template button

5. To check your description you can use the view source in your browser once you have navigated to the post page or a meta tag analyzer.

Add meta tags in blogger

HOW TO ADD META TAGS IN BLOG FOR BETTER SEO

What are Meta Tags?

Meta tags are HTML tags that provide additional information about your blog that is unseen by visitors but available to search engines. The meta description tag, for example, provides a short summary of the page content. The keyword meta tags show the keywords and keyword phrases a visitor might use to find your blog. Because of abuse of meta tags search engines have become smarter and most no longer place emphasis on keywords to establish page ranking however keyword meta tags are still used by some search engines so it is a good idea to include them.

How to Add Meta Tags to a Blogger Blogspot Blog Home Page?

1. Login to Blogger if not already logged in

2. Navigate to Design > Edit HTML

3. Back up your template as a precaution by downloading full template to your computer.

4. Check the Expand Widget Templates box

5. Find these lines which will be near the top of your template:

6. Paste the following code immediately below

<title><data:blog.pageTitle/></title>.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Place your blog description here' name='description'/>
<meta content='Place your blog keywords here(separated by commas)'
name='keywords'/>
</b:if>

7.Enter your blog description what's your blog is all about.maximum 150 charchter.

8.enter your keywords.choose the keywords which describe your blog.use google keyword tool for it.

9.click save template.

10.To check whether you insert your meta tag correctly go to seo centro or submit express

Change sidebar date and title

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

Simple text horizontal nav bar

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

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

The codes for the above will be something like this:

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

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.

How to hide blog 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 center post title

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;

How to make all links open in new window

This request to make all hyperlinks pops up every now and then so might as well make a post for it. To make all linksopen in new window is amazingly simple. Just sign into
DASHBOARD > DESIGN > EDIT HTML
to open template editor

Use keyboard shortcut ctrl+F to find <head> and immediately after that, add a single line <base target='_blank' /> so that it become

<head>
<base target='_blank' />

Save the edited template and viola, all links in your blog will now open in new tabs or windows.

Note: Blogger is now XHTML so all tags must have matching closing tags or be self closing. The above tag is self closing because it has that forward slash / at the end of the tag.

instead so that it becomes
<head>
<base target='_new' />
I have tested it at Useful tools for bloggers and it works fine.

Note 2: Just wondering if adding a note for frequent visitors to set browser to open in new tabs rather than new windows will reduce the number of visitors having an unmanageable numbers of new windows opened. Do leave your opinions in the comments below:

Note 3: Some bloggers may prefer some links not to open in new window/tab but to open in the same window, Nute gave this tip to add the attribute target="_self" for those links you want to open in the same window/tab.

I have tested his tip at Safety Tips and Tricks (see Blogger Resources in the second right sidebar). His tip work correctly if the first and third link ("original Blogger Tips and Tricks" and "Blogger Book" opens in new window without the need to add target="_blank" and the second (Blogger for Dummies) opens in the same window by adding target="_self"

How to make a picture as a background

With the new Template Designer, it is now very easy to add or change background for your blog. Sign into Blogger.com

Dashboard > Template Designer > Background

and there you can change your background color or image at will without having to directly edit the template.

The first thing you have to do is to choose an image where the color of the image and the text of the blog are compatible and the color doesn't clash. Otherwise the text will be very difficult to read. Another thing is the size of the image. If the image size does not fit the whole background, it will normally repeat itself unless you choose not to do so (see last part of post). If it repeat itself, to make the background pleasant, you will have to ensure the repeated images merge properly. For my demo blog Self Improvements, I chose a cloudy sky with white and light blue as they merge into each other well while the black text on the light background will still be clearly readable.

When you have selected your image and have stored it in your computer, then to make the picture as a background, you first have to post the picture on the web somewhere or host the picture with a photo host like Photobucket. Refer to "Getting Blogger to host your pictures for the profile, etc." if you want Blogger to host the image. Get the url (example http://photo-url.jpg) of the picture, then sign into Dashboard, select the blog, click TEMPLATE tab, and look for this block of CSS code in the template. It will be somewhere in the beginning of the template:

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Then add this line of code
background-image:url("URL of photo");
to the above, as shown below (added code in red)

body {
background:#fff;
background-image:url("URL of photo");
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

replacing URL of photo with the real url of the picture, for example
http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg

If you don't want the image to repeat in the background, all you have to do is to add another line to the code: background-repeat:no-repeat;

So your CSS code become:

body {
background:#fff;
background-image:url("http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg");
background-repeat:no-repeat;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

change background color or image of main blog column

With the new Blogger Template Designer, changing the background is now a breeze. Just sing into
DASHBOARD > DESIGN > TEMPLATE DESIGNER > BACKGROUND
and change the blog background according either color or image. If this option is not offered you will either have to stick the old method of changing background described below or change to a Template Designer template.

Blog reader asked this question and I figure I might as well answer in a post.

ADD/CHANGE BACKGROUND COLOR OF MAIN COLUMN (POSTS)

To change the background color of ONLY the main column (posts), sign into Dashboard, click LAYOUT (now called DESIGN) in the section for the relevant blog, click EDIT HTML sub-tab to open the template editor window. Look for this block of codes in the template:

#main-wrapper {
width: 410px;
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 */
}

(This is for the standard Blogger Minima template. Wordings may be slightly different for different template but will be mainly similar)

Add any of this to the block of codes:

background:pink;
background:blue;
background:#D4FFFF;
etc.

The last will give you a greater choice of color. For the last example which use HTML color code, you can get much help using the free ColorPic tool. I used it frequently. You can Google for it by typing the search term "colorpic" or "color picker" into the search bar above (tick "Web").

After addition, the block of code may now look something like this:

#main-wrapper {
background:#D4FFFF;
width: 410px;
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 */
}

ADD BACKGROUND IMAGE TO MAIN COLUMN (POSTS)

Do exactly as above, but this time, upload the image to the web either using the free Photobucket or use Blogger to host the image as described in this post Use New Blogger to host your pictures for the profile photo, sidebar, blog Header, etc.. Get the photo URL.

Then add this line of code into the blocks mentioned above:

background: url(photo URL);

So the block of codes become:

#main-wrapper {
background: url(photo URL);
width: 410px;
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 */ }

If add a background image, you ask yourself if it will increase loading time too much, weather text and other images will be visible or look good with it, etc. Not everyone is on broadband. Some still use dialup

Change blog background color of new blogger sidebar

A blogger commented that he could not find the sidebar color code in the template to change the background color of the sidebar. The CSS (Cascading Style Sheet) of every template is written different and if something is missing, all you need to do is to add the relevant missing part in.

For example, in the standard Blogger Scribe template, this is the section in the CSS (Cascading Style Sheet) for the sidebar:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
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 */
}

There is nothing mentioned about background. So what I did was to add a single line

background: #FFFFFF;

(#FFFFFF is the hexadecimal color code for white) to that section, so that it became:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
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 */
background: #FFFFFF;
}

Change blog background color

Update: The new Blogger Template Designer has made this task very easy.
Sign into Dashboard (blogger.com) > Design > Template Designer > Background
and change whatever you fancy there easily.

This blog uses Ramani's 3 column Minima template and the background color of the blog is white. To change the blog background, go to LAYOUT, click Edit HTML, look for the outer-wrapper portion of the stylesheet of the template. Add the line

background: chosen color;

For example, in an extract of the template below, a line (in red) has been added:

background: green;

/* Outer-Wrapper
------------------------------------------------ */
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
background: green;
}