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)

Saturday, September 06, 2008

Search Engine Simulator and expandable Post Summary

Search engine spider do not see a web page as a human do. Images, content generated by Javascript and Flash are not seen by search engine spiders. That is why it is good SEO practice to complete the alt for images. Now if you have implemented expandable post summary, you may be wondering if those text you put into the hidden post summary are seen by search engine spider. If you are curious, type the URL into the box below and submit and you will see what the search engine spiders see:







Search Engine Spider Simulator


Enter URL to Spider








For more information on how the search engine spiders see a web page, refer to spider view

Peter Chen's nice graphic signature

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