Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Feb 25, 2007

Digg This Story

Add Music to Blogspot blog

This article is updated to address the difference in the way the code is interpreted by the different browsers, namely Internet Explorer and Mozilla Firefox. We have also included a sample music file which you can use to test the effects of adding the sound file to your Blog. As well, read our article on Flash Music Player and Music Playlists to add a playlist of several musical pieces or songs.

“Music, the greatest good that mortals know,
And all of heaven we have below.” ... Joseph Addison

Depending on the subject matter of your blog, having music played in the background may either enhance the pleasure of reading or annoy your visitor. Imagine the agony of surfing the web in discreet, only to catch the attention of your office colleagues or parents when the music automatically blasts off in the background. Not to mention, a big music file may cause a slower page download. Nevertheless, the solution, as shall be explained later, is simple - have an option for the reader to play or stop the music.

To begin, you will need to have a music file uploaded onto a server. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Upon uploading, note down the URL of the file.

Alternatively, there are several sites that offer free download of their music files. You can enter search words like “free music download” or search for a popular artist name in the Google search box. Most of the sites that offer free download will lead you to the file location stored in their servers. Copy the URL of the music file that you have chosen.


If you would like to hear how the music works on your Blog, you can also use this music file which we have uploaded onto Google Pages - http://ownlblog.googlepages.com/BalladePourAdeline.mid - whenever you are prompted to enter the “URL of music file”. This file is for testing purposes only. Please do not link permanently to this file as it may be changed or deleted in due course.

Next, you would have to decide how you want the music to be played.

Link for reader to click

This is a text link. Your visitor can click the link if he wants to hear the music.

<a href="URL of music file">Click to hear music file</a>


Remember to enter the URL of music file into the above code. This code can be inserted into your Blog post. If you want to put it in your sidebar, you can go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript and insert the code. Whatever words you type into the “Click to hear music file” will appear as the text link.

Music with a console

A music player console with controls of the volume, on and off buttons, would give your visitors a choice on how he wants the music played. With the code stated below, the music will not play unless the visitor clicks the play button.

You can either insert the music console into your Blog post or your sidebar. If you want it in the sidebar, go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript.

The code to insert is this:-

<embed autostart="false" height="40" loop="true" playcount="2" src="URL of music file" width="300"/></embed>


For instance, using the following code:-

<embed autostart="false" height="40" loop="true" src="http://ownlblog.googlepages.com/BalladePourAdeline.mid" width="300"/></embed>


this is what you see:-



It will look different in IE and Firefox, depending on the installed plugins.

Note the following attributes and how they work on different browsers:-

1. Insert your URL of music file into the code.

2. The width of the example you see above is "300". If you want it to be embedded neatly into your sidebar, the width should not be greater than the sidebar width. For example, if your sidebar width is 150px, the width of your console should be about 140px.

3. The height would depend on your preference and space constraints.

4. The autostart attribute has two options. If you choose "true", the music will automatically play when your page is loaded. As I have mentioned earlier, this is not a good option unless you are absolutely sure all your visitors would not mind the music. The better option is to state it as "false". If the visitor wishes to hear the music, he can click the play button to start the music.

Note, however, that while it works fine in Internet Explorer, it may not be so in Mozilla Firefox. The default setting for IE is "false" which means the music will not play automatically. The default setting for Firefox is "true", and when we experimented with .wma and .wav files, they automatically played even when we set the autostart to "false". If you are working on the Mac, the default setting for both browsers is "false".

5. The loop attribute indicates whether the music should stop once that particular tune ends. The common attributes are "false" or "true". If the attribute is "false", the music ends after it is played once. If it is "true", the music will automatically loop and continue playing until the visitor clicks the stop button or leaves your site. For short music pieces, you may want it to repeat and choose "true".

For certain versions of Netscape browsers, another attribute that might work is loop="n" where n is a number. If n is 2 for example, the music will play twice and stop. The similar attribute in Internet Explorer is playcount.

6. You can specify the number of times the music is to be played. In the above example, where playcount="2", the same piece of music is played twice before it stops. If you want the music to be played once, you can delete playcount altogether. Note that this only works in Internet Explorer.

Background music to play automatically

For the music to play the moment your page is loaded, the code will have to appear in the HTML document of your site. Note that in so doing, there are no controls for the visitor to choose whether or not to listen to the music, nor options to turn it off. Login to your Dashboard and under “Template”, click “Edit HTML”. Somewhere near the top, after the word <Head>, insert this code:-

<embed autostart="true" height="0" loop="true" src="URL of music file" width="0"/>


Remember to insert the URL of music file into the code. There is no image of a console and readers cannot choose to turn off the music. Use this option with discretion.

Troubleshooting

The sound files can be in any format provided that your browser has the necessary plugin to play that file. Many people have problems playing MP3 files because their Firefox browsers do not have the necessary plugins. To check what your Firefox browser can support, enter this command into your browser:-

about:plugins


It will list all the installed plugins and the media files that can be played. If you need additional Mozilla Firefox add-ons, you can visit their Add-ons Page.


Further reading:


If you are looking to have a video clip or movie file added to your blog or template, you may check out our other article Add video clip to Blog. We have also written a guide on how to add a music player to display a music playlist and allow readers to select and play the music they want to hear.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Feb 24, 2007

Digg This Story

Using Google Page Creator and Google Groups

If you are looking to have a Favicon (icon next to your URL) or music on your blog, you will need to upload the files onto a web host. Most bloggers do not register and pay for a .com site. Fortunately for us, there are many sites offering free hosting of your files, documents, photos, and so on. I shall cover 2 very useful free web hosts which you can consider using – Google Page Creator and Google Groups.

Google Page Creator

You can use your Gmail account to access the available services offered by Google. Google Page Creator is an easy-to-use free tool that lets you create web pages in your browser and publish them to the web with just one click. It works on a what-you-see-is-what-you-get format. Everything is done on the screen and you do not need to download any software. Pretty much like a simpler version of Pagemaker or other web design tools. The pages you create are hosted on Google servers and your own page will be at http://yourname.googlepages.com.

Once you are in it, you will be able to create your webpage – change layout, background color, heading and content font, upload images, and publish.

Using Google Page Creator and Google Groups

For our purposes, we would like to focus on uploading of files. Return to the Site Manager. On the right of the screen, you should see this:-

Using Google Page Creator and Google Groups

Click the “upload” link, and you will be able to browse your computer for the file that you want to upload.

Using Google Page Creator and Google Groups

Once you have uploaded the file, take note of the URL of your file. You may upload as many files as you want, provided that the space for your pages and uploaded files does not exceed 100MB.

Google Groups

Google Groups is a great communication platform for users to get in touch with friends, or people who share similar interests over the internet.

Using Google Page Creator and Google Groups

As you can see, creating a Google group is easy. Click the “Create a group” button. You will be brought to a screen which requires to enter your Group's name, and description.

Using Google Page Creator and Google Groups

If you have no intention to invite any member at this stage, click “Skip this step”.

Using Google Page Creator and Google Groups

You have now created a new Google Group. If you should wish to upload files, click the “Files” link on the right panel, and you can begin uploading. If you are using the files for your blog, see that the Group Settings->Access is configured such that anybody can view the group content.

Using Google Page Creator and Google Groups

Every group comes with 100 MB of storage space for all of the group's photos, documents, and files. Take note of the URLs of your uploaded files, if you intend to use the icon for your Favicon, or the music file for your blog.

Other Free Image Hosts and File Hosts

We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites as well and choose one that is fast, reliable and enables hotlinking to the uploaded files.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Feb 11, 2007

Digg This Story

Submit Blogger Sitemap to Yahoo!

Publicize your site by having your Blogger.com or Blogspot.com blog site included in Yahoo! Directory and Yahoo! Search. I went to the official Yahoo! submission of URL page and clicked the link “Submit Your Site for Free”. You will be prompted to log in using your Yahoo! account. For those of you who do not have a Yahoo! account, simply sign up for one. It is Free.

After you have your Yahoo! account, and are logged in, you will see this screen.

Submit Blogger Sitemap to Yahoo

Select “Submit Site Feed” and enter the URL of your Blog's site feed. You can use either:-

http://YOURBLOGNAME.blogspot.com/rss.xml


OR

http://YOURBLOGNAME.blogspot.com/atom.xml


Remember to replace YOURBLOGNAME with that of your Blog's. For Blogger blogs, do not add "www." to YOURBLOGNAME. Once the Sitemaps are submitted, click the “Authentication” link shown at the top right hand corner of the page.

Submit Blogger Sitemap to Yahoo

You will now have to authenticate your site ownership with Yahoo!, by either uploading a verification file to your site, or adding a META tag to your site. The authentication via a META tag was only introduced by Yahoo! recently, on Jan 30, 2007.

Note: Blogs created under Blogger.com or Blogspot.com cannot upload a verification file in the root directory. The first method is therefore NOT applicable to you.

The only way to authenticate your Blogger.com and Blogspot.com blogs with Yahoo! is to add a META tag. Copy the META tag that is generated for you, and paste it in your site's home page in the first section of the page, before the first section. What you do is to go to your Blogger dashboard. Under Template ->Edit HTML, somewhere near the top of the script, add the META Tag as follows:-

<head>


<META Tag>


<b:include data='blog' name='all-head-content'/>




Remember to replace the META Tag with the code generated by Yahoo! Site Explorer. Once done, Save the Template. When you return to Yahoo! Site Explorer, click the button that says “Ready to Authenticate” as shown below.

Submit Blogger Sitemap to Yahoo

You will see a message that says “Your site is pending authentication.” Check back later, and you will notice that your site is now indexed and crawled by Yahoo!

According to the Yahoo Site Explorer instructions:-

“If you have added the META tag, please keep the tag in your site's home page. We will revalidate your site ownership by checking this META tag regularly.”

It is alright to leave this meta tag as well as the Google sitemap meta tag in your template.

You may want to read the articles on how to Submit Blogger sitemap to Google Webmaster and Submit Blogger Sitemap to MSN and Ask.com. Also, submit your Blog to Blog Directories and Feed Directories to let more people know about your Blog. As well, submit your Blog to the various Search Engines for maximum exposure.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Submit Blogger Sitemap to Google Webmaster

Submitting your Blogger.com or Blogspot.com blog site to Google Webmaster will enable Google to find, index, and rank your site. For those who are new to this, you may go to the official Google Webmaster Tools site to create a new Webmaster profile.

Upon logging in using your Gmail account, key in your blog site URL, and click OK. You will then be asked to verify your site. This is to ascertain that you are indeed the owner of the site.

There are two ways to verify your site. You can either add a Meta Tag or Upload an HTML file. If you are using the Meta Tag method, Google will generate a Meta Tag code. Copy the META tag that is generated for you, and paste it in your site's home page in the first section of the page, before the first section. What you do is to go to your Blogger dashboard. Under Template ->Edit HTML, somewhere near the top of the script, add the Meta Tag as follows:-

<head>


<META TAG>


<b:include data='blog' name='all-head-content'/>




Replace the META TAG with the code generated by Google Webmaster. Once done, Save the Template. When you return to Google Webmaster site, you can click the button that says “Verify”.

Note: The second method of uploading an HTML file is NOT applicable to Bloggers using Blogger.com or Blogspot.com because this requires you to upload a file to the root directory of your Blog, which is not possible. There is therefore only one method for you to verify your site, and that is by inserting the Meta Tag as explained above.

After you have had your site verified, click on the Sitemaps tab as shown below. By adding a Sitemap, you will be providing Google with more details and information about your Blog. With this, Google will crawl your site, report information on any errors in the Sitemaps tab, and index your Blog site at a faster rate.

Submit Blogger Sitemap to Google Webmaster

Click the link that says “Add a Sitemap”. This will take you to another screen where you should choose the type “Add General Web Sitemap”. The Sitemap URL for any normal website is usually the index page that is stored in the highest-level directory of that site. In the case of Blogger.com or Blogspot.com, the only way to add a Sitemap is to use either of the following 2 Sitemaps:-

http://YOURBLOGNAME.blogspot.com/rss.xml


OR

http://YOURBLOGNAME.blogspot.com/atom.xml


Remember to replace YOURBLOGNAME with that of your Blog's. For Blogger blogs, do not add "www." to YOURBLOGNAME. Once you have added your Sitemaps, you will receive a confirmation telling you that reports are being generated but “may take several hours to update”. Congratulations! You have successfully added your Sitemaps. When you login to your Google Webmaster days later, you should be able to see the indexed pages and statistics of Google webcrawl of your Blog.

Leave the meta tag in the template if you want to view the statistics of your site. If Google can't find the meta tag, it will show an error message in your webmaster toolbox and you may have to verify your site again.

You may want to read the articles on how to Submit Blogger URL sitemap to Yahoo! and Submit Blogger Sitemap to MSN and Ask.com. Also, submit your Blog to Blog Directories and Feed Directories to let more people know about your Blog. As well, submit your Blog to the various Search Engines for maximum exposure.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Feb 10, 2007

Digg This Story

JavaScript for Quote of the Day

If you are wondering whether I manually add a Quote of the Day, the answer is no. I have used a simple JavaScript to display a new Quote everyday. There are a few JavaScript codes written by several people - some make you pay to buy their program, while others allow you to tap on to their Quotes database. I was looking for something simple, and unfortunately a number of those I found online do not work.

In the end, I looked up books and came up with a simple JavaScript which stores quotes and authors in a format called “arrays”. I keyed in 31 quotes and the script will display a new quote every day of the month.

If you would like to add one, go to Template ->Page Elements and click “Add a Page Element” to the place you want your Quote of the Day to appear. Add a "HTML/JavaScript".

The JavaScript I have used for the Quote of the Day you see in this site is as follows:-

Update: <noscript> tag added. Readers like us who have disabled JavaScript in our browsers will see a statement instead of a blank space.

<!-- http://tips-for-new-bloggers.blogspot.com/ -->

<table border="1" cellpadding="20" bordercolor="#ADD8E6">
<tr>
<td bgcolor="#E0FFFF">
<a href= "http://quotes-motivational-inspirational.blogspot.com/"> Quote of the Day</a>
<p></p>

<script language="javascript" type="text/javascript">

var d=new Date();

var quotes=new Array(31);

var authors=new Array(31);

quotes[0]="If a man watches three football games in a row, he should be declared legally dead.";

quotes[1]="Friendship is far more tragic than love. It lasts longer.";

quotes[2]="Advice is like castor oil, easy enough to give but dreadful uneasy to take.";

quotes[3]="";

quotes[4]="";

quotes[5]="";

quotes[6]="";

quotes[7]="";

quotes[8]="";

quotes[9]="";

quotes[10]="";

quotes[11]="";

quotes[12]="";

quotes[13]="";

quotes[14]="";

quotes[15]="";

quotes[16]="";

quotes[17]="";

quotes[18]="";

quotes[19]="";

quotes[20]="";

quotes[21]="";

quotes[22]="";

quotes[23]="";

quotes[24]="";

quotes[25]="";

quotes[26]="";

quotes[27]="";

quotes[28]="";

quotes[29]="";

quotes[30]="";

authors[0]="Erma Bombeck";

authors[1]="Oscar Wilde";

authors[2]="Josh Billings";

authors[3]="";

authors[4]="";

authors[5]="";

authors[6]="";

authors[7]="";

authors[8]="";

authors[9]="";

authors[10]="";

authors[11]="";

authors[12]="";

authors[13]="";

authors[14]="";

authors[15]="";

authors[16]="";

authors[17]="";

authors[18]="";

authors[19]="";

authors[20]="";

authors[21]="";

authors[22]="";

authors[23]="";

authors[24]="";

authors[25]="";

authors[26]="";

authors[27]="";

authors[28]="";

authors[29]="";

authors[30]="";

document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');

</script>
<noscript>You need to enable JavaScript to read this.</noscript>
</td>
</tr>
</table>


Allow me to elaborate what the script does.

1. I have defined a table for the Quote of the Day to be displayed in. You can of course change the “bordercolor” and “bgcolor” (background color) to whatever suits you. For a complete list of color values, you may refer to the Color Chart.

2. If you do not want a table but just a line of the Quote, simply remove these elements from the above script:-

<table border="1" bordercolor="#ADD8E6" cellpadding="20" bgcolor="#E0FFFF">
<tr>
<td>

</td>
</tr>
</table>


3. The first element of the arrays are [0]. I have for the purpose of this example entered the first 3 Quotes together with the corresponding authors' names. You can enter your favorite Quotes to fill up the remaining arrays. I have used Quotes from this Famous Motivational and Inspirational Quotes site.

4. Towards the bottom you will see this script:-

document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');


What it does is to call for the numerical date. For example, the date of this posting is 10th February. The script “quotes[d.getDate()-1]” will call for the number “10” and minus 1 from this number. The result is that the Quote displayed will be the one keyed in under “quotes[9]”. The reason for having to deduct 1 is because, as mentioned above, arrays must begin with [0]. Hence, if the date were the 1st February, deducting 1 will give you a value “0”, and the displayed quote will be the one that appears under “quotes[0]”.

Once you have saved the JavaScript, refresh your Blog page, and you should now have a Quote of the Day automatically displayed on your Web Page.

Important Note: When you key in the quotations or names, do not use characters like " or ; and do not press “Enter” within the quotation marks. These are special characters which are used by JavaScript.

Change Font type, size and color

Should you want to change the font face, size and color of the quotes, you can insert the <span style> tags. For those who are unfamiliar with these tags, what you can do is to create a new post under “Compose” mode. Enter a word, e.g., TEXT. Block the word and change the font size through the toolbar. All you want is the code, and you can therefore delete this draft post. Next, go to “Edit HTML” mode and you can see the span tags like this:-

<span style="color: rgb(255, 0, 0);">TEXT</span>


Insert these tags (highlighted in red) into the above JavaScript for Quote of the Day at these places:-

<span style="color: rgb(255, 0, 0);">
<script language="javascript" type="text/javascript">
|
|
|
</script>
</span>


If you want to change the font type or color, you can do the same. Type any word in the “Compose” mode, highlight it and change the type or color through the toolbar. Go to “Edit HTML”, copy the <span style> code and insert that into the place shown above.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Add Images or Icons to Sidebar links

Sidebars are sometimes crowded with lots of text. There are many ways to make some of the items stand out. In my case, I decided that I will add icons next to the links, to differentiate links from normal text. I will also draw a thin line after each link. To be consistent, the color of these lines shall be the border color.

Note: This is the style we used for our Minima template. Since each type of template has its unique margin, padding and style settings, this guide may not apply to these other templates. You can try to adapt this to your template. Preview the change, and adjust the margins and paddings. Often, a bit of experiment with these values will do the trick. If they still don't look satisfactory, do not save the template.

First, scout around for a picture that you would like to use. In this site, I have used an arrow image. You can use any photo editing software to reduce the image size to about 9px x 9px; I used Google's Photo Editing Software Picasa.

After having an image, upload it onto a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the URL of the Image file.

Go back to “Template” tab and click “Edit HTML”. Scroll to look for the following lines:-

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}


Replace them with this:-

.sidebar ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar ul li {
background:url("URL OF IMAGE FILE") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $bordercolor;
line-height:1.4em;
}


Remember to insert the URL OF IMAGE FILE into the code.

If you don't want the line at the bottom of every item, delete the border-bottom code (shown in green) or change the value to 0px.

Preview to see if you like the layout. If it is fine with you, Save the Template.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Feb 9, 2007

Digg This Story

Add Blogger search box

The Google Navigation bar at the top of your Blogger blogs has an embedded search box. However, you may want to include a similar box in the main body of your blog (like what I have done), or the sidebar. Other than the convenience for users, the added advantage is that unlike Google search box, the search results of this Blogger.com search box appear in the main body of your Blog.

Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.

There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>


Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.

You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.

Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size. The above example of a width size="20" and value="Hit" will give you this:-

Search Here



Whereas a width size="30" and value="Go" will give you this:-

Search Here



The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.

Image instead of Search button

Search Tips for New Bloggers



Just for the fun of it, if you want readers to click an image instead of a button, you will first need to do up a small picture. You can also resize a picture you already have with photo editing tools like Google's Picasa. After creating a picture, upload it onto a free server like GooglePages or Google Groups, or other free hosts that offer direct links to the image files. Take note of this IMAGE URL.

The HTML code to insert is this:-

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" type="image" src="IMAGE URL" align="top"/>
</form></p>


Remember to insert into the code the IMAGE URL, where your picture is uploaded. You can align the image to the top, bottom or set a horizontal space between the bar and the image by using a hspace tag. For more examples on alignment of images, you may refer to the article Hyperlinks and Image Links (II).

While it is alright to replace the button of your Blogger search box, you may not want to do that with the Google search box since their T.O.S. disallows any alteration of their code.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Three Columns Minima Template

The typical new Blogger Minima Template has only one sidebar. We can add a third column to the left, to have two sidebars. This maximizes the space, and allows greater flexibility in adding page elements to the sidebar.

Note that this guide is for those who want to convert their Minima template into a three column template by adding another sidebar. In our Rounders Template article, we have explained why the Rounders, Scribe, No. 897 or other templates are different and how the background images should be changed in order to cater to the new layout. We shall try to create new test blogs under different templates and post the tutorials once we have converted them into three column templates.

In the meantime, if you are using other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Rounders Template;
4. Three Columns Rounders 2 Template;
5. Three Columns Rounders 3 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Scroll to the part where you see this:-

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

#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 */
}

#sidebar-wrapper {
width: 220px;
float: right;
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 */
}


The template defines 3 wrappers, namely:-

#outer-wrapper – referring to the entire blog
#main-wrapper – referring to the main Blog Posts
#sidebar-wrapper – referring to the right sidebar.

To add another sidebar, copy the part highlighted in red and paste it immediately after that, but rename the “#sidebar-wrapper” to “#newsidebar-wrapper”.

Next, adjust the width settings of all the wrappers. For this example, I used what is commonly used by many people i.e., 750px for outer-wrapper, 400px for main-wrapper, and 150px for sidebar-wrapper. You can of course change these values, so long as the total widths of both sidebar-wrappers and the main-wrapper do not exceed the width of the outer-wrapper.

Also, fix the left margin of the main wrapper but allow the newsidebar to float to the left, leaving the original sidebar on the right.

Your template should now read something like this:-

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

#main-wrapper {
width: 400px;
margin-left: 25px;
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 */
}

#sidebar-wrapper {
width: 150px;
float: right;
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 */
}

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

Update:

We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines (shown in red):-

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}


Blog Posts in the Center

This sets the style sheet for the template. We will now need to add a section in the body of the template. Scroll to somewhere near the bottom of the script where you see this.

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>


Add the portion in red above the div id='main wrapper'. The segment should look something like this:-

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</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>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>


The code will give you a newsidebar on the left, main post in the middle, and leave the current sidebar on the right, just like what you see in this Blog.

Blog Posts on the Left

If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion in red below the div id='main wrapper'. It will look like this:-

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

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>


Change Width of Header and Footer

One more thing. If you have a wider layout, you may also want to lengthen the width of your Header and Footer. Go to the part of your template that says this:-

#header-wrapper {
width:660px;


and

#footer {
width:660px;


You can change the number in red. In this example, I may want to widen it to the same width as that of the outer-wrapper. I will therefore change the above codes to this:-

#header-wrapper {
width:750px;


and

#footer {
width:750px;


You may click “Preview” to see the new layout, and if you are happy with what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. You have now three columns in your layout!

Align Header Title and Description

Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).

Note:

If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Background Image for Blogger Header

Update:

With the latest Blogger feature, there is an easier way to insert a background image into your Blogger Header. The steps are discussed in the article “Background Image for Blogger Header (New)”.

However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow the guide at “Add Picture Banner Link to Blogger Header”as it allows you more control over the position of the elements. Alternatively, you can refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.

Should you wish to use an image as a background to your Header (just like the one you see above or this colorful one), get an appropriate image and crop it to size, about 660x150 pixels. A photo editing software like Google's Photo Editing Software Picasa or Photoshop would do the trick.

After that, upload the image to a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.

Next, go back to “Edit HTML” under Template tab. Scroll to where these lines appear:-

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


Add immediately after that the following line:-

background-image: url(URL address of your image);


Remember to insert the URL address of your image in the brackets. Save the template and refresh your Blog site. The image now appears as the background of your Header. Change the colors of the text if you need to.

Background Image for Blogger Header

This guide will give you an image background. Sometimes, you may have more than one image, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the Header images rotated and a random image shown upon every page load.

If you want to replace the entire Header with an image or banner, to link the image or banner to the URL of your Home page, and to delete the Title altogether, please refer to the article “Background Image for Blogger Header (New)” or the other article on how to “Add Picture Banner Link to Blogger Header.” Should you want to have a background picture as a backdrop to your main post, sidebar or entire blog, you may refer to the article on "Background Image for Blogger Template."

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Change Blogger Header background color

To change the background color of the Header, first determine what color you would like to have. You may look at the HTML Color Chart for the colors you can experiment with. For example, if you have decided on a color code #B38481, go to Template and click “Edit HTML”. Scroll to the part where you see this:-

#header-wrapper {


width:660px;


margin:0 auto 10px;


border:1px solid $bordercolor;




Add right after this an extra line:-

background:#B38481;




Save the template and refresh your Blog site. You may have to change the Header and description font colors. Simply go back to the “Fonts and Colors” tab, and change them accordingly.

Background Image for Blogger Header

Note that in different templates, instead of #header-wrapper, you may see #header-wrap or #header or #head. Try to insert the color code and preview the change. If there is a background color, you've probably got it right.

You may also read the related article to have a Background Image for Blogger Header.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Hexadecimal HTML Color Codes and Names

Changing background and border colors will add a special identity to your site.

Under the Template tab, you see “Fonts and Colors”. Clicking that, you will be able to change the colors, font types, and font size. However the available colors on the screen are limited. If you cannot find the color you want, you may want to copy the appropriate hex codes of the colors below, and paste them into the “color hex code” box and press Enter. Try out different combinations, and change them as and when you like.

HTML Color Code Chart



COLOR NAMECODECOLOR
Black#000000 
Grey0#150517 
Grey18#250517 
Grey21#2B1B17 
Grey23#302217 
Grey24#302226 
Grey25#342826 
Grey26#34282C 
Grey27#382D2C 
Grey28#3b3131 
Grey29#3E3535 
Grey30#413839 
Grey31#41383C 
Grey32#463E3F 
Grey34#4A4344 
Grey35#4C4646 
Grey36#4E4848 
Grey37#504A4B 
Grey38#544E4F 
Grey39#565051 
Grey40#595454 
Grey41#5C5858 
Grey42#5F5A59 
Grey43#625D5D 
Grey44#646060 
Grey45#666362 
Grey46#696565 
Grey47#6D6968 
Grey48#6E6A6B 
Grey49#726E6D 
Grey50#747170 
Grey#736F6E 
Slate Grey4#616D7E 
Slate Grey#657383 
Light Steel Blue4#646D7E 
Light Slate Grey#6D7B8D 
Cadet Blue4#4C787E 
Dark Slate Grey4#4C7D7E 
Thistle4#806D7E 
Medium Slate Blue#5E5A80 
Medium Purple4#4E387E 
Midnight Blue#151B54 
Dark Slate Blue#2B3856 
Dark Slate Grey#25383C 
Dim Grey#463E41 
Cornflower Blue#151B8D 
Royal Blue4#15317E 
Slate Blue4#342D7E 
Royal Blue#2B60DE 
Royal Blue1#306EFF 
Royal Blue2#2B65EC 
Royal Blue3#2554C7 
Deep Sky Blue#3BB9FF 
Deep Sky Blue2#38ACEC 
Slate Blue#357EC7 
Deep Sky Blue3#3090C7 
Deep Sky Blue4#25587E 
Dodger Blue#1589FF 
Dodger Blue2#157DEC 
Dodger Blue3#1569C7 
Dodger Blue4#153E7E 
Steel Blue4#2B547E 
Steel Blue#4863A0 
Slate Blue2#6960EC 
Violet#8D38C9 
Medium Purple3#7A5DC7 
Medium Purple#8467D7 
Medium Purple2#9172EC 
Medium Purple1#9E7BFF 
Light Steel Blue#728FCE 
Steel Blue3#488AC7 
Steel Blue2#56A5EC 
Steel Blue1#5CB3FF 
Sky Blue3#659EC7 
Sky Blue4#41627E 
Slate Blue#737CA1 
Slate Grey3#98AFC7 
Violet Red#F6358A 
Violet Red2#E4317F 
Deep Pink#F52887 
Deep Pink2#E4287C 
Deep Pink3#C12267 
Deep Pink4#7D053F 
Medium Violet Red#CA226B 
Violet Red3#C12869 
Firebrick#800517 
Violet Red4#7D0541 
Maroon4#7D0552 
Maroon#810541 
Maroon3#C12283 
Maroon2#E3319D 
Maroon1#F535AA 
Magenta#FF00FF 
Magenta1#F433FF 
Magenta2#E238EC 
Magenta3#C031C7 
Medium Orchid#B048B5 
Medium Orchid1#D462FF 
Medium Orchid2#C45AEC 
Medium Orchid3#A74AC7 
Medium Orchid4#6A287E 
Purple#8E35EF 
Purple1#893BFF 
Purple2#7F38EC 
Purple3#6C2DC7 
Purple4#461B7E 
Dark Orchid4#571B7E 
Dark Orchid#7D1B7E 
Dark Violet#842DCE 
Dark Orchid3#8B31C7 
Dark Orchid2#A23BEC 
Dark Orchid1#B041FF 
Plum4#7E587E 
Pale Violet Red#D16587 
Pale Violet Red1#F778A1 
Pale Violet Red2#E56E94 
Pale Violet Red3#C25A7C 
Pale Violet Red4#7E354D 
Plum#B93B8F 
Plum1#F9B7FF 
Plum2#E6A9EC 
Plum3#C38EC7 
Thistle#D2B9D3 
Thistle3#C6AEC7 
Lavendar Blush2#EBDDE2 
Lavendar Blush3#C8BBBE 
Thistle2#E9CFEC 
Thistle1#FCDFFF 
Lavendar#E3E4FA 
Lavendar Blush#FDEEF4 
Light Steel Blue1#C6DEFF 
Light Blue#ADDFFF 
Light Blue1#BDEDFF 
Light Cyan#E0FFFF 
Slate Grey1#C2DFFF 
Slate Grey2#B4CFEC 
Light Steel Blue2#B7CEEC 
Turquoise1#52F3FF 
Cyan#00FFFF 
Cyan1#57FEFF 
Cyan2#50EBEC 
Turquoise2#4EE2EC 
Medium Turquoise#48CCCD 
Turquoise#43C6DB 
Dark Slate Grey1#9AFEFF 
Dark Slate Grey2#8EEBEC 
Dark Slate Grey3#78C7C7 
Cyan3#46C7C7 
Turquoise3#43BFC7 
Cadet Blue3#77BFC7 
Pale Turquoise3#92C7C7 
Light Blue2#AFDCEC 
Dark Turquoise#3B9C9C 
Cyan4#307D7E 
Light Sea Green#3EA99F 
Light Sky Blue#82CAFA 
Light Sky Blue2#A0CFEC 
Light Sky Blue3#87AFC7 
Sky Blue#82CAFF 
Sky Blue2#B0E2FF 
Light Sky Blue4#566D7E 
Sky Blue#6698FF 
Light Slate Blue#736AFF 
Light Cyan2#CFECEC 
Light Cyan3#AFC7C7 
Light Cyan4#717D7D 
Light Blue3#95B9C7 
Light Blue4#5E767E 
Pale Turquoise4#5E7D7E 
Dark Sea Green4#617C58 
Medium Aquamarine#348781 
Medium Sea Green#306754 
Sea Green#4E8975 
Dark Green#254117 
Sea Green4#387C44 
Forest Green#4E9258 
Medium Forest Green#347235 
Spring Green4#347C2C 
Dark Olive Green4#667C26 
Chartreuse4#437C17 
Green4#347C17 
Medium Spring Green#348017 
Spring Green#4AA02C 
Lime Green#41A317 
Spring Green#4AA02C 
Dark Sea Green#8BB381 
Dark Sea Green3#99C68E 
Green3#4CC417 
Chartreuse3#6CC417 
Yellow Green#52D017 
Spring Green3#4CC552 
Sea Green3#54C571 
Spring Green2#57E964 
Spring Green1#5EFB6E 
Sea Green2#64E986 
Sea Green1#6AFB92 
Dark Sea Green2#B5EAAA 
Dark Sea Green1#C3FDB8 
Green#00FF00 
Lawn Green#87F717 
Green1#5FFB17 
Green2#59E817 
Chartreuse2#7FE817 
Chartreuse#8AFB17 
Green Yellow#B1FB17 
Dark Olive Green1#CCFB5D 
Dark Olive Green2#BCE954 
Dark Olive Green3#A0C544 
Yellow#FFFF00 
Yellow1#FFFC17 
Khaki1#FFF380 
Khaki2#EDE275 
Goldenrod#EDDA74 
Gold2#EAC117 
Gold1#FDD017 
Goldenrod1#FBB917 
Goldenrod2#E9AB17 
Gold#D4A017 
Gold3#C7A317 
Goldenrod3#C68E17 
Dark Goldenrod#AF7817 
Khaki#ADA96E 
Khaki3#C9BE62 
Khaki4#827839 
Dark Goldenrod1#FBB117 
Dark Goldenrod2#E8A317 
Dark Goldenrod3#C58917 
Sienna1#F87431 
Sienna2#E66C2C 
Dark Orange#F88017 
Dark Orange1#F87217 
Dark Orange2#E56717 
Dark Orange3#C35617 
Sienna3#C35817 
Sienna#8A4117 
Sienna4#7E3517 
Indian Red4#7E2217 
Dark Orange3#7E3117 
Salmon4#7E3817 
Dark Goldenrod4#7F5217 
Gold4#806517 
Goldenrod4#805817 
Light Salmon4#7F462C 
Chocolate#C85A17 
Coral3#C34A2C 
Coral2#E55B3C 
Coral#F76541 
Dark Salmon#E18B6B 
Salmon1#F88158 
Salmon2#E67451 
Salmon3#C36241 
Light Salmon3#C47451 
Light Salmon2#E78A61 
Light Salmon#F9966B 
Sandy Brown#EE9A4D 
Hot Pink#F660AB 
Hot Pink1#F665AB 
Hot Pink2#E45E9D 
Hot Pink3#C25283 
Hot Pink4#7D2252 
Light Coral#E77471 
Indian Red1#F75D59 
Indian Red2#E55451 
Indian Red3#C24641 
Red#FF0000 
Red1#F62217 
Red2#E41B17 
Firebrick1#F62817 
Firebrick2#E42217 
Firebrick3#C11B17 
Pink#FAAFBE 
Rosy Brown1#FBBBB9 
Rosy Brown2#E8ADAA 
Pink2#E7A1B0 
Light Pink#FAAFBA 
Light Pink1#F9A7B0 
Light Pink2#E799A3 
Pink3#C48793 
Rosy Brown3#C5908E 
Rosy Brown#B38481 
Light Pink3#C48189 
Rosy Brown4#7F5A58 
Light Pink4#7F4E52 
Pink4#7F525D 
Lavendar Blush4#817679 
Light Goldenrod4#817339 
Lemon Chiffon4#827B60 
Lemon Chiffon3#C9C299 
Light Goldenrod3#C8B560 
Light Golden2#ECD672 
Light Goldenrod#ECD872 
Light Goldenrod1#FFE87C 
Lemon Chiffon2#ECE5B6 
Lemon Chiffon#FFF8C6 
Light Goldenrod Yellow#FAF8CC 


© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button