Sunday, December 14, 2008

Advantages of Google AdSense URL and custom channels

One disadvantage of adding Google AdSense directly from Blogger LAYOUT is that you cannot use custom channel to track the performance of your ad units. Fortunately, there is also URL channels which tracks the total earnings from a particular blog (URL). Now if you track the custom channels for AdSense units generated directly from Google AdSense, then by simple subtraction of the total earnings from custom channels from the total earnings for the blog (URL) you can get what is left, that is earnings from the AdSense units inserted directly from the Blogger LAYOUT placed after each each post. This was how I was able to get a Google AdSense channels report for this blog which is my main blog for bloggers.



Peter Chen's nice graphic signature

Enable surfers to apply to Blogger private blog for permission to view

Many bloggers wants surfers to be able to apply for permission to view private blogs. Previously this was possible by typing a message (for example email address) into the private blog title. Blogger changed that. Private blogs no longer display blog titles, only the URL of the private blog. Now the only way to get a message to surfers on how to apply for permission to view private blogs is to add that message into the blog URL. Look at the screen shot below for example:

email in blog title to enable surfers to apply for permission to view private blogs

In the example above, the blog title is myemailatgmaildotcom@blogspot.com

An alert surfers should be able to guess that he or she need to write to myemail@gmail.com to request permission to view blog. As for the blog title, you can set it to whatever you may wish. It is not the ideal solution, but the only available option at the moment unless Blogger changes how private blogs are displayed again.

Peter Chen's nice graphic signature

Saturday, December 13, 2008

Words ignored by search engines

A previous post SEO with post title mentioned that certain words are ignored by search engines. That elicited a request from a blogger what words are ignored by search engines. According to a compilation by Tsu Dho Nimh, some 655 words are ignored. Here is a sample beginning with a:


a able about above abroad according accordingly across actually adj after afterwards again against ago ahead ain't all allow allows almost alone along alongside already also although always am amid amidst among amongst an and another any anybody anyhow anyone anything anyway anyways anywhere apart appear appreciate appropriate are aren't around as a's aside ask asking associated at available away awfully

Peter Chen's nice graphic signature

Tuesday, November 18, 2008

HTML/Javascript gadget for blogroll

It is good practice to backup template and backup gadgets. However, not all Blogger gadgets (formerly called Page Elements) can be backed up. The Blogger Link List (blogroll) cannot be backed up. If your blogroll is very long, you may want to put the blogroll in a scroll box. The Blogger Link List (blogroll) also cannot be contained in a scroll box.

My preference for a blogroll had always been to use a HTML/Javascript gadget and hyperlinks instead. I shall detail below the HTML for such a purpose below:

<a href="URL of blog no. 1">title of blog no. 1</a><br />
<a href="URL of blog no. 2">title of blog no. 2</a><br />
<a href="URL of blog no. 3">title of blog no. 3</a><br />
<a href="URL of blog no. 4">title of blog no. 4</a><br />
and so on.

There is one more thing you can do with this method that you cannot (not really cannot, but you will have to tamper with the template) with Blogger Link List - make the links open in new tabs or windows. When you use the HTML/Javascript gadget to make your Link List, all you have to do is to add target="_blank" or target="new" as shown below


<a href="URL of blog no. 1" target="_blank">title of blog no. 1</a><br />
<a href="URL of blog no. 2" target="_blank">title of blog no. 2</a><br />
<a href="URL of blog no. 3" target="_blank">title of blog no. 3</a><br />
<a href="URL of blog no. 4" target="_blank">title of blog no. 4</a><br />

Plus you can save such a blogroll by copying them into a Notepad file and saving them for future uses.

Update: This post How to change template without losing widgets says widgets (gadgets or Page Elements) can be transferred from the old template to the new template. I have not and probably will not test it out, but if true, you can sort of backup your gadgets including Link List by backing up your template. I probably would not test it out because I have faced enough problems getting bX errors or "your template cannot be parsed ....." messages when changing template for me to prefer to stick with what I have described at backup gadgets (page elements). If you ever try to do what the above post and succeeded without getting error messages, please leave a comment

Peter Chen's nice graphic signature

Friday, November 14, 2008

Social bookmark buttons at bottom of post

If you are desirous of getting more traffic to your blog, one way is to add social bookmarking buttons at the bottom of your posts so visitors can easily bookmark the pages they are interested in and easily return to them as demonstrated at Good Health Information. There are many ways to do that. One of the easiest is to use go to Add This and register an account. After signing in, click GET YOUR BUTTON. In the next page, from drop-down menus, select the type of button (Sharing/Bookmarking button), tick the radio button from among 1 of 6 buttons, where you want the bookmarking button (On a blog) and your blogging platform (Blogger). When done, click GET YOUR FREE BUTTON >> and you will get your code for the bookmarking button in the next page.

Peter Chen's nice graphic signature

Wednesday, November 05, 2008

SEO tip: upload images whenever you can

hits from image searches

Small SEO tip - upload an image or images to your blog post whenever you can. Why? I have visitor counters in practically all my blogs and occasionally check them to find out where my visitors are coming from. It is not infrequent that I find hits from image searches. For example, look at a portion of today's hits to Natural Remedies. Of the first 4 hits, 2 (50%) are from image searches.

I am not suggesting that you will get lots of hits from image searches, but I am pretty sure you will get at least some. In fact, in some of my very low traffic blogs, more than 50% of the hits were from image searches. However, to balance things out, this is the highest traffic blog that I have, but I don't get anything even near to 50% of the hits from image searches. I do get at least some from image searches, and for that, I am very grateful.

So if you want hits from search engines, do upload or include (<img>) images whenever possible. Do remember also to complete the alt="" attribute as search engines cannot read images but they do read the text you put in between the quotation marks "" of the alt="" tag.

However, just so that you do not get too high an expectation, how many hits from image searches will depend on the type of blog you have and its Page Rank.




Peter Chen's nice graphic signature

Wednesday, October 29, 2008

Fix for "missing" favicon

Well, not exactly missing favicon, but having your own favicon replaced by Blogger favicon. There had been many complaints about this at favicon for your blog as well as at a newer post free favicon generator and host and I myself experienced the problem. Thanks to the alert by "The Adventures of MYK Jones", the favicon is back.

Fix for missing favicon

Just move your codes for the favicon from it original position in the template to just after ]]></b:skin> and just before </head>, preview and if everything looks all right, save template.

Actually, I left the original code for the favicon in its original place and copy-paste to just after ]]></b:skin> and just before </head>

This is how that section of the template looks like after the fix:

]]></b:skin>

<!-- iconj.com dynamic favicon code -->
<link href='http://www.iconj.com/favicon.php?user=manature' rel='shortcut icon' type='image/x-icon'/>
<link href='http://www.iconj.com/favicon2.php?user=manature' rel='icon' type='image/gif'/>
<!-- end of iconj.com dynamic favicon code -->

</head>

<body>


Fix for "missing" favicon for old classic Blogger template

If you are using the old classic Blogger template instead of the New Blogger xml template, go to blogger.com (Dashboard) > template > Edit HTML and look for

<$BlogMetaData$>

and paste the favicon codes immediately after <$BlogMetaData$>

Peter Chen's nice graphic signature

Monday, October 27, 2008

Error code bX-4d29hg - what to do

I had earlier wrote about Error code bX-jdokxi - what to do. I got another error message when I tried to change the template of Isaac Low's blog. The error code was bX4d29hg. I did the same thing as for Error code bX-jdokxi. I backed up Gadgets (Page Elements). (I didn't backup template because the blog was relatively new, but it is always a good idea to backup template whenever you are making changes to the template. I then deleted the all the gadgets. After deleting all the gadgets I had no problem changing to the 4 column Minima template.

Peter Chen's nice graphic signature

Saturday, October 25, 2008

Hide navbar for New Blogger

Blogger has started advertisement above the navbar (the usually blue navigation bar at the very top of a blog) on a random basis (now you see it, now you don't) and this has taken valuable space. See screen shot below:

advertisement above Blogger navbar

Since that is taking valuable real estate plus the fact the the Blogger TOS (Terms of Service) did not specify that one must have it for the blog, I have decided to hide the navbar.

There are various ways to do that, not all of them effective. I have found that the hack by Aditya to be effective.

Aditya's hack is simple. Here is my interpretation of his hack: Go to LAYOUT > EDIT HTML to open the template editor. Look for <b:skin> and paste the following after that:

/* By Aditya http://the-lastword.blogspot.com/
----------------------------------------------- */
div.navbar {
opacity:0.0;
display:none;
}

Related posts:
Simple adjustable way to hide navbar
How to hide navbar for New Blogger (xml template

Thursday, October 23, 2008

jQuery Expandable Post Summary

This expandable post summary uses jQuery which is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML (Wikipedia. You do not need to understand what that means, only to be able to follow instructions in order to implement it for your blog. If you want an easier way, you can use the 4 column Minima template with jQuery expandable post summary pre-installed. You don't have to do anything, just backup current template and backup Gadgets which can be backed up, then replace the template with the one in 4 column Minima template with jQuery expandable post summary pre-installed.

The advantage of jQuery Expandable Post Summary is that it is an easy ONE TIME 2 step easy edit of the template and the job is done. Nothing else need to be done. No fiddling with the post needed. Disadvantage I discovered is that you can't have too many gadgets and a slow downloading blog, otherwise it will initially display the full post and only display the truncated post summary after all the gadgets is fully downloaded.

You can see a demonstration of a blog with jQuery expandable post summary at Holidays and festivals. Please note that if you have too many gadgets like in Home Improvements or Careers, the full posts will initially be displayed and only after all the Gadgets are completely downloaded will you see the posts truncated to short summaries followed by a [Read More...] link.

Now to the implementation (This is a variation to the excellent description by Amanda of Elegant post summary with jQuery: You are reminded to backup current template and backup gadgets (Page Elements). Now go to LAYOUT > EDIT HTML and [v] Expand Widget Templates. When the template had been fully expanded, look for </head> and paste this script just before the </head> tag:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[Read More...]', // default is 'read more...'
});

});
</script>


Note that you are free to edit the part in red. For example, instead of [Read More...], you can edit it to [Expand post...] or something similar. The second part in red, 280, is to control how big is the summary. If you want the summary to display more, you may edit it to 400 and if you want to make the summary shorter, you may edit it to 100 etc.

Now after having done that, look for
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Delete all of that (highlight all and press DELETE key) and replace it with

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>


Preview and if satisfied, save template. You may follow the above instructions or use the pre-edited template at 4 column Minima template with jQuery expandable post summary pre-installed.

Related posts

If you want to have a lot of gadgets in your blog, perhaps it is better to use the less sophisticated expandable post summary where you have to add some HTML tags in the post itself but which will show the truncated post summary immediately without having to wait for all the gadgets to be fully downloaded.

Peter Chen's nice graphic signature

Wednesday, October 22, 2008

Changing widths of blog - sidebars, main column

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

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

Now we come to the part about changing width:


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

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

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

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

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

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

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

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

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

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

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

and that part of the CSS become

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

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

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

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

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

ANOTHER EXAMPLE:

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

Peter Chen's nice graphic signature

Tuesday, October 21, 2008

Blogger Gadget Page Element backup

Previous post related to Gadgets (previously Page Elements) are screen shots of 19 Gadgets and list of gadgets with some explanation and a link to a demonstration blog Investment, money and finance.

Now if you ever have to change your blog template, most of the gadgets you installed will either be deleted or become empty. So it is best to backup the gadgets. However, not every gadgets can be backed up. Some gadgets also need no backup because they can easily be restored via the LAYOUT.

Here is a list of gadgets with those which can be backed up in red, those which need no backup in green, and those which cannot be backup in black:

  1. Blog List

  2. Followers

  3. Slideshow

  4. Subscription Links

  5. Poll

  6. List

  7. Link List

  8. Picture

  9. AdSense

  10. Text

  11. HTML/Javascript

  12. Feed

  13. Labels

  14. Newsreel

  15. Video Bar

  16. Logo

  17. Profile

  18. Blog Archive

  19. Page Header


How to backup TEXT and HTML/Javascript Gadgets

Open/Edit the TEXT or HTML/Javascript Gadgets. For the TEXT Gadget, click EDIT HTML. For both, just highlight all everything inside the "Gadget editor" (name is my "invention" given for want of a name) by clicking inside the "Gadget editor" and press Ctrl+A keys simultaneosly, right-click and select COPY. Open a Notepad file, paste into the Notepad file and save in a suitable folder using an easily recognizable name for easy retrival.

How to restore TEXT and HTML/Javascript Gadgets

Just open the backup files, highlight by clicking ctrl+A and copy into clipboard, open the TEXT or HTML/Javascript Gadgets, paste the codes from the clipboard into the "Gadget editor" and save.

For Gadgets that cannot be backup, if you want it restored, you will just have to reconstruct. For Gadgets that need no backup, just restore them from LAYOUT.

Peter Chen's nice graphic signature

Blogger Gadgets (Page Elements) and what you can do with it

This post is best read with a wide screen and at least 2 windows opened with one displaying this post and another displaying Investment, Money and Finance and minimize the 2 to display side by side, and perhaps either a third window or tab of a browser with tabbed browsing displaying screen shots of "gadget editors" for want of a better name.

I have previously written about the 19 Gadgets (Page Elements) together with a screen shot of those 19 Gadgets. If you want to see a demonstration of them excluding the Archives Labels Gadgets, have a look at the second right sidebar of Investment, Money and Finance

The Gadgets in the second (last) right sidebar of Investment, Money and Finance are in descending order:

  1. My Blog List (a more elaborate version of Link List with choice of displaying in the list, an icon, post title, snippets (extracts), thumbnail and date, all of the most recent posts. When you click "Add a blog to your list, you will be prompted to enter the blog URL

  2. Followers

  3. Slideshow (I used the keyword "money" to display images from Flickr. You will get a choice to display slide shows of images from Flickr, Picasa Web Albums, Photobucket using keywords and Album using username using a feed, or select "Other" using a feed)

  4. Subscription (for your readers to click on so as to be able to subscribe to your blog feed in a feed reader)

  5. Poll

  6. ListThis is almost link a link list because you can link the items on the list to a webpage by clicking on the link icon and then entering the URL of the webpage you want the item to be linked to. I used the title "BOOKS" for the list and link it to books at Amazon

  7. Link List or another name, blogroll. I don't like to use this as this cannot be back uped. I prefer to use HTML/Javascript gadget and hyperlinks as this can be backed up. If you do not know how to do this, ask

  8. PictureI did not add this in the demonstration blog. However, if you chose to add this, you can either chose the pictures from your computer or the web. I prefer to use HTML tag <img>

  9. AdSenseRather than using this gadget, I also prefer to generate the script myself and use the HTML/Javascript gadget. If you do not know how to do this, ask

  10. Text This TEXT gadget is practically a post editor as you will have icons to make the text bold, italic, set the color of the text, hyperlink it, block quotes, use HTML

  11. HTML/Javascript This is the gadget I use most often as there is a great variety of things you can do with this even if you don't know HTML or Javascript, you only need to know where to get the codes and paste them into this gadget. It can also be easily backed up

  12. Feed For your readers to click on and subscribe to your blog feed

  13. Labels This is a list. Other blogging platform call this categories

  14. Newsreel I added financial news in the demonstration

  15. Video Bar I added video with keyword "Money"

  16. Logo

  17. Profile not added in demo

  18. Archive not added in demo

  19. Page Header This would be present in practicall all blogs



I will follow up with a post on backing up gadgets or page elements later.

Peter Chen's nice graphic signature

Sunday, October 12, 2008

Blog displayed in different browsers

I have written previously about the advantages of having many web browsers. Let me elaborate on one more reason why you should have many browsers.

A blogger is by default a web master responsible for the way a blog is displayed over the Internet. Any web master worth his salt would have a visitor counter and would check the statistics every now and then. Below is the browser statistics for visitors to this blog:

browser statistics bar chart
browsers statistics percentage

It shows that visitors to this blog uses varied web browsers ranging from FireFox, Internet Explorer, Safari, Opera and the newly introduced Chrome. It pays to check how your blog is displayed in these browsers so that you know how your blog appears to different visitors using different browsers.

For example, I viewed this blog - Guide to United States of America with different browsers and noticed that the blog title and description are displayed differently in different browsers. Below are the screen shots of how the blog displayed in Firefox, Internet Explorer 7, Opera, Safari, Flock and Chrome:

blog as displayed by Opera
Guide to USA as displayed by Opera

blog as displayed by Internet Explorer 7
Guide to USA as displayed by Internet Explorer 7

blog as displayed by Google Chrome
Guide to USA as displayed by Google Chrome

blog as displayed by Safari
Guide to USA as displayed by Safari


The blog Guide to USA uses Final Sense Butterfly template and displayed with only very slight difference in Chrome, Firefox, Flock, with the last part (after Rhode Island) hidden by the Google Search box. The most noticeable difference is in Opera where you can barely see the hidden portion of the description through the Google Search box. To bring that into sharper focus, I paste below the part in question below:



The other noticeable difference is in Internet Explorer 7 where the part of the description starting from North Carolina is hidden by Google Search button and the blog title is blur with shadow. Again, to bring that in sharper focus, below is portion of the blog title as displayed by Internet Explorer 7:

blur blog title with shadow as displayed by Internet Explorer 7

The above blog is only a demonstration blog so I decided not to do anything about it. If it is the main blog, I will then of course seek solution to the little problems as having part of the blog description hidden or getting a blur blog title is not quite acceptable.

Peter Chen's nice graphic signature

Saturday, October 11, 2008

Embed Video in sidebar


Update: For embedding Youtube video, you can do the resizing at Youtube.com itself by either ticking one of the 4 size option (560x340 640x835 835x505 1280x745) or by clicking CUSTOM and typing in your choice of width while letting Youtube automatically fill in the value for the height to keep the aspect ration constant (see screenshot below). However the method described in this post will still be useful if you want to resize other video embed codes or similar:



Method of resizing video embed codes while keeping aspect ration constant



A blog reader asked how to embed a video into the sidebar. I have embedded a video into the right-most sidebar at the bottom of Dummies Guide to Google Blogger. The method is not much different from the procedure to embed a as explained in embed Youtube video in blog post, but for completeness and simplicity, I will explain the procedure in full here:

The very first step is to find out the width of the sidebar as explained in how to determine the width of the blog Header, main column and sidebars. The blog Dummies Guide to Google Blogger uses a 4 column Minima template and the width of the right-most sidebar is 164 pixels.

The original embed script of the video is pasted into the scroll box below with the width and height attributes highlighted in red:

<object width="400" height="333"><param value="http://www.youtube.com/v/bU4gXHkejMo&rel=1" name="movie"/><param value="transparent" name="wmode"/><embed width="400" src="http://www.youtube.com/v/bU4gXHkejMo&rel=1" wmode="transparent" height="333" type="application/x-shockwave-flash"></embed></object>


We have to resize the video to fit into the sidebar. The easiest way is to first create an empty image with a photo editor such as the free Irfanview with the same width and height as the video (400x333). Then, with the option to preserve aspect ratio ticked, the width is changed to 160 and the corresponding height is noted (in this case I found it to be 133). So I changed all the width attributes to 160 and all the height attributes to 133.

I then get into the LAYOUT and clicked "Add a gadget" (previously "Add a Page Element") and then select HTML/Javascript and pasted the edited Youtube embed script into the page element:

<object width="160" height="133"><param value="http://www.youtube.com/v/bU4gXHkejMo&rel=1" name="movie"/><param value="transparent" name="wmode"/><embed width="160" src="http://www.youtube.com/v/bU4gXHkejMo&rel=1" wmode="transparent" height="133" type="application/x-shockwave-flash"></embed></object>



Update: "How do i find out if a video has embedding enabled!!!"

Look at this video for example: How to play make a circuit light a bulb game. If you look at the bottom, you will see at the bottom an EMBED button (highlighted in red). Click on the EMBED button and you will get the embed code:

Complete circuit light a bulb online game

In other circumstances, you will see an up arrow button at the bottom right corner of the video which when clicked will reveal the embed code (see screen shot below, arrow button and embed code highlighted in red:

Malaysia Singapore express Aeroline bus


Related posts:
Resizing Youtube video to fit main column or sidebar using calculation
Embed Youtube video in blog post

Branding and blogs

Brand is powerful stuff. The CocaColaTM brand is known worldwide. Consultancy Interbrand estimated Coca-Cola's brand to be worth $67.5 billion (£39 billion or 55 billion euros). That sure is a huge amount of money. Google, Yahoo, Blogger are all branded and each have their logo. In addition, all their web pages are distinguished by a distinct favicon like those below:


Yahoo! faviconstatcounter faviconBlogger Tips and Tricks faviconmail faviconGoogle FaviconBlogger favicon

Perhaps Blogger Tips and Tricks should be branded too and have its own logo and favicon?

As per favicon, this blog already has one as you can see from the address bar above. I used my profile photo for the favicon. However, the blog Header is plain, no decoration. Perhaps I should add the profile photo to the blog Header as in Advertising Tips and Tricks.

I am no website designer, graphic artist nor brand management expert so had simply used my profile photo as a quickie logo for Advertising Tips and Tricks as a demonstration. But if I am to be really serious about branding, I should perhaps think of name creation and domain name and trademark availability testing and use custom domain.

Peter Chen's nice graphic signature

Saturday, September 27, 2008

HTML code displayed in a scroll box

A few readers have asked how to put HTML codes inside a scroll box so that readers can copy the codes to paste it into their own blogs (example see 4 column Minima template. First thing you have to know is that if you try to type the HTML as it is (example <br />), the web browser will interpret that as an instruction to display what follows in a new line (line break) but not display the HTML. What I did to display the above was to type special character < > to display HTML. In other words, replace < with and replace > with

How to display HTML codes inside scroll box

Now on how to display HTML codes inside a scroll box. First, the script for a scroll box:

<div style="width: 395px; height: 400px; 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 the script for the scroll box save in a notepad file to be retrieved whenever I need to use it. Now, to explain how I displayed the HTML codes for the scroll box. I paste whatever HTML codes I want to display into a notepad file. Then I click EDIT in the menu bar and select "Replace..." and then type > into the "Find what:" box followed by < into the "Replace with:" box (see screen shot below:
replace function in Notepad

and then click "Replace all". Notepad will find all the < characters in the file and replace it with automatically. I repeat with >, that is, type > into the "Find what:" box and into the "Replace with:" box and click "Replace all".

Thanks to DarkUFO, found a slightly easier way of encoding the HTML codes for display at encode HTML entities. What you have to do is to paste the HTML codes in between <em></em> and click "encode", then proceed as usual.


Once all the < and > had been replaced, I copy the edited file in Notepad and paste the edited HTML codes into the scroll box by pasting it in between >< in the script for the scroll box. I will then edit the width and height (in red) to suit the width of my main column and a suitable height to accommodate the length of the HTML codes I want to display. For example, the width (in red) is already set to 395 which is what I want, so I leave it alone. I edited height="400" to height="39", publish, done.

Peter Chen's nice graphic signature

Error code bX-jdokxi - what to do

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

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

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

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




Peter Chen's nice graphic signature

Sunday, September 21, 2008

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

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

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

visitor screen resolution bar chart
Visitors' screen resolution bar chart


visitor screen resolution % percentage
Visitors' screen resolution in percentage


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

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

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

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

Peter Chen's nice graphic signature

Thursday, September 11, 2008

Missing tool icons, EDIT HTML, COMPOSE tabs - what to do

Have you ever been faced with strange situations like missing tool icons to center text, left-justify or right justify text, make a link list, upload photo or video and just see a shorter tool bar like the one below:
short tool bar in compose editor
when previously you can because you had a longer tool bar like the one below:
long tool bar in Blogger post editor
Perhaps even the EDIT HTML and COMPOSE tabs EDIT HTML & COMPOSE tabs are both missing? Or even both tool icon and EDIT HTML/COMPOSE tabs are missing (just happened to me a short while ago when I was preparing a post in Flock social web browser (see screen shot below):

Blogger post editor problem

It need not be just Flock browser. It can be any other web browser.

What did I do then? All I need to do is to open another web browser like Firefox or any other web browser different from the one where you are having problems. I did exactly that and presto, the tool icon plus the EDIT HTML and COMPOSE tabs magically appeared!

The trick in using a different browser has worked for various different strange problems like getting error codes etc. that I have many browsers in my computer.

If you don't want to use a different browser, you can also try clearing cache and cookies and reopen the post editor window by clicking on the CREATE tab again.

Related post: Missing toolbar and unusable post editor (Singtel)

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