Sunday, February 25, 2007

Adding graphic background to blog Header

I have previously published a post on how to add a graphic to the New Blogger blog header in this post: Adding a graphic to your blog Header. With this method, other than pictures, you can add other stuff like Google AdSense ads, search box, etc. You also have the choice of leaving the Title alone (for search engine purpose this is good). Or like what a lot of people do, incorporate the title into the graphic and delete the text title which I think is a bad move as text title figure prominently in search engine for figuring out what a blog is all about.

Another way is to leave the Header and the Title as it is and add a background picture, as is done in this blog Business, Travel and Leisure and change color of the text Title to contrast with the background image (for example, for a dark image, make the text Title white). The way to do it is as follows:

First, backup your template (see post Backing up and changing your New Blogger (formerly Blogger Beta) template.

You will need a suitable picture already hosted on the web and have the URL ready. You can either use Blogger to host the graphic. See post Getting the New Blogger (formerly Blogger Beta) to host the photo for your profile, sidebar, Header, etc. (click "BACK" button to get back to this page) or use Photobucket.

Amazon products for graphics

Then in the template editor window, look for this block of codes

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

Add the following line to the CSS:

background-image: url(URL of photo);

where URL of photo is the actual URL of the photo already hosted on the web. (Note: you will see some advocating using
background: url(URL of photo);
but background has been deprecated and you should be using background-image instead)

The block of codes then become

#header {
margin: 5px;
background-image: url(url of photo);
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

You will have to ensure that the color of the title contrast with the color of the background picture. In the case of the blog Business, Travel and Leisure, the picture is dark, and the original color of the blog title will not contrast well with the background picture, making it almost invisible. I changed the color to white. The block of text was then changed to

#header {
margin: 5px;
background-image: url(url of photo);
border: 1px solid $bordercolor;
text-align: center;
color:#FFFFFF;
}

where #FFFFFF is the HTML code for white.

To make things clearer, I paste below the actual codes to produce the background picture and to change the color of the Business, Travel and Leisure blog:

#header {
margin: 5px;
background-image: url(http://3.bp.blogspot.com/_jizoPL28qCY/ReF_9uMd1fI/AAAAAAAAAEQ/sBKLk65Uv2k/s1600/Bukit%2BTinggi,%2BPahang%2BHEADER%2BGRAOHIC.jpg);
border: 1px solid $bordercolor;
text-align: center;
color:#FFFFFF;


Update 15 July 2007: Regarding whether there is a need to resize the picture to fit the Header, please refer to my response to Eternalsoul in the comments

Related posts



Special fonts for your blog clickable graphic header

How to put image or logo no the side of the header

Friday, February 23, 2007

Adding music to your blog

There are many ways to add music to your blog. The most common way is to embed it into your post, or in New Blogger (formerly Blogger beta), add it as a HTML/Javascript widget via the "Add a Page Element" in the Layout.

You will first have to find a music file that is already hosted on the web, or if you have your own music file stored in your computer, upload it into a file host and then get the URL of the file. If you don't have any music file saved in your computer to upload, you can find files already hosted at freemp3mail.com, select the artist, click "Free Download" and you will be taken to the file hosted on the web. You can copy the URL from the address bar of that page. For example, this is a file already hosted on the web: Josh Aran (Blossom).

In the HTML/Javascript widget window or the post editor window, paste this code:

<embed src="URL of music file"
width="150" height="40" autostart="false" loop="false">

UPDATE 15 November 2007: A blogger commented he/she got error message "The tag isn't closed". No time to test this, but with XHTML (and HTML), opening tags without closing tags are supposed to end with a backslash /. Further, I believe with XHTML, there have to be a space as well. If you have problem, try

<embed src="URL of music file"
width="150" height="40" autostart="false" loop="false" />

and see if it helps. Please give feedback as I have no time to test.



You will have to substitute "URL of music file" with the actual URL of the music file in the script. In the script, there four attributes - width="X", height="Y", autostart="false/true" and loop="false/true". You will have to make sure that the value of width attribute X is consistent with the width of the container in which you intend to add the player into. For example, the width of the sidebar is 160 for this template, so I have to add a value less than 160 if I want to put it in the sidebar. For the autostart attribute, if you put it as true, the music will start automatically the moment your blog is loaded. Many have the opinion that this is a bad choice as the visitor may be visiting your site in the middle of the night when others are sleeping, and may be forced to quickly exit your page to stop the music. If you put the autostart attribute as false, the visitor will have to click the start button to start the music. For example, I have used the "Add a Page Element" to embed an MP3 player at the bottom of this blog Good Hobby Ideas. Try clicking on the start button to listen to the music. For this player, I have put the attribute loop="false" so that the music will stop when it is finished. If you want the music to loop continuously, you will have to put loop="true".

There are other ways of adding music to your blog. For example, you can use this site
Sonific to generate a script for putting into your post (the player will only appear in that post) or the Page Element (the player will then appear in all pages of your blog). You register for an account, verify your email address, sign in, select a songspot, and you will be taken to this page to fill in the field for the blog platform you are using and the URL of the blog you want to put the songspot in (see screenshot below, click to enlarge):

Sonific Songspot configuration page

As you can see from the screenshot, you have various option like orientating the player horizontally or vertically, select the size, whether to start the music automatically or manually, etc. You will also have to select your blog platform (which in our case will be Blogger) and type in the URL of the blog you intend to embed the player into. When you are finished the configuration, click "Activate" and the next page will display the script for you to paste into your post or the Layout. If you paste it into your post, when you try to publish it, you will get an error message "Your HTML cannot be accepted.......". Ignore it, tick "Stop showing errors for this post" and publish.

You can see an example of the player embedded into a post at Testing Sonific. The player will only appear in this particular post. You can also see the player embedded in the footer of this blog. In this case, the player will be displayed in all the pages of the blog.

You can also use Google Gadget to add an MP3 Music Player on your blog. See post Adding a MP3 Player to your blog (click "BACK" button to return to this page).

RELATED POSTS:

Music for websites: Summary (click BACK button to get back to this page)

Easy way to add music to blog using eSnip (click BACK button to get back to this page)

eSnip music player in sidebar (click BACK button to get back to this page)

Invisible background music player for your blog

Embed Imeen music playlist into blog post

Embed Imeen music playlist into blog Part 2

Apple Quicktime to make MP3 player works

Saturday, February 17, 2007

How to put a sitesearch box in your blog

In every blogspot.com blog, there should be a search box in the navbar at the top left corner of the page. Putting a search term in the box will lead to a page with all the posts containing that search term.

However, some bloggers for various reasons like to hide or remove this navbar. You can replace this a Google sitesearch box like the one in the Header of this blog. However, to be able to do that, you have to have an AdSense account. If you want to apply for an AdSense account, you can click on the text link that reads "Generate revenue from your website. Google AdSense" at the top of the right sidebar. Also, this search box works in a different way from the search box in the navbar. It produces a page with links to posts that contain the search term.

Blogger tips

There is one more way of putting a search box that gives the same result as the search box in the navbar, that is, producing a page that contains all posts rather than links. You can see an example of the search box at this blog: Good Health Information. The search box is at the bottom of the left sidebar, below the profile. Try typing in a search term (for example - diet) into the box and click "Search" and observe what is the result. You will get a page of all the posts that contain the term "diet" in it.

The method to do this is as follows. In the Layout, click on "Add a Page Element", then select HTML/Javascript and click "Add to blog". Then in the resulting box, paste this script:

<div class="widget-content"><form id="searchblog" action="/search"
style="display: inline;" method="get"><input id="search-box" name="q"
size="20" type="text"/><input id="search-btn" value="Search"
type="submit"/></form></div>


If you wish, type in a title like what I have done (Search This Site), then click "Save changes". The new Page Element will appear at the top of whichever section you have added the Page Element (in my case, it was in the left sidebar). Drag and drop to whatever position you want, preview if you want, then at the top right of the Layout, click "Save".

Update 29 May 2007: In the demonstration blog Good Health Information, you may have noticed that there are 2 search boxes, one which is the Google sitesearch box right above the main column, and the one generated using the method described here at the bottom of the left sidebar. I have put the Google sitesearch bar in a more prominent position because of 3 reasons. I can chose to have the search result open in the same or different window with the Google sitesearch box. Also, the search result page opened by using the Google sitesearch box was generated by using my Google AdSense account. Further, I can configure the background color of the Google sitesearch box as described in Blending the color of your searchbox to the colors of your site. AdSense also places unobtrusive ads at the side of the search result page that are relevant to the search. I personally do not mind such ads because they are relevant to the matter at hand. In fact, I have AdSense in most of my blogs and I have to take care not to click on them even when the ad offers something that interest me, which is not infrequent. That would be an invalid click and can get me banned from AdSense. If you want a Google AdSense sitesearch box, you will have to join the AdSense program which you can do by clicking the text link that says "Generate revenue from your website. Google AdSense" at the top of the right sidebar of all my blogs, including this one.

Acknowledge: This tip was obtained from Teancum of What to do at SVU

Friday, February 16, 2007

How to avoid your blog from being marked as a spamblog

Recently, I received an email from Blogger saying my blog Generating revenue from your blog has been marked and locked as a spamblog. I can not longer edit or post on that blog. I had to go through a word verification process to get that blog reviewed by a human, and I don't know how long that will take.

What triggered this unwanted action? Well, prior to that, I had tried to prepare a post to answer a question from a member of the Google AdSense Help group. As I don't want him to wait too long, I have been repeatedly publishing the post as I went along, with a notice at the bottom "To be continued". I believe this is what triggered the spambot to mark the blog as a spamblog.

Conclusion: To avoid being marked as a spamblog, do not repeatedly publish in a short period of time.

UPDATE 17 February 2007: Got an email from Blogger saying my blog has been reviewed, verified, and cleared for regular use so that it will no longer appear as potential spam. It took only a day, so I think Blogger Support does not really deserve the bashing they often gets in the Google Blogger Help group.

UPDATE 2 March 2007: Another of my blog Generating Revenue From Your Site got blocked as a spamblog. I did nothing, like for example what is mentioned in this post, to trigger it, nor do I see anything in the blog that might seem even remotely that can get it classified as a spamblog. Another of my reader also reported that his blog was blocked. And there were many reports of such happenings in the Google Blogger Help group. Something musst be seriously wrong with the algorithm used by Google spambot.

UPDATE 3 March 2007: Received email message saying my blog is cleared and I can now post to the blog. See. Blogger Support does not deserve the bashing they often received in the Google Blogger Help group.

Wednesday, February 14, 2007

How to prevent the content of your post from being copied

How t prevent your post from being copied
Note: You may have to play around with the font size and paragraph width to get it to display nicely in your post. Note that you can't have hyperlinks, etc., in the post. Also, I forgot to mention you will have to crop the image.

On the other hand, if you just want to frighten off potential copy-cats, refer to What to do when your blog content is copied. (Note: This part of the post is done in the normal way, otherwise, it will be impossible to include the link above.

Tuesday, February 13, 2007

Ways of putting searchbar, AdSense ad units, link units, hyperlinks, text, etc in the Blog Header as well as above the post in every page

Got a question from a reader of my blog in the comments section of this post Incorporate AdSense ads in your New Blogger (formerly Blogger Beta) posts. The question was: "How do i add adsense codes as you did on your page on Top right hand side and also on header below search. Currently, i m using 3 column blogger (http://visitformoney.blogspot.com). How do i put adsense code as you did on your site Peter?" in the comments section. As it will be difficult to answer it in the comments section, I thought I will answer it with a post.

The first thing that need to be done is to add "Add a Page Element" in the Header section and the post section of the blog Layout. Refer to the following posts for these:
Adding graphic, AdSense ads, etc to your New Blogger (formerly Blogger Beta) blog Header
New Blogger (formerly Blogger Beta): How to add AdSense ads, searchbar, "sticky post", etc. to your blog

Adding AdSense Ad units, link units or searchbar to the blog Header

First generate the script for your Ad unit, link unit or searchbar in your AdSense Account. Then sign into Blogger Dashboard, select the blog and click LAYOUT. See screenshot below. Click to enlarge:

Add AdSense ad unit, link unit, searchbar, etc. to the blog Header

In the pop-up, select HTML/Javascript, and paste your script there. Then click "Add to blog". If the Page Element is not in the place you want, hover your mouse over the Page Element, drag and drop to whereever you want it.

If you want another page element to contain, for example the link unit, just repeat the process.

BTW, you can actually incorporate both scripts into the same HTML/Javasscript Page Element if you wish.

Adding Searchbar and other stuff above the post in every page

Take this blog for example: Dummies Guide to Google Blogger, what I did was incorporate the AdSense searchbar together with the hyperlink and the text within the same HTML/Jayascript Page Element. I put the script in the scrollbox below for you to see:

<!-- SiteSearch Google -->
<form action="http://www.google.com/custom" target="google_window" method="get">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" height="32" align="left">

<br/>
<input value="dummies-guide-to-google-blogger.blogspot.com" name="domains" type="hidden"/>
<label for="sbi" style="display: none">Enter your search terms</label>
<input maxlength="255" id="sbi" value="" name="q" size="35" type="text"/>
<label for="sbb" style="display: none">Submit search form</label>
<input id="sbb" value="Google Search" name="sa" type="submit"/>
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input id="ss0" value="" name="sitesearch" type="radio"/>
<label for="ss0" title="Search the Web"><font color="#000000" size="-1">Web</font></label></td>
<td>
<input id="ss1" checked value="dummies-guide-to-google-blogger.blogspot.com" name="sitesearch" type="radio"/>
<label for="ss1" title="Search dummies-guide-to-google-blogger.blogspot.com"><font color="#000000" size="-1">dummies-guide-to-google-blogger.blogspot.com</font></label></td>
</tr>
</table>
<input value="pub-94080740917" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="3432092235" name="channel" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input value="ISO-8859-1" name="oe" type="hidden"/>
<input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
<input value="en" name="hl" type="hidden"/>
</td></tr></table>
</form>
<!-- SiteSearch Google -->

<center><a href="http://dummies-guide-to-google-blogger.blogspot.com/1999/12/content.html"><h1>CONTENT</h1></a></center>
<center>Click on above to get to the CONTENT page. Find topics by using the searchbar above or in the navbar at the top-left corner of the page or use the Labels in the right sidebar</center>

Thursday, February 08, 2007

Getting New Blogger (formerly beta) to host your photo for the profile, sidebar, etc

Update 14 July 2007: I have preferred to use Blogger to host my photos rather than third party photo host like Photobucket because of doubts regarding the long term stability of Photobucket, but they have recently been confirmed to be taken over on On May 30, 2007 by Fox Interactive Media, a News Corporation subsidiary at a price rumoured to be as high as $250 million US. So Photobucket is now backed by a big and financially stable corporation and I no longer have that reluctance to use Photobucket to host photos for my blogs. Using that may be easier than the convoluted steps outlined below:

I have written a previous post on how to get Blogger to host your photo for the profile, sidebar, <img> tags, etc at Getting Blogger to host your pictures for the profile, sidebar, etc.. However, tests have shown this method no longer works.

For New Blogger, this is what you have to do. Upload your photo to a post which if you don't want it to be on the main page, pre-date it to 2005 or something, or even in a blog created specially to host pictures (Blogger does not limit the number of blogs you can create). I upload this photo as an example:

Kuala Lumpur night skyline with copyright notice
Kuala Lumpur night skyline


Click on the picture (or the caption) to get an enlarged version of the photo. In the method describe previously, you will use the URL in the address bar of this page. Don't. It wouldn't work now. You can try it yourself if you want. Try putting that URL into the Photo URL in the EDIT PROFILE page and confirm for yourself that it can't be done. You will get the error message "Cannot find file at specified URL: link is broken (failed request)" and if you have already put in your profile photo, that will remain as this attempt will fail to replace it. You can also try putting that photo into the sidebar using "Add a Page Element" in the Layout, choosing "Picture" in the pop-up, and putting that URL in "Configure Image" page. You will get the error message "Please specify an image". Putting that URL int the <img src="photo URL"> tag will also not display a photo.

Instead, in the page containing the enlarged photo, in the menu bar, click VIEW > PAGE SOURCE to get the source code for the page. In this case, the source code is as given in the scroll box below:

<html>
<head>
<title>copyright+notice.jpg (image)</title>
<script type="text/javascript">
<!--
if (top.location != self.location) top.location = self.location;
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="http://lh6.google.com/_jizoPL28qCY/RcqnvLgvPBI/AAAAAAAAABs/9tHhSLWaElM/s1600/copyright%2Bnotice.jpg" alt="[copyright+notice.jpg]" border=0>
</body>
</html>


And almost at the end of the codes, you will see src="http://1h6.google.com/.....
I have to put the full URL in a scroll box, otherwise the long unbroken URL will extend into the right sidebar (FireFox) or cause the sidebar to slide to the bottom of the page:

http://lh6.google.com/_jizoPL28qCY/RcqnvLgvPBI/AAAAAAAAABs/9tHhSLWaElM/s1600/copyright%2Bnotice.jpg


This should be the photo URL you should use for the profile photo, for inclusion in the <img src="photo URL"> tag, for Picture in the sidebar, etc.

Update 12 April 2007: I have made the actual photo URL in the first scrollbox red so it is easier to spot.

Incidentally, the above photo is copyright of Tourism Malaysia in which I have put a copyright notice at the bottom right of the photo. I will describe how to put a copyright notice in your photo in a post in Dummies Guide to Google Blogger. (I have just added that post to that blog. You can read it here: A simple way to put a copyright notice to your photos

The photo can be used to promote tourism to Malaysia. 2007 is Visit Malaysia Year, and many programs have been planned for visitors and this will be a good year to visit Malaysia. For more information, see Guide to Malaysia.

Acknowledgement: This tip was provided by my online friend sookietex of Public Domain Clipart

Adding a MP3 Player to your Blog

With Google Gadget, you can easily add a MP3 Player to your blog. I have added one at the bottom of the right sidebar in this blog Recreation and Sport. All I have to do is to go to Google Gadget, choose "MP3 Player", click "Add to your webpage" and will be taken to the page Add this gadget to your webpage. You can set, title, the height and width of the MP3 Player. A default URL of a song is already added for you. If you have your own song hosted somewhere, all you have to do is to replace the URL of the default song with the URL of your own song.

In the case of the above blog, a check of the template revealed this:

.sidebar {
float:left;
border-top: solid 1px #fff;
padding: 4px 0 0 7px;
background: #fff;
width: 260px;

That is, the width of the sidebar is 260 pixels. I thus set the width of the MP3 Player to 255 (see screenshot below):

Google Gadget MP3 Player

I then click "Get the Code", copy the code generated, go to the template Layout, click "Add a Page Element" in the right sidebar section, choose HTML/Javascrip in the pop-up, pasted the code into the window and saved, then drag the new Page Element to the bottom of the right sidebar section.

To play the music, all one has to do is to click on the pink button.

An MP3 Player you can carry around

Not satisfied with just having an MP3 Player in your blog? Want a MP3 Player you can carry around? Find all kinds of the Mp3 Players you can carry, and order them right to your home. Online Stores have made the process of Comparison Shopping much easier. At one site you can and Compare Prices and get a great deal on a new player.

Related posts:
Adding Music to your blog
Adding Music to your blog: Another easy way

Tuesday, February 06, 2007

How to get indent for your post paragraph

This question crops up farely frequently in the Google Blogger Help group, so I am writing a post to explain how it is done.

First, backup your template.

If you are using an old classic Blogger template, add the following style script to your template immediately after the <style> tag:

p {
text-indent: 20px
}

If you are using the New (formerly beta) Blogger template, you will have to add the above script below the <b:skin> tag, or better still add it just above the following block of codes:

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

Save the template.

Now whenever you want your paragraph to be indented, you have to type your text between the <p> and </p> tags, that is, start the paragraph with a <p> tag and end it with a </p>.

See this post for an example of a post with indented paragraphs: Quick tips on how to draw a realistic face

UPDATE: 11 April 2007: A reader has commented on difficulties in implementing the hack above, and asked for alternative. I have published an alternative way to indent your paragraphs at Another way to indent your paragraphs (click "BACK" button to get back to this page).

Monday, February 05, 2007

New Blogger Template Tutorial: Adding a Second Sidebar

If you want to add a second sidebar to your existing template, Hans of Beautiful Beta has a post Adding a second sidebar Part II have a very well written instruction on how to do it. Even if you have no intention to add a second sidebar, his post is worth a read to understand the New Blogger template better. The only thing I can add is to copy his numbered lines of code into Notepad (see below)

010: <body>
020: <div id='outer-wrapper'>l<div id='wrap2'>
030: <!-- skip links for text browsers -->
040: <span id='skiplinks' style='display:none;'>
050: <a href='#main'>skip to main </a>
060: <a href='#sidebar'>skip to sidebar</a>
070: </span>
080: <div id='header-wrapper'>
090: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
100: <b:widget id='Header1' locked='true' title='Second Sidebar (Header)' type='Header'/>
110: </b:section>
120: </div>
130: <div id='content-wrapper'>
140: <div id='main-wrapper'>
150: <b:section class='main' id='main' showaddelement='no'>
160: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
170: </b:section>
180: </div>
190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>
210: <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
220: <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
230: </b:section>
240: </div>
250: <!-- spacer for skins that want sidebar and main to be the same height-->
260: <div class='clear'> </div>
270: </div> <!-- end content-wrapper -->
280: <div id='footer-wrapper'>
290: <b:section class='footer' id='footer'/>
300: </div>
310: </div></div> <!-- end outer-wrapper -->
320: </body>

and then read the rest of his tutorial side by side with the list in Notepad so you don't have to go back and forth in the post to refer to the list of code.

As for me, I am satisfied using ready made 3 column templates. See
Blogger Beta: 3 column template
New Blogger (formerly beta) 3 column template modified by Stavanger.

Friday, February 02, 2007

Old Classic Blogger or New Blogger (formerly beta) account

Here is one way to tell if a blog is still using the old classic Blogger account or the New Blogger (formerly beta) account is to look at the navbar at the top of the blog. If it is the New Blogger account, the left part of the navbar should look like this:
New Blogger (formerly beta) navbar
If you see anything different from the above screenshot, then it is still using the old classic Blogger account.

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics