Tuesday, July 31, 2007

Make a clickable picture (image, photo or screenshot, banner)

In response to a reader's request, I am showing in this post how to make a picture (an image, photo or screenshot) clickable, that is, become a hyperlink.

The first thing is you must get the picture up on the web. This you can do by uploading to Photobucket, Get Blogger to host your picture or start a PUBLIC Google group to upload your photo. Get the URL of the photo on the web.

The basic HTML for the clickable picture (picture hyperlink) is:

<a href="URL of target site"><img src="photo URL"></a>

To the ><img> tag, you can add more attributes separated by space, especially the alt="description" tag which will give some information of the picture and will server 2 purposes. Search engines cannot read images, but they can read what is written what is typed between the "" marks in the alt="" tag. This will help the search engines knows more about your post and helps in SEO (Search Engine Optimization). When for whatever reasons the picture cannot be displayed, instead of an empty box, the visitor will see what it typed between the "" marks in the alt="" tag.

Another attribute is the width="W" where W is the width of the image in pixel you want it to display. This is especially important when the image you uploaded is a wide picture which may exceed the width of the main column (if you include it in a post) or the width of the sidebar (if you put the image in the sidebar). You will then have to know what it the width of the main column or siderbar. Refer to How to find the width of the blog Header, main column and sidebar (click BACK button to get back to this page).

A less important attribute is the title="" attribute. If you add this attribute, when a visitor hovers the mouse over the picture, a tool tip will appear displaying what you typed between the "" marks. This may give more information to the visitor on what to expect if he clicks on the hyperlink picture.

As an example, I will put a clickable button (made by a grateful reader without me asking) below:

blogger resources, help for bloggers using Google Blogger platform. It is supposed to link to this blog, but since your are already in this blog, I have linked it to a site made for complete Blogger beginners. Hover the mouse and observe what happen and click on the banner to see where it takes you. For clarity, I will put the HTML used to display the clickable banner in the scroll box below:

<a href="http://dummies-guide-to-google-blogger.blogspot.com/" target="new"><img src="http://2.bp.blogspot.com/_jizoPL28qCY/Rp8UuG48MuI/AAAAAAAAAYQ/BaK8uEAPJic/s1600/Peter%2BChen%27s%2BBlogger%2BTips%2B%26%2BTricks.jpg" alt="blogger resources, help for bloggers using Google Blogger platform" title="Get great information and help here by clicking on banner"></a>


For more information, refer to How you can help Blogger Tricks and Tips (on a completely voluntary basis, no one should feel obligated)

Saturday, July 28, 2007

Displaying HTML tags

A blog reader has asked for instruction on displaying HTML tags/codes, especially how to put them in a scroll box. If you try to display
<a href=URL">Description</a>
and you type it exactly as you see it above, what will be displayed is
Description

You will have to refer to How to post special characters. To make it clearer, I used
special code to display HTML tags
to display
<a href=URL">Description</a>

If you have longer blocks to display in a scroll box, you may do what I do. I save the code for the scroll box in a Notepad file and saved it in a folder where I can easily find it when I want. The code for the scroll box I have saved is given in the scroll box below:

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


I have width: 395px; because the width of the main column of the main column (posts) of this blog is 400. height: 100px; I can change to suit what I put inside the scroll box. For example, I edited height: 100px; to height: 40px; for the scroll box above. If you want to find the width of your blog Header, main column, sidebar, refer to How to find the width of your blog Header, main column, sidebar (click BACK button to get back to this page).

Regarding making a scroll box, you should refer to Make a scroll box (click BACK button to get back to this page).

If I type it as you see it above inside the scroll box, you will not see the code for the scroll box as seen above. What I had to do is to change < to code for less than and > to code for greater than

You can do it manually one by one but a smarter way is to put the HTML code you want to display into a Notepad file and use Edit > Replace from the menu bar and let Notepad find and replace all the < and > automatically for you. See screenshot below:

Using Notepad replace function to change special HTML character to code to display on the web

Once you have entered what you want, just press "Replace all" and it will all be done automatically for you. You can then highlight all the edited code and paste it into the scroll box.

To further illustrate, nisha has asked for the HTML for a clickable link to be displayed inside a scroll box. I will first type the HTML code for the hyperlink in Notepad:

original HTML for hyperlink

and then used the method described above to change it to

HTML for hyperlink edited to display on the web

I will then copy-paste the code for a scroll box, and place it inside the scrollbox as explained in the post Make a scroll box (click BACK button to get back to this page). I will then copy all the edited HTML for the hyperlink as shown in the second screenshot for the Notepad and paste it inside the scroll box and I will end up with this:

<a href="http://nishasworld-and-babyalisha.blogspot.com/">her experiences,interests,dreams,family and baby alisha...</a>


I hope this is clear. If you have further question, leave a comment.

RELATED POST:

Scroll box FAQ

Get email address of commentator with Blogger commenting system

I previously published a post Haloscan commenting system for your blog (click BACK button to get back to this page) in response on how to get the email address of commentator. I stated that this is not possible with Blogger commenting system, but sisea of Sisea (This is a Chinese blog) says it is possible if you receive notification of comments via gmail. I tested this with Good Hobby Ideas, set the blog to receive comment notification by a gmail address, made a test comment, and found that it was true. See screenshot below (address partly blanked out for privacy):

Blogger commenting system: Get email address of commentator

I would expect you would also be able to get the email address if you choose to receive comment notification via other email addresses like Yahoo, and I hope to test that soon and update this post. I missed this because I moderate all my blogs, and it is not possible to get the email address of the commentator in the email notification for comment moderation. Since I already get notice of a comment made, I saw no necessity of getting comment notification. Anyway, many thanks to sisea for the alert.

Update: 11 January 2007: Apparently, something has changed since the last test. I made a few test comments and found that one can no longer get the email address of commentator even if one set to receive email notification via Gmail.

Friday, July 27, 2007

Add graphic to blog Header: Easy way

I have previously publish a post Another way of adding graphic to your blog Header (click BACK button to get back to this page), but the result wasn't satisfactory. I had no time to do further testing. Now I have.

If you want an easy way to add a graphic to your Header, go to LAYOUT and click "Edit" on the Header Page Element. you will get a "Configure Header" pop-up:

New Blogger configure Header

You can either upload an image stored in your computer or enter the URL of a photo already hosted on the web. I have added a graphic to the header of Good Hobby Ideas. What I did was crop a section of a large image of the clouds. The image was saved in my computer so I click browse and located the image. I click "Save" and waited the image to be uploaded, then click "Save changes". The first time I did it, the width of the image was too wide for the width of the blog Header. So I went into the template editor (see Backing up and changing New Blogger template). From the CSS, I found this:

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

which tells me that the width of the Header is 750 pixels. I opened the free and very good Irfanview free photo editor and resized the width of the image and save the image again. I deleted the original too wide image from the Header, then uploaded the resized image again, and you can see the result at Good Hobby Ideas. You will notice the image fits the Header nicely.

Related posts (click BACK button to get back to this page or close new window if link opens in new window):
Adding graphic, Advertisements, etc., to your blog Header

Special fonts for your clickable image Header without having to delete the blog text title

Put image or logo at the side of blog Header

Another way to add graphic to your Header

Change "Comment" to "Leave Comment" or anything you want

This post describe the old ways. For an easier way, refer to Blogger Edit Blog posts options


Some bloggers are not satisfied with the simple "comments" at the bottom of a post which you have to click to view or leave a comment. They want to change it to something else like "Leave Your Comment" for example. To see a blog where that has been changed, surf over to Google AdSense Signup Page. Look at the bottom of the only post. The standard "comment" have been changed to "Leave Your Comment".

This is how you do it. Click TEMPLATE tab, then the EDIT HTML sub-tab to get to the template editor. First, backup your template plus the Page Elements. If you don't know how to do it, refer to Backing and changing New Blogger template. Once you have done it, tick the "Expand Widgets Template" and wait for it to fully expand. Then look for this line of code:

<data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>


To help you find the code, click ctrl+F and type or copy-paste part or all of the code you are trying to find into the "Find" field at the taskbar at the bottom of the page, and click "Next". The code will be located and highlighted.

Another way to do is is to click inside the template editor window, press ctrl+A to highlight all the codes, press ctrl+C or right-click and select "copy" to copy the expanded template into clipboard, open a Notepad file, paste the template into it. Click Edit > Select All in the menu bar at the top to highlight all the template. Click Edit > Find in the menu bar, and copy-paste part or all of the code you want to find. For example, paste <data:top.commentLabelPlural/> into the "Find what" box, and then click "Find Next".

Replace <data:top.commentLabelPlural/> (highlighted in red) with "Leave Your Comment". Click inside the Notepad file and press ctrl+A to highlight all the edited template, click ctrl+C to copy into clipboard (or click EDIT > SELECT ALL in the menu bar followed by EDIT > COPY). Go back to the template editor. The whole of the original template should still be highlighted. Click DELETE key to delete the original template, then press ctrl+A to paste the edited template in the clipboard into the template editor window (or right-click inside the template editor window and select "Paste"). Click PREVIEW at the bottom of the page and if satisfied, click "Save Template".

If you want to check, click VIEW BLOG to confirm that the standard "comments" have been changed to "Leave Your Comment" (or anything else you had chosen).

Haloscan comment system for New Blogger blogs

Note: Read updates below.

Got a question about getting the email address of people who comment in your post. I know that with the Blogger commenting system, it is not possible, but with the Haloscan commenting system, commentator have to enter their their email address. So I decided to sign up for a Haloscan account to implement the Haloscan commenting system for Natural Remedies. If you want to test out Haloscan comment, go to Natural Remedies and make a comment. Any comment, but hopefully something related to the post. Otherwise, just click on "comment" and do not complete the process/

If you want the Haloscan commenting system for your Blogger blog, it used to be very difficult. See Testing Haloscan commenting system hack for Blogger Beta (now New Blogger. Things have changed since, and installing Haloscan commenting system for New Blogger is now a breeze with their installation wizard. All you need to do is to sign up for an account at http://haloscan.com/. They don't even need you to verify your email address. For tasks like this, I highly recommend using a browsing that has tabbed browsing like FireFox (click BACK button to get back to this page) which also happened to be recommended by Blogger. Then you can be in the Haloscan page in one tab, and in the Blogger page in another tab, all in the same window.

I forgot to record the steps I took as I install the Haloscan system for New Blogger, but it is not difficult. After signing in, look for the Blogger installation wizard link. Click on it and it will take you to the wizard. It will instruct you to first sign into your Blogger account, click LAYOUT, click the TEMPLATE tab, then the EDIT HTML sub-tab. Backup your blog. See Backing and Changing New Blogger Template. BTW I used the filename "foodasmedicine 27 July 07 before Haloscan" as the filename so I know the reason for the backup.

So open another tab to go to blogger.com and sign in. Follow the instruction above to backup your blog template. Remember where you saved the backup template. Go back to the Haloscan tab and in the wizard, below the instruction, you will see this:

Haloscan Blogger template upload

Click "Browse" and locate the backup template you saved as described above. After a successful upload, you will be taken to a page with a button "Download new template". Click on that button and you will be asked to download the new xml template file for your blog. Click "Save" and save the new template with a suitable name. To give you some idea, I used "foodasmedicine 27 July 07 after Haloscan".

After a successful download and having saved the new template where you can locate it again, go back to the Blogger tab, click TEMPLATE tab, then the EDIT HTML tab and click "Browse" and browse to the new template you downloaded from Haloscan. Once you have located it, click UPLOAD and wait for the template to finish uploading. Once that is finished, your job is done.

If you want check, click VIEW BLOG and make a test comment.

Regarding the rest of the Haloscan commenting system, I will check when I have time and update this post accordingly. If you have been using the Haloscan all along, and you have some information for me, please post a comment. It will be highly appreciated.

Update 28 July 2007: A reader alerted me to the fact that it IS possible to get the email address of commentator with the Blogger commenting system. See Get email address of commentator with the Blogger commenting system (click BACK button to get back to this page).

Update 30 September 2007: I myself do not use Haloscan commenting system except for one blog which I used for demonstration. However, I did not check if the old comments had been deleted or not, so I cannot vouch for this. But a blogger commented if you implement Haloscan commenting system for your Blogger blog, all your old comments will be deleted. See comments section.

Update 27 December 2007: I am going to revert back to the Blogger commenting system for Natural Remedies as I find moderating the comments inconvenient, and now prefer the Blogger commenting system as it has introduced Open ID. Fortunately, I have followed my own advice to back up the template PLUS Page Elements (and named the backup template ".....before Haloscan comment hack", so I know exactly which template to put back.

Monday, July 23, 2007

Make use of Labels (Categories) do what you want

Often, bloggers ask questions about how to do certain things which I believe can be done by making use of Label List in the New Blogger. I do multitasking and often try to do more than one thing at the same time. I think I was doing this post to answer a blogger question, and then left it to do something else. I have already made a post (recently which may address this issue. Refer to Link List: What it is and how to make use of it. The relevant section I think is at the bottom of that post.

Saturday, July 21, 2007

Why I prefer 3 column templates for my blogs

The section of your blog above the fold (what you visitor see without have to scroll down vertically) is the most important part of your blog. Businessmen like ground floor shop space, and that section above the fold is like ground floor shop space. Just as shoppers are lazy to walk up the stairs the second floor (the third floor would be worst), surfers are often lazy to scroll down your site to see the rest of the page and will quickly surf away if nothing catch their eye. So depending on what your objectives are, you should try to put what you want your visitors to see first above the fold. And the best way for you to do this is to use a 3 column template and not use a deep graphic Header that takes up most of the space above the fold. You may find it makes your blog attractive, but you will be unable to put many things above the fold.

Sometimes you are forced to compromise, like I compromised by putting a sitesearch box at the top of the main column above the post. But I feel it is useful because visitors can't miss that and hopefully they will use it to find topics in my blog and thus stay in this blog longer than otherwise. I think it is a worthwhile sacrifice. If you want a similar sitesearch box, you will need a Google AdSense account. You can apply for one via the "Generate revenue from your website. Google AdSense" text link at the top of the right sidebar of most of my blogs, including this one. (sorry, I got mixed up with my other blogs. I was forced to put it in the Header section because I set it so that visitors can search the web, this blog as well as 2 related blogs of mine. This made it too wide for it to fit into the main column)

If you want the sitesearch box for your blog, these posts may help you add implement it:
Add search box, AdSense ads, "stick post" at the top of main column (click BACK button to get back to this page)

Generate script for Google search box

Blending colors of your Google search box with the colors of your site

Add searchbox, graphic, AdSense ads unit or link unit, etc, to blog Header.

Plus here are some sources and demonstration blogs of 3 column New Blogger templates:

(click BACK button to get back to this page:
New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense





If you want to do something

I think 3 column is useful as it helps you put more stuff above the fold (what you visitor see without have to scroll down vertically) that is helpful. I suggest you start using labels and then add a Label List to the first left column. Helps your visitors find relevant new/old posts quickly (I put Labels (Categories)) when I add a Label List as other bloggers using different blogging platform are more familiar with the term categories.

It is probably possible to get rid of one sidebar with some tinkering of the CSS and if you don't want to have an empty space in its place, you will have to change the main column and sidebar widths plus do some calculations. As I am a 3 column addict, I have no interest in trying and lots of other things to do. I hope you accept my suggestion above as I really think 3 column is very useful. Many surfers are lazy and if they don't see the thing they are looking for when they first land on your blog, they will quickly surf away without bothering to scroll down to see what else is there in the rest of the page below the fold.

Wednesday, July 18, 2007

Importance of anchor text in links (hyperlinks)

The HTML for a clikable link (hyperlink) is

<a href="target site URL">anchor text</a>:

where anchor text is whatever what you should type in which you want displayed (seen) on the web (if unfamiliar with URL, see What is URL and how to get it). For example, this HTML

<a href="http://foodasmedicine.blogspot.com" target="new">Natural Remedies</a>

will result in the following clickable link as seen below which when clicked open the target site in a new window:

Natural Remedies

I have added the attribute target="new". Some also use target="_blank" but the first one you don't need to press the shift key and is shorter. Please note that both has been deprecated and is on the way out with the XHTML (strict) coming into force. However, both will still been supported by XHTML (transitional) for a long while more.

The anchor text is important to search engines because it tells what the target site is all about and you should use something relevant/descriptive of the site for the target site. Don't ever use

<a href="target site URL">herelt;/a>:

as it tells nothing about the target site, and is useless for telling search engines what that target site is all about.

Monday, July 16, 2007

Menu bar for blog Header

A blog reader asked for a menu bar, pointing to a website that gave instruction on how to do it. Unfortunately, the instruction wasn't clear and I have to experiment a bit on my own. You can see the result at New Zealand Guide. This blog uses the Hackosphere 3 column New Blogger template. If you are not bothered about that "menu bar" below blog title problem or you don't face similar problem with the template you chosed, skip the update in red and go to the rest of the post. But if you have some interest in getting a color that matches your site, a pretty comprehensive explanation about the proceedure is described

Update 16 July 2007: I first started experimenting with a test blog, and successfully put the menu bar above the Blog title. I then changed the URL and made it the New Zealand Guide. I vaguely remember converting the standard 2 column Blogger Minima template to Hackosphere 3 column New Blogger template and proceeded to customize the blog plus put the menu bar back. However, I do multi-tasking, and simultaneosly have a few browsers and tabs opened, participating in forum, responding to comments and emails (and reading them), preparing or editing posts, etc. Maybe my memory wasn't that good, because today when I check the blog, I found it to be only a 2 column template, plus the menu was below the blog title. I tried to change to the above 3 column template to redo things all over again, but failed to upload the template. Got the error code bX-dgyx2j.

I then decided to stick to the 2 column template, but tried to drag the menu bar above the blog title, but failed. I then realized the "Add a Page Element" widget in the Header section of the LAYOUT was missing and went to the template editor to check. I found the code

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

which should be

<b:section class='header' id='header' maxwidgets='' showaddelement='yes'>

so proceeded to change it, but when I tried to save the template, got the error message:

We were unable to save your template
More than one widget was found with id: HTML1. Widget IDs should be unique.

Messing with the New Blogger template is very much less forgiving than the old classic Blogger template, and the tiniest thing can make you unable to save a New Blogger template. I have a lot of other things to do, so decided to leave things as it is for the moment and come back to this again later. I should be able to do it as you can see the menu bar of Guide to Caribbean is above the blog title. It will only be a matter of getting the spare time to redo it.


First, you will have to add an additional "Add a Page Element" widget to the Header section of the LAYOUT. Instruction on how to do this is described at Add graphic, AdSense ads or link units, searchbox, etc. to blog Header. Once you have that, click on "Add a Page Element", then chose HTML/Javascript and in the box, type the HTML for a table which may be a single row or multiple-row table, with hyperlink HTML for the data. For example, for a single row menu, The HTML may take the form

<table><td><tr><a href="URL 1">description 1</a></td><td><a href="URL 2">description 2</a></td><td><a href="URL 3">Description 3</a></td></tr><table>


How many <td> and </td> tag pairs you have depend on how many sections you want. Also if you want a border, you will have to add the border="1" attribute, and if you want background color, you will have to surround the table HTML with <span style="color:red;"> and </span> tags. The color red may be replaced with the hexadeximal HTML code for color for a greater choice of colors. A great tool I frequently use when dealing with colors is ColorPic sometimes also called color picker. Someone said inbound links to your blog will help to increase its PageRank while outbound links will to some extend decrease its PageRank. So instead giving you the active link to click on, just type or copy-past "colorpic" into the search box above, tick the "Web" radio button, and I am pretty confident the site you need will be the first result in the SERP (search engine result page). With ColorPic, to get the color code of a particular section of your site, all you need to do is to hover your mouse over that section and you will see the color code in ColorPic.

Another aid I use "Color Blender" which a a website and there is nothing to download. Just type or copy-paste "Color Blender" into the search box above, tick the "Web" radio button, search and you will probably find the site I use in the second result of the SERP (search engine result page). You can chose between 1 to 10 midpoints (colors that can blend with 2 particular color on your site), depending on how fussy you are. If you don't want to be put into a position of having to make a choice, just leave "Midpoints" as the default 1. For illustration, I chose 4 midpoints, and the color and color codes in the screenshot below gave 4 possible colors that can blend with the 2 colors you chose from your site with ColorPic:

Color Blender

Coming back to the table HTML code to display the clickable "menu bar", to make the explanation clearer, I will put the codes I used to display the menu bar in the blog New Zealand Guide in a scroll box below:

<span style="background-color:#C0C0C0;"><table border="1"><tr><td><a href="http://www.text-link-ads.com/?ref=52827">Earn with TextLinkAds</a></td><td><a href="http://generating-revenue-from-your-site.blogspot.com/2007/03/how-do-i-earn-from-adsense.html">Earn with Google AdSense</a></td><td><a href="http://generating-revenue-from-your-site.blogspot.com/2007/06/earn-with-amasenseads.html">Earn with AmaSenseAds</a></td><td><a href="http://www.auctionads.com/refer_2c73d07577f5a006e245">Earn with AuctionAds</a></td></tr></table></span>


The menu bar is at the top. If you want it elsewhere, for example, at the bottom of the Header, just drag the Page Element down to where you want it.

You may be able to do the same thing with other templates. I tried it with Denim template, but font (and the "menu bar" was deep and the link color was blue which blend into the blue header color and is practically invisible, and I could not find a way to change the link color. I did managed to change the font size though to make the menu bar the size I wanted. If I change the background color of the table to be very different from blue, I may get it to work, but the blog then may not appear nice. Anyway, I will do more experimenting if I ever get the spare time and update this if I get any positive result.

Update: Managed to get the font size of the table for the Denim template reduced, but was used a color which is the same as the headings in the sidebar, but it doesn't blend with the blue Header. Anyway, by doing this, at least the links are visible. You can see the demonstration blog at Guide to Caribbean. I paste the HTML used in the scroll box below:

<div style="background-color:#FFD595; font-size:50%;"><table border="1"><tr><td><a href="http://www.text-link-ads.com/?ref=52827">Earn with TextLinkAds</a></td><td><a href="http://generating-revenue-from-your-site.blogspot.com/2007/03/how-do-i-earn-from-adsense.html">Earn with Google AdSense</a></td><td><a href="http://generating-revenue-from-your-site.blogspot.com/2007/06/earn-with-amasenseads.html">Earn with AmaSenseAds</a></td><td><a href="http://www.auctionads.com/refer_2c73d07577f5a006e245">Earn with AuctionAds</a></td></tr></table></div>


Maybe one day I will change the background color to white and it may look nicer.

Sunday, July 15, 2007

Profile Directory - increase traffic to your blog

Daniel Thomson posted a nice comment about my blog at Put photo of authors in post footer alerting me to a post Profile Directory: Blogger Tips and Tricks. He also have a post explaining the importance of a Profile page and why he set up that Profile Directory at Why Profile Pages are important. I have added my profile to his profile directory, and it may help you get more traffic to your blog if you do that too.

Saturday, July 14, 2007

Make music slideshows with FlipTrack

Recently became a grandfather. Made 2 nice music slideshows using at Make nice music slideshows with your family photos and another one at Lewis and "This Old Man" music slideshow using
FlipTrack. Reasons why I made 2 different slideshows with almost the same photos will be explained later.

To make a nice music slideshow using FlipTrack, all you need is to register, provide a username, an email address and agree to their terms. You don't even need to verify the email address. You will immediately be accepted. If you are ready, click on the "Make Video" button and you will be taken to a Library of music arranged in categories. There are many categories. In my case, I was going to make a music slideshow related to "Babies, Kids and Family", so I chose that category. I wanted a fairly long music, and for the first music video, I chose "Old McDonald" (1.19 minutes). Click "select" and the music will start uploading, then you get to a page where you add photos. You can add photos by browsing through My Computer, enter URL of photo already hosted on the web, MySpace, Frienster, Flickr, Facebook or Photobucket. Upload the photo into FlipTrack. You can upload more than one. After successfully uploading, you will see a preview of the photo/s you uploaded at the bottom of the page.

FlipTrack music slideshow add effectsYou can add effects like add caption, "zoom in", "zoom out", "pan left", "pan right", "fade", etc by clicking on "Effects" button at the bottom right of the "preview photo" you want to add effects (see button circled in red in screenshot). If you have more than 1 photo, you can add effects one by one. Once you are ready, click "Save" and in the following page, you can add a title for your music slideshow, select a category to put the slideshow in, enter a description and also tags if you want, and opt to have it as public or private. When that is done, click "Make Video" and your music video will be prepared to publish direct to MySpace, Frienster, Hi5, Xangga, LiveJournal, Freeweb, Blogger, Typepad. If you chose to publish the music slideshow to direct from FlipTrack to Blogger, for example, you will have to will have to give your Blogger username and password. I haven't tried it, but it will be logical to assume that you will end up with only the music slideshow in the post, unless FlipTrack have made provision for you to add text.

Another way is to copy the script for embedding the music slideshow into the post editor window in Blogger, which was the route I chose. See screenshot below. Click inside the "Embed" box, press ctrl+A to highlight all the codes (codes highlighted in blue in screenshot), right-click and select "copy" to copy into clipboard, then paste it into the Blogger post editor window. Very easy.

FlipTrack music slideshow blog direct or get embed script

Oh yeah. Almost forgot. I added more photos in the second music slideshow Lewis and "This Old Man" music slideshow hoping to have the music play to the end, but it turned out that both slideshows ran the same 22 seconds.

Update 15 July 2007: Tested the slideshows again. Seemed like the first time I played the video, the music lasted longer. When I replayed them, both ran 22 seconds

Related posts:

Hot linkable file host and embedding music player
How to add music to your blog
Add MP3 player to your blog
Invisible background music
Easy way to add music to blog (eSnip)
eSnip music player in sidebar

Music at Amazon

Wednesday, July 11, 2007

Change background color or image of main column of blog

Update 2011: 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

Friday, July 06, 2007

Incorporate AdSense ads in post and wrap text around ad

Please note that in the l is a L and not 1 (one) and the exclamation mark is a ! (exclamation mark).

Important note: Before you make any changes to your template, always backup your current template PLUS Page Elements first. Refer to Backing up and changing New Blogger template.

There are more than one methods. I tested a method at Fish and Fishing and another method at Internet Tips and Tricks. I shall describe the methods below:

Wrapping text around AdSense ads by replacing <!-- with etc.

This was the method I used for Fish and Fishing. You will first have to sign into AdSense account and generate the script for "AdSense for Content" ad unit. If you are not familiar, refer to Generating script for AdSense products. It is best that you know the width of your main column first so that you know what ad format is suitable. It is best you use a browser with tabbed browsing like FireFox. Then you can open a new tab in the same window to sign into your Blogger account. In the Dashboard, click LAYOUT for the relevant blog, then click the TEMPLATE tab followed by the EDIT HTML sub-tab. This will open your template editor. Then look for codes like

#main { float: right; width: 600px; margin: 0px; padding: 0px 50px 0px 0px; line-height: 1.5em; 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 */ }

or

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

How the codes will be written depend on what template you are using. The first codes above was for the template I used for Fish and Fishing. I will put a link to the template later when I publish another post. The first codes contains "width: 600px;" which tells me that the width of the main column is 600 pixels wide. There are 6 formats which may be suitable for putting into the posts. They are:

336x280 Large Rectangle
300x250 Medium Rectangle
250x250 Square
200x200 Small Square
180x150 Small Rectangle
125x125 Button

As the main column width is 600 pixels wide, and AdSense has said that 336x280 Large Rectangle is one of the better performing format, I chose this format for the blog Fish and Fishing as the main column is wide enough to take this format in comfortably.

Generate your AdSense script as described above and copy it into clipboard. Then go to the tab where you are logged into Blogger. In the Dashboard, click LAYOUT for the relevant blog. Then in the LAYOUT, click the TEMPLATE tab and then the EDIT HTML sub-tab. This will open the template editor. Tick the "Expand Widget Templates" and wait for the template to fully expand. You will then have to look for the codes contain "width: 600px;" which tells me that the width of the main column is 600 pixels wide. In the template, search for the line of code:

<div class='post-header-line-1'/>

If you want an easy way, I would suggest you click on the inside of the template editor window and press ctrl+A keys simultaneously. This will highlight the whole of the template. Right-click and chose "copy" to copy the expanded template into clipboard. Open Notepad and paste the template into Notepad. Click EDIT in menu bar at the top of Notepad and chose "Select all" to highlight all the template. Click EDIT again, but this time chose "Find...". Type or copy-paste all or part of

<div class='post-header-line-1'/>

into the "Find" field. Click the "Find next" button. This will help you quickly find that code and it will be highlighted. Paste your Adsense script below this line of code. For my AdSense script, it is of the form

<script type='text/javascript'><!--
google_ad_client = "pub-9408074638";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "5588AA";
google_color_text = "000000";
google_color_url = "0099CC";
google_ui_features = "rc:6";
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>


Replace <!-- (in red) with and //--> with HTML closing comment tag

Then add table tags in before and after the AdSense script so that it become

<table align='left'><tr><td><script type='text/javascript'>
google_ad_client = "pub-94080704638";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "5588AA";
google_color_text = "000000";
google_color_url = "0099CC";
google_ui_features = "rc:6";
HTML closing comment tag
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script></td></tr></table>


Preview and if satisfied, click "Save template"

Removing the comment tags <!-- and //-->

Another way is to remove the comment tags completely, which was the method I used for Internet Tips and Tricks. In this case, from the code

#main { float: left; width: 440px; margin: 5px; padding: 0px 5px 0px 0px;

this shows the width of the main column is only 440 pixels wide. So this time I chose the 250x250 Square format. The method is exactly the same as above, but instead of replacing Replace <!-- with and //--> with HTML closing comment tag, I just removed the comment tags completely, so that what I have is as shown below (with the <div class='post-header-line-1'/> to emphasise where the script should be placed):

<div class='post-header-line-1'/>

<table align='left'><tr><td><script type='text/javascript'>
google_ad_client = "pub-94081704638";
google_ad_width = 250;
google_ad_height = 250;
google_ad_format = "250x250_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "5588AA";
google_color_text = "000000";
google_color_url = "0099CC";
google_ui_features = "rc:6";

</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
</td></tr></table>


As usual, preview, and if satisfied, click "Save template".

Note: AdSense only allow 3 AdSense for Content units per page. So if you incorporate the unit into the post, theoretically, you will have one AdSense units in each post. So if you have the default 7 posts for the main page, you will have 7 AdSense units in each posts plus any other Ad units in the sidebar/s and/or footer and/or Header. AdSense suppresses any excess units so that only the first 3 units (which 3 depends on your template) are displayed. For most of my blogs, only the first 3 units in the first 3 posts will get displayed and if I have skyscraper unit in my sidebar and leaderboard unit in the footer, these plus the ad units in the rest of the posts will be suppressed. It is only when you are in an individual post page (permalink) where there is only one post that the skyscraper unit in the sidebar and the leaderboard unit in the footer plus that one unit in the post get displayed. I have tried this once for one blog and asked AdSense Support if it is OK and their response was that it is OK for THAT blog. They left the question about applying the same thing to other blogs hanging, so one doesn't know if we have to ask each time we apply the same thing to other blogs.

If you want to be safe, you may want to set the main page to display less posts in the main page, etc., or write to AdSense Support for clarifications.

Acknowledgement: The idea of using <table> was obtained from Wrap text around Google AdSense but was modified and an alternative way was presented. Further, she used an image to display the HTML which means you can't copy the HTML direct from the site. I use special codes to display the HTML characters so that you can copy the HTML direct from this site to use for your hack.

Any problems, please comment in the post. One reader has complained about confusing l (L) with 1 (one). This has been clarified with a note right at the top of the post. He also commented on some problems with the table tags. I have retested the method described here in Generating Revenue from your Website, and for the table tags, I just use copy-paste from the script in the scroll box above. The method worked perfectly, so there is NO PROBLEM with the table tags.

Tuesday, July 03, 2007

Build traffic tip - set Send Pings to "Yes"

One of the ways to help build traffic to your blog is to ping blog update notification services to inform them that your blog has been updated so that they will crawl and update you blog. With the old classic Blogger, you can set weblogs.com, and only weblogs.com to be automatically pinged whenever you publish a new post.

What I normally do is to set "Send Ping" to "No", and whenever I publish a new post, I will go to pingoat.com to ping all the ping blog update notification services (including weblogs.com). That is easy to do because all you have to do is to enter your blog URL (which can easily be done by right-clicking on "View Blog" in the Dashboard, then pasting it into the URL box, type in the title of the blog (this can also be very easy because if you have done it before, the moment you enter the first or second letter of the title, a list of titles of blogs you have pinged before will drop down for you to select), click the "Categories" and this will cause all the blog update notification services to be ticked, then click "Go Pingoat!".

"Send Ping" is normally set to "No" by default, but today, I decided to go to SETTINGS > PUBLISHING to check and found this:

Blogger Send Pings to blog update notification services

The wordings is a bit small in the screenshot. You can click on the screenshot to enlarge it or for your convenience, I will put the wordings below:

"Pings blog update notification services that many individuals and services use to track blog changes."

Please note that it says "Pings blog update notification services" and not just "Ping weblogs.com". This means New Blogger has changed this to ping more services without alerting us to the change. So I will probably change my habit and set my blog to ping automatically instead of laboriously pinging myself.

However, I will try to get more information as to which blog update notification services are being pinged and if I get some information, I will update this post.

Sunday, July 01, 2007

Putting author's photo in the center at bottom of post

Testing. Will elaborate later. Test successful. See HTML in scrollbox below:

<div style="text-align:center;"><a href="http://www.blogger.com/profile/06356385819441765673" target="new">
<img src="http://photos1.blogger.com/x/blogger/5611/753/1600/98819/mugshot.jpg" width="50" /></a></div>


Note that the photo is a hyperlink. Click on it and see where it takes you. This post is a follow-up from the earlier post Put photo of authors in post footer (click BACK button to get back to this page).

OK. Got a question in the comments. It will be easier to answer in a post. If you want the same thing in a single post, then you can click inside the scroll box, press ctrl+A to highlight all the code, right-click and select "copy to copy code into clipboard, then paste into the bottom of your post editor window. However without making changes, you will get a photo of me, and clicking on it will take you to my profile. If you want that to be changed, you will have to change the URL of the photo to the URL of your own photo, and the URL of the destination to the URL of the site (can be your profile or any site you want). I will highlight the parts that need changing below in red:

<div style="text-align:center;"><a href=""http://www.blogger.com/profile/06356385819441765673" target="new">
<img src="http://photos1.blogger.com/x/blogger/5611/753/1600/98819/mugshot.jpg" width="50" /></a></div>


If it is your profile you want to link to, then you will have to get the URL of your profile, and one of the ways to get it is if you have your profile (About Me) displayed in your blog, right-click on "VIEW MY COMPLETE PROFILE" and select "copy shortcut" (This is for Firefox. With other browsers, the wordings will be slightly different but similar) and substitute the first URL highlighted in red with this URL. If it is another site you want the photo to link to, and you are not very familiar with URL, refer to What is URL and how to get it.

The other one you need to change is the photo URL. If you already have a photo for your profile, and you want that photo, go into Dashboard, at the top-right corner, click EDIT PROFILE, then look for "Photo URL" and copy the URL from the box on the right of it. If it is some other photo you want, then refer to Using New Blogger to host your photos for the profile, sidebar, etc.

If you want the photo at the bottom of EVERY post without having to paste the code each time you make a post, get into the Dashboard of your blog, click SETTINGS > FORMATTING and paste the code into the post template at the bottom of the page.


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