Azo Web Tech

How to get the latest sources from subversion (SVN)

2010-01-20T12:06:00.000+08:00

In software development, Subversion (SVN) is use to maintain current and historical versions of files such as source code, web pages, and documentation. Let say you need to work on a project that requires you to download the source code from the subversion. Here how it done...

First you need to install the Subversion in your system. Get it free from here.

svn checkout http://whatever_the_SVN_address_is

Checkout means saving the file resources from the source server into your system...

There are many other usage but that is for other topic to cover.

"Twitter Genius"

2009-12-30T01:32:00.001+08:00

A Craiglist's job listing posting caught my eye today. The role is as an
“expert” social media marketer for some sort of e-commerce startup. “I need someone who tweets in their sleep and updates their fb status before calling their mom on Mother’s Day,” the description reads. Wait until you see what the applicant need to do to apply for this kind of job.

Email me two tweets. The first should be about your experience. The second should by why you’re perfect for this job. If you exceed twitter’s allotted character count, you’re done.
Email me your Twitter name in link form (e.g. http://www.twitter.com/YOURNAME)
Tell me how many followers you have and how many people you follow.
Tell me who’s the best person you follow and why (in tweet form).
Tell me what’s the best way to get more followers (in tweet form).
Specific salary requirement.

Need I say more. The Twitter as the subject matter always fascinates me. The fact like how they make money beside raising fund from the venture capitals still remain unclear to me. So I dig up a little bit to search some info like when did they start, who coined the name "Twitter", what technology that they use to build Twitter and how their user use the service.

Obviously wiki is the best source of information provider for this kind of enquiry. There is lot of facts that I never heard/read before. So I compile the most interesting facts for my own reference or your pleasure.

Twitter history facts:

Twitter began in a "daylong brainstorming session" that was held by board members of the podcasting company Odeo in an attempt to break out of a creative slump. At that meeting Jack Dorsey introduced the idea of an individual using an SMS service to communicate with a small group, a concept partly inspired by the SMS group messaging service TXTMob

We wanted to capture that in the name — we wanted to capture that feeling: the physical sensation that you’re buzzing your friend’s pocket. It’s like buzzing all over the world. So we did a bunch of name-storming, and we came up with the word "twitch," because the phone kind of vibrates when it moves. But "twitch" is not a good product name because it doesn’t bring up the right imagery. So we looked in the dictionary for words around it, and we came across the word "twitter," and it was just perfect.

Twitter finance facts:

In total, Twitter has raised over US$57 million from venture capitalists.

Some of Twitter's documents covering revenue and user growth were published on TechCrunch after they were retrieved by the hacker, Croll Hacker. These contained internal projections that in 2009 they would have revenues of $400,000 in the third quarter (Q3) and $4 million in the fourth quarter (Q4) along with 25 million users at the end of the year. The projections for the end of 2013 were $1.54 billion in revenue, $111 million in net earnings, and 1 billion users.

Twitter technology fact:

The Twitter Web interface uses the Ruby on Rails framework, deployed on a Ruby Enterprise Edition rather than a vanilla Ruby implementation for performance reasons.

Twitter content (based on a research)

Other facts:

On January 5, 2009, 33 high-profile Twitter accounts were compromised after a Twitter administrator's password was guessed by a dictionary attack. Falsified tweets—including sexually explicit and drug-related messages—were then sent from the accounts.

On August 6, 2009, Twitter and Facebook suffered from a denial-of-service attack, causing the Twitter website to be offline for several hours.

Notable usage:

in political campaign
in legal proceeding
in education
in Emergencies
in protest and politics
in public relations
in reporting dissent
in space exploration
to survey opinion

I guess this simple service has many interpretation by public at large for both purposes, for bad or for the good of the mankind.

Gesture computing is a current hip

2009-12-29T18:27:00.001+08:00

A couple of weeks ago, I was asked to develop a device that can understand my hand gestures to accomplish certain task like taking photo, browsing and other task that normally you need a computer, PDA or handphone to accomplish that. This idea isn't new as I recalled, Microsoft did come out with their Surface device and Nintendo with their hand-wobling Wii several years back. Then I start to see numerous of similar product (prototype mostly) start to emerge.

At ZDNet, I saw this interesting video about the future of remote control. It is controlled by your own hand (literally). I wonder what is in their user manual, hand signs.

At TED, Pranav Mistry introduce the SixSense technology. He demos several tools that help the physical world interact with the world of data -- including a deep look at his SixthSense device and a new, paradigm-shifting paper "laptop".

3 years back, I saw this video. Johnnny Chung Lee manage to hack the Nintendo Wiimote into head tracking for desktop virtual reality displays. In other word, the Wiimote just turn into one big stylus.

And there is a dedicated Wii Related Hacks website that contain so much idea just to hack the Wii devices. Wicked.

Safari 4 dominates browser benchmark

2009-12-29T03:29:00.002+08:00

ZDnet has tested out 7 leading browsers using SunSpider (a suite of JavaScript test) to measure which browser is the quickest. I guess the Safari 4 took the first place beating the other 6 browsers. That is surprising as I thought Google Chrome is the quickest.

Out of curiosity, I took the benchmark test for Safari browser on Mac OS X using the same SunSpider benchmarking tool. Surprisingly, my result is much faster (576.2ms) compared to ZDNet result (967ms). Maybe the internet connection speed has affect on the final result.

Regular Joe might say that why bother taking such benchmarking test? Browser is just browser. Well, the modern web application is heavily loaded with Javascript for various purposes (AJAX, rating, behind the scene things). So using a browser with faster Javascript execution time might come handy. Of course this is not applied to me as I use 5 different browsers in daily basis. For me each browser has their own pros, cons and some set of tools to complete my daily job. Hunters uses different bullet and weapon to hunt different kind preys don't they?

A year ends

2009-12-24T19:20:00.000+08:00

As 2009 set sail to the end, I think this is the longest year I ever felt. So many events set place this year; witness betrayal at first hand, lost a job, get broke, found few other jobs, new baby boy, said goodbye to old friends and said hello to new ones. With so much to do to keep on living, this year is the most productive year and the most dramatic ever.

In single year I had to take up responsibility all the jobs that left to me. From sales to project manager down to delivery boy with the risk of not getting any paid at all.

How do I survived? I don't know myself. I guess the set of skill that I acquired from very long career helps a lot. And not to forget the support from my family, wife, kids, mom & dad, brothers & sis.

I don't know what is coming in 2010 but it doesn't matter. In the end, what matters the most is my family.

Twitter as marketing tool

2009-10-06T02:23:00.004+08:00

I haven't blogging for months(feel like ages), but this guy/girl from Twitter manage to drag my browser to blogger posting form just to share his idea/tactic on fully utilize Twitter as his/her marketing tool.

Well, what the so called faclets does is twitting about a fact in daily basis, link the fact with related books in Amazon website, search some of the keywords in Twitter to find related entry or user, and finally he/she just follows all the matching user results. And as the result, all the user that he/she follows will or most likely will follow back and probably some of them would buy the suggested book that faclets posted on the link. Pretty neat and slick. Perhaps this is one of the "clear" example on how to use Twitter to market your product.

How to restore Windows Vista Sidebar

2009-05-21T01:33:00.005+08:00

Recently I created a gadget for Windows Vista Sidebar. It works as it suppose to but yesterday the sidebar refuse to start during start up or directly execute the application. Luckily this not the first encounter, apparently it's becoming popular issue among other unlucky Vista's user. I wonder if the problem will be passed on to Windows 7, 8, 9, 10...or forever. Some people wouldn't care if it works or not, I know because I would. but the thing is, I need to show the gadget it to my client. Anyway here is the solution...

Looking at the solution from Microsoft (KB963010), it is easy enough to solve this. They even provide the fix tool. But if you want to fix it manually, pop up the command prompt and run each of this command:

Regsvr32 atl.dll
Regsvr32 "%ProgramFiles%\Windows Sidebar\sbdrop.dll
Regsvr32 "%ProgramFiles%\Windows Sidebar\wlsrvc.dll
exit

It should fix the issue in no time.

Stored Procedure Manic

2009-04-10T00:02:00.005+08:00

Since I joined a new company as web application developer, I was amazed on the amount of stored procedure usage in multiple MSSQL databases to support a single system. There is one database which had the largest number of overall stored procedure created. Over 2000 ++ scripts with total size of 11 MB. The best of all there is no single manual or documentation available to map the stored procedure to the application itself. And no programmer to refer to. Damn. This is going to be a mental strain to any system noob. I'm almost reaching the limit for just in 5 days.

When the management set a dateline to complete a task, it is understandable that the result must be achieved no matter what. To be surprised, one day, during the assignment period, the MD directly ask my data enhancer senior colleague what is the progress and what is the result should be achieved that day. He took a long pause not knowing what, when & how to answer the question. I tried to help by explaining the current situation. The MD get upset and ask us the detail action plan and present to him in 30 minutes.

The objective is clear but when the time is too short I had to use every resources that I had, which is time. I spent 72 hours straight to just understand the flow. But to reprogram the whole module it might take 1 or 2 more months. Which is not an option. The logical way to solve it is to contact the previous programmer and ask which script could solve the issue. But for some reason that is not an option too. So I'm stuck and back too nothing. I have no choice but to dig the 2000++ stored procedure script to find the actual script that could solve everything. Luckily I found it after spending another 24 hours digging the script. Sigh. This could be one of the Worse Than Failure (WTF) story in my IT profession life.

I know I've been paid to do the job but 24 hours a day for straight two weeks to make sure the job is done? Come on I'm not 25 anymore. At this point I'm not sure this is the right job for me. I wonder how long I would last in that company.

Connecting Ubuntu 8.10 with Atheros Wireless Driver

2009-02-20T12:00:00.007+08:00

This setting was a major nuisance to me. I search all over the net for a working solutions. From Madwifi to Ndiswrapper but still, nothing works on my Presario C700 unit. I even fully updated Intrepid release. Thanks for that, the system hit by kernel panic and I need to reinstall the whole OS again. But the working solution is just under my nose. Read on...

Well, not really my nose, it's documented in the Ubuntu help page, under the WifiDocsDriverAtheros topic.

My unit preference is Compaq Presario C700 with Atheros AR242x chip and Ubuntu 8.10 (fresh install). I connect to internet through ethernet cable (wireless is disable duh). If you have similar setup and I assume you know how to set your repository, this might work. This is how I done it:

Update only the essential part. Open the terminal and run this command.
sudo apt-get install build-essential
Deactivate the installed Atheros Driver. Since we're going to get the new one, disable the default driver which is auto-install during installation.
System > Administration > Hardware Drivers and click the "deactivate" button.
Run this command
sudo reboot
You now need to get the backport module. After the reboot, run this command
sudo apt-get install linux-backports-modules-intrepid-generic
Run this command
sudo reboot
For some other unit the wireless might be working now. But mine is not working yet. This may be the result of a conflict with either ath_hal or ath_pci, or ath5k might be blaclisted somewhere. So let isolate the ath_hal & ath_pci first. Run this command on the terminal:
sudo gedit /etc/modprobe.d/blacklist
and add the following lines to the bottom of the file:
blacklist ath_hal
blacklist ath_pci
save the blacklist file
Run this command
sudo reboot
By now my unit is able to detect wireless connection and manage to connect using WPA2 Personal pass key. But if your unit still doesn't, the last possible cause is the ath5k being blacklist somewhere, posibbly in modprobe.d. So run this command in terminal:
grep -r "ath5k" /etc/modprobe.d/
You just need to comment lines that have "blacklist ath5k" and then run this command:
sudo reboot

Hopefully by now your unit is able to detect and connect to any wireless connection. Good luck and remember patient is a virtue.

From Windows 7 Beta to Ubuntu 8.10 Intrepid Ibex

2009-02-19T10:34:00.000+08:00

The story begin when my notebook (Compaq Presario C700) had an overheating problem. Originally I installed a WindowsXP pro in this unit. Everything when well for 5 months. But then whenever I run a movie or flash application the system automatically shutdown. I try to search the problem source for months but still the problem remain. So what should I do? Read on...

It seems that the notebook can't hold too much concurrent process in one time. Even though formating with a fresh new OS is the last option in my recovery list but I had no choice. Then, Windows released the Windows 7 Beta to the public. I've read all the review (almost) and saw some cool and awsome stuff in their demo video. Even though I knew that it will last until August 2009 and the minimum RAM is 1GB, still I decided to give it a try.

The first distinct different change is the taskbar and much improved on UAC and desktop windows experience which is way better than Vista or XP. The rest was just almost the same like Vista. I have nothing against this new Windows 7 but it doesn't improved my experience with the problematic Compaq C700 notebook. So the quest continue.

The next possible move is to get a less stressful processor & RAM eater operating system. My best bet is the Ubuntu 8.10 Intrepid Ibex with the Linux kernel (2.6.27-11 as in my grub boot menu.lst). I used to play around with Gutsy Gibbon (v7.10) in VMWare. I just love the way they named their release which is using an adjective and an animal. If you notice, this code names are in alphabetical order since Breezy Badger.

I personally think that you can customized this OS into anything that you want without burning holes in your budget. It does provide an alternative program for each Windows Office tools and it's almost FREE. But you must not be fooled. FREE in Linux realm comes with some "price". For a noobs, it is just like entering a twilight zone. Each release or even update comes with a risk of unworking driver or worst "kernel panic". I guess the best way is to separate the system partition with your data partition and keep the best setting for your unit. Every problem has possible solutions in various forum boards. I guess the Open-Source community just love to share or tell their own story. Sometimes I find myself reading too much suggestion for a single problem. Imagine if normal user had to face such nuance problems.

But for the sake of Compaq Presario C700 that I have here, now I can almost eliminate the overheating problem. At least I can watch the entire movie in full screen mode in peace with no auto shutdown.

P/S: I wonder what is the best linux application with functionality at par with Photoshop.

Linux System Admin Tips

2009-02-06T15:33:00.002+08:00

I'm not an avid Linux user but there is no harm learning some of tricks that only the experienced Linux admin would know. Check out this tips from Mike Chirico. It has 200 over of Linux tips and tricks. From setting and keeping the correct time on your computer, permanently deleting documents with shred, making files "immutable" so that root cannot change or delete, setting up more than one IP address on a single NIC, monitering users and processes, setting log rotate to monthly with 12 months of backups in compressed format, creating passwords for Apache using the htpasswd command, common Perl commands, using cfengine, adding users to groups, finding out which commands are aliased, query program text segment size and data segment size, trusted X11 forwarding, getting information on the hard drive including the current temperature, using Gnuplot, POVRAY and making animated GIFs, monitoring selective traffic with tcpdump and netstat, multiple examples using the find command, getting the most from Bash, plus a lot more.

Another article that I manage to digest from the same author is "Breaking Firewalls with OpenSSH and PuTTY". A very interesting reading material. The article shows you how remote Linux and Windows users can gain access to firewalled samba, mail, and http servers without monkeying the firewall. However the author said that those steps only applicable if you have a valid account on all targeted servers. In other words, to get a valid account is another art of hacking.

Level of Education Required to Read My Blog

2009-01-15T14:20:00.004+08:00

One of the best practice in SEO is to deliver your content as clear and precise enough based on your target audience. To do that you will need to hire a suitable copy writer and start building the content using your guideline. Unfortunately not everyone can afford to hire one. But now there is an online tool than can help you rate your content and match it with the level of education required to understand your content.

I tested the tools several times and here are what the range of result that I get.

After done playing with it, I conclude that this is merely a tool to get the traffic to the site. Why? Because if the webpage is in other language beside English, it simply rate it as GENIUS. Well the tool itself is another practice in SEO.

Drifted

2009-01-15T12:56:00.006+08:00

I swear that I read this from someone's blog....oh yeah it's from my previous colleague, Sue. For the past 3 weeks, I feel like "drifted" into an open water. No sense of direction, lost, tired and desperately need to be saved. Like Sue, I also not sure how to deal with this situation. During the new year eve I said, "2009 is again another challenging year, even tougher than before". But I never expect it to be happened so soon.

Enough wining, let's start to work

2009 - A Challenging Year Ahead

2009-01-01T23:11:00.001+08:00

I would like to wish you all a Happy New Year of 2009. Some said that this is going to be a tough and challenging year. But with a strong faith, I believe nothing is impossible.

Don't bother

2008-12-05T10:01:00.005+08:00

I've been ask if can built an online survey for this particular organization that I don't want to reveal, in just 5 days. After reviewing the project scope, I said yes, it can be done. Since the time is insanely short and their budget is also low, I decided to customize an existing full fledge online survey available.

It is called Lime Survey. Looking at the online demo survey on their website, I thought this is more than what the project requires. I manage to built the entire survey within few hours and send the prototype to the project manager for their evaluation.

The very next morning, to my surprise, I was told that the deal is off. Sigh! Luckily I didn't built from scratch. What we learn that day is that the next time we hear such low budget with short time of deliverable we will politely advice them, "please don't bother us, go look for a freelancer". So many mouth to feed with so little piece of pie, it's simply not worth it.

So, if you want this similar kind of online survey in the future, you now know what & who is the most suitable to look for.

So many things yet so little time

2008-11-05T14:21:00.002+08:00

There are so many thing to write here but so little time to spend. Most of my time will be spend on development and research studies. But what can I do? For instance I want to talk about:

How similar the phpCake & Codeigniter is
The linux beginner delema, with GUI or pure terminal console
How to crack WPA & WEP with backtrack3
Flex framework for beginner
How to develop application with Adobe AIR or what Adobe Air? is all about
WebTV development

and so on... Until I can find ample time, nothing much can I do for now.

My Streamyx is Down.....again

2008-10-22T16:40:00.003+08:00

The nightmare of TM's Streamyx downtime is back. My Streamyx Combo is down since 18 October 2008 (Saturday I guess). This is not my first time. Read more about my first Streamyx downtime.

The only time that we're at home is between 8PM or 9PM which is out of TM's Technical working hour (8AM-5PM). Yup, if you're planning to get TM's Technical service, you must take a leave. Otherwise (if you're lucky enough) try to arrange it on Saturday. I did take a leave once during my first Streamyx downtime, but the technician didn't show up on the promised day. I was mad as ever. Please TM, I'm begging you, please improve....pleaaaaaaseeeeeeeeeeeeeeeee.

Update:

My complain were immediately attended the following day. Apparently the technician told me that he change the connection port so that the connection will properly reset. The connection will reset itself when there is a power problem from TNB. In my case, after the reset state the connection were just stucked or hang.

The call centre then called me to check if everything were OK on Saturday and the technician called back on Tuesday to confirm if the problem were fix. I'm glad that the service providedby TM Support lately is much much better than before. By the way thanks Mr Kamal (TM Technician) for your service.

jQuery for UI Engineers

2008-09-17T08:53:00.006+08:00

If you don't know what jQuery is:

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML - Wikipedia

For me, it is another JavaScript library that you don't want to miss. It is a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. Just add this the <head></head> tag:

Not only that, you can add in your own methods and functionality in a mechanism called plugin and put it just below the jQuery.js like this:

The community behind it is quite a number. This is evidently seen in the plugin submitted by the user in the plugin section. It cover the most AJAX functionality that you can think off. With all these, I'm certain that it can help your UI design alot. Maybe I shall implement it in my future Blogger Template design.

What is dedication?

2008-09-12T08:55:00.001+08:00

Got this from my mailbox today....

If opportunity doesn't knock at your door, you go knocking at it!!!

Google Chrome - A new browser

2008-09-03T10:13:00.005+08:00

Google launch their own internet browser called Chrome yesterday to join the already crowded browser market. At first I thought, don't we have too much browser already? What's the catch? Isn't it obvious. To dominate the internet browser world or at least to lessen the Microsoft's Internet Explorer domination in browser market share. But what about Firefox? Since the Chrome project already started, I won't be surprise if Google acquire Firefox later on. So what are the juice inside the Chrome browser?

Normally I won't read the technical spec sheet too much, but the Google Chrome team has come out with a different approach. Instead of pages of boring technical writing, they release a comic sheet to tell in depth what is Chrome browser is all about.

Wanted Blogger Template

2008-08-28T13:41:00.006+08:00

This template were based on Wanted 2008 Movie (IMDB). At first I saw the wallpaper photo and I thought maybe I could come out with a blogger template. Well here it is, 2 column Blogger template:

To copy the code, click on "View Plain" and copy the template code:

<?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
 <link href='http://www.oogletoogle.com/files/gyi1wn0j4c6tqskieyfr.ico' rel='shortcut icon'/>
 <b:include data='blog' name='all-head-content'/>
 <title><data:blog.pageTitle/></title>
 <b:skin><![CDATA[/*
 -----------------------------------------------
 Blogger Template Style
 Name: Wanted Movie 2008
 Designer: Azizul Ameir
 URL: azowebsphere.blogspot.com
 Date: 26 Feb 2004
 Updated by: Blogger Team
 ----------------------------------------------- */
 
 /* Variable definitions
 ====================
 <Variable name="bgcolor" description="Page Background Color" type="color" default="#000" value="#000000">
 <Variable name="textcolor" description="Text Color" type="color" default="#000" value="#000000">
 <Variable name="linkcolor" description="Link Color" type="color" default="#9ad" value="#99aadd">
 <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#fff" value="#ffffff">
 <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#777" value="#777777">
 <Variable name="titlecolor" description="Post Title Color" type="color" default="#413535" value="#413535">
 <Variable name="bordercolor" description="Border Color" type="color" default="#333" value="#333333">
 <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#777" value="#777777">
 <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#999" value="#999999">
 <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color" type="color" default="#fff" value="#ffffff">
 <Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color" type="color" default="#291D1D" value="#291D1D">
 <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#a7a" value="#aa77aa">
 <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
 <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
 <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal bold 200% Verdana,Sans-serif" value="normal bold 200% Verdana,Sans-serif">
 <Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 90% Verdana, Sans-serif" value="normal normal 90% Verdana, Sans-serif">
 <Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
 <Variable name="startSide" description="Start side in blog language" type="automatic" default="left" value="left">
 <Variable name="endSide" description="End side in blog language" type="automatic" default="right" value="right">
 */
 
 /* Use this with templates/template-twocol.html */
 
 body {
 background:$bgcolor url(http://lh4.ggpht.com/azizul.ameir/SLJlwvTjylI/AAAAAAAAA-0/M0iUUMgb_oU/bg-wanted.jpg) top center no-repeat; 
 margin:0;
 color:$textcolor;
 font: x-small Arial, Helvatica, Sans-serif;
 font-size/* */:/**/small;
 font-size: /**/small;
 text-align: center;
 }
 a:link {
 color:$linkcolor;
 text-decoration:none;
 }
 a:visited {
 color:$visitedlinkcolor;
 text-decoration:none;
 }
 a:hover {
 color:$titlecolor;
 text-decoration:underline;
 }
 a img {
 border-width:0;
 }
 
 /* Header
 -----------------------------------------------
 */
 
 #header-wrapper {
 width:806px;
 margin:0 auto 10px;
 }
 
 #header-inner {
 background-position: left;
 margin-$startSide: auto;
 margin-$endSide: auto;
 }
 
 #header { 
 margin: 5px;
 text-align: left;
 color:$pagetitlecolor;
 background-color: #000;
 }
 
 #header h1 {
 margin:5px 5px 0 5px;
 padding:15px 20px 0 0;
 line-height:0;
 text-transform:uppercase;
 text-shadow:#CCCCCC;
 letter-spacing:0;
 font: $pagetitlefont;
 }
 
 #header a {
 color:$pagetitlecolor;
 text-decoration:none;
 }
 
 #header a:hover {
 color:$pagetitlecolor;
 }
 
 #header .description {
 margin:0 5px 0 5px;
 padding:0 20px 15px 0;
 max-width:700px;
 text-transform:uppercase;
 letter-spacing:.2em;
 line-height: 1.4em;
 font: $descriptionfont;
 color: $descriptioncolor;
 background: url(http://lh4.ggpht.com/azizul.ameir/SLIuvzPOg8I/AAAAAAAAA98/1RE6FVwBqmE/wanted-bullet.png) top right no-repeat;
 }
 
 #header img {
 margin-$startSide: auto;
 margin-$endSide: auto;
 }
 
 
 /* Outer-Wrapper
 ----------------------------------------------- */
 #outer-wrapper {
 width: 806px;
 margin:0 auto; 
 background:#fff url(main_t_r.gif) top right no-repeat; 
 padding:10px;
 text-align:$startSide;
 font: $bodyfont;
 position:relative; 
 z-index:1;
 }
 
 #main-wrapper {
 width: 410px;
 float: $startSide;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
 }
 
 #sidebar-wrapper {
 width: 220px;
 float: $endSide;
 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 */
 }
 
 
 /* Headings
 ----------------------------------------------- */
 
 h2 {
 margin:1.5em 0 .75em;
 font:$headerfont;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.2em;
 color:$sidebarcolor;
 }
 
 
 /* Posts
 -----------------------------------------------
 */
 h2.date-header {
 margin:1.5em 0 .5em;
 }
 
 .post {
 margin:.5em 0 1.5em;
 border-bottom:1px dotted $bordercolor;
 padding-bottom:1.5em;
 }
 .post h3 {
 margin:.25em 0 0;
 padding:0 0 4px;
 font-size:140%;
 font-weight:normal;
 line-height:1.4em;
 color:$titlecolor;
 }
 
 .post h3 a, .post h3 a:visited, .post h3 strong {
 display:block;
 text-decoration:none;
 color:$titlecolor;
 font-weight:bold;
 }
 
 .post h3 strong, .post h3 a:hover {
 color:$textcolor;
 }
 
 .post-body {
 margin:0 0 .75em;
 line-height:1.6em;
 }
 
 .post-body blockquote {
 line-height:1.3em; 
 }
 
 .post-footer {
 margin: .75em 0;
 color:$sidebarcolor;
 text-transform:uppercase;
 letter-spacing:.1em;
 font: $postfooterfont;
 line-height: 1.4em;
 }
 
 .comment-link {
 margin-$startSide:.6em;
 }
 .post img {
 padding:4px;
 border:1px solid $bordercolor;
 }
 .post blockquote {
 margin:1em 20px;
 }
 .post blockquote p {
 margin:.75em 0;
 }
 
 /* Comments
 ----------------------------------------------- */
 #comments h4 {
 margin:1em 0;
 font-weight: bold;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.2em;
 color: $sidebarcolor;
 }
 
 #comments-block {
 margin:1em 0 1.5em;
 line-height:1.6em;
 }
 #comments-block .comment-author {
 margin:.5em 0;
 }
 #comments-block .comment-body {
 margin:.25em 0 0;
 }
 #comments-block .comment-footer {
 margin:-.25em 0 2em;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.1em;
 }
 #comments-block .comment-body p {
 margin:0 0 .75em;
 }
 .deleted-comment {
 font-style:italic;
 color:gray;
 }
 
 .feed-links {
 clear: both;
 line-height: 2.5em;
 }
 
 #blog-pager-newer-link {
 float: $startSide;
 }
 
 #blog-pager-older-link {
 float: $endSide;
 }
 
 #blog-pager { 
 text-align: center; 
 }
 
 /* Sidebar Content
 ----------------------------------------------- */
 .sidebar h2 {
 margin: 0 auto;
 padding: 8px 0 0 34px;
 background: $sidebarTitleBgColor url(http://lh5.ggpht.com/azizul.ameir/SLIuqF9yHpI/AAAAAAAAA90/DqAQcnYGu2E/wanted-art.png) top left no-repeat;
 font-size: 100%;
 min-height:32px;
 color: $sidebarTitleTextColor;
 }
 
 .sidebar { 
 color: $sidebartextcolor;
 line-height: 1.5em;
 }
 
 .sidebar ul {
 list-style:none;
 margin:0 0 0;
 padding:0 0 0;
 }
 .sidebar li {
 margin:0;
 padding-top:0;
 padding-$endSide:0;
 padding-bottom:.25em;
 padding-$startSide:15px;
 text-indent:-15px;
 line-height:1.5em;
 }
 
 .sidebar .widget, .main .widget { 
 border-bottom:1px dotted $bordercolor;
 margin:0 0 1.5em;
 padding:0 0 1.5em;
 }
 
 .main .Blog { 
 border-bottom-width: 0;
 }
 
 /* Profile 
 ----------------------------------------------- */
 .profile-img { 
 float: $startSide;
 margin-top: 0;
 margin-$endSide: 5px;
 margin-bottom: 5px;
 margin-$startSide: 0;
 padding: 4px;
 border: 1px solid $bordercolor;
 }
 
 .profile-data {
 margin:0;
 text-transform:uppercase;
 letter-spacing:.1em;
 font: $postfooterfont;
 color: $sidebarcolor;
 font-weight: bold;
 line-height: 1.6em;
 }
 
 .profile-datablock { 
 margin:.5em 0 .5em;
 }
 
 .profile-textblock { 
 margin: 0.5em 0;
 line-height: 1.6em;
 }
 
 .profile-link { 
 font: $postfooterfont;
 text-transform: uppercase;
 letter-spacing: .1em;
 }
 
 /* Footer
 ----------------------------------------------- */
 #footer {
 width:660px;
 clear:both;
 margin:0 auto;
 padding-top:15px;
 line-height: 1.6em;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align: center;
 }
 ]]></b:skin>
 </head>
 
 <body>
 <div id='outer-wrapper'><div id='wrap2'>
 
 
 
 <a href='#main'>skip to main </a> |
 <a href='#sidebar'>skip to sidebar</a>
 
 
 <div id='header-wrapper'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
 <b:widget id='Header1' locked='true' title='Bloggertrix (Header)' type='Header'>
 <b:includable id='title'>
 		<b:if cond='data:blog.url == data:blog.homepageUrl'>
 		<data:title/>
 		<b:else/>
 		<a expr:href='data:blog.homepageUrl'><data:title/></a>
 		</b:if>
 		</b:includable>
 <b:includable id='description'>
 		<div class='descriptionwrapper'>
 		<data:description/>
 		</div>
 		</b:includable>
 <b:includable id='main'>
 		 <div class='titlewrapper'>
 		 <h1 class='title'>
 		 <b:if cond='data:blog.url == data:blog.homepageUrl'>
 		 <data:title/>
 		 <b:else/>
 		 <a expr:href='data:blog.homepageUrl'><data:title/></a>
 		 </b:if>
 		 </h1>
 		 </div>
 		 <div class='descriptionwrapper'>
 		 <data:description/>
 		 </div>
 		</b:includable>
 </b:widget>
 </b:section>
 </div>
 
 <div id='content-wrapper'>
 
 <div id='crosscol-wrapper' style='text-align:center'>
 <b:section class='crosscol' id='crosscol' showaddelement='no'/>
 </div>
 
 <div id='main-wrapper'>
 <b:section class='main' id='main' showaddelement='no'>
 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
 <b:includable id='nextprev'>
 <div class='blog-pager' id='blog-pager'>
 <b:if cond='data:newerPageUrl'>
 
 <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
 
 </b:if>
 
 <b:if cond='data:olderPageUrl'>
 
 <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
 
 </b:if>
 
 <b:if cond='data:blog.homepageUrl != data:blog.url'>
 <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
 <b:else/>
 <b:if cond='data:newerPageUrl'>
 <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
 </b:if>
 </b:if>
 
 </div>
 <div class='clear'/>
 </b:includable>
 <b:includable id='backlinks' var='post'>
 <a name='links'/><h4><data:post.backlinksLabel/></h4>
 <b:if cond='data:post.numBacklinks != 0'>
 <dl class='comments-block' id='comments-block'>
 <b:loop values='data:post.backlinks' var='backlink'>
 <div class='collapsed-backlink backlink-control'>
 <dt class='comment-title'> 
  
 <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
 <b:include data='backlink' name='backlinkDeleteIcon'/>
 </dt>
 <dd class='comment-body collapseable'>
 <data:backlink.snippet/>
 </dd>
 <dd class='comment-footer collapseable'>
 <data:post.authorLabel/> <data:backlink.author/>
 <data:post.timestampLabel/> <data:backlink.timestamp/>
 </dd>
 </div>
 </b:loop>
 </dl>
 </b:if>
 
 <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
 
 </b:includable>
 <b:includable id='post' var='post'>
 <div class='post' id='post'>
 <a expr:name='data:post.id'/>
 <h2 class='date-header' id='PostDate'>
 <data:post.dateHeader/>
 </h2>
 <h3 class='post-title' id='PostTitle'>
 <b:if cond='data:post.url'>
 <a expr:href='data:post.url'><data:post.title/></a>
 <b:else/>
 <data:post.title/>
 </b:if>
 </h3> 
 
 <div class='post-header-line-1'/>
 <style>#fullpost {display:none;}</style>
 <div class='post-body' id='PostContent'>
 <data:post.body/>
 <div style='clear: both;'/> 
 </div>
 
 <a href='javascript:showFullNeo();'>Read More...</a>
 
 
 <a href='javascript:hideFullNeo();'>Collapse...</a>
 
 <script type='text/javascript'>
 checkFullNeo();
 </script>
 <div class='post-footer'>
 
 
 <b:if cond='data:top.showAuthor'>
 <data:top.authorLabel/> <data:post.author/>
 </b:if>
 
 <b:if cond='data:post.editUrl'>
 
 <a expr:href='data:post.editUrl' title='Edit Post'>
  
 </a>
 
 </b:if>
 
 <h3 class='post-comment-link' id='PostCommentLink'>
 <a expr:href='data:post.addCommentUrl' target='_blank'>Post a Comment</a>
 </h3>
 
 
 
 <b:if cond='data:post.emailPostUrl'>
 
 <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
  
 </a>
 
 </b:if>
 
 </div>
 
 <div id='backlinks-container'>
 <div expr:id='data:widget.instanceId + "_backlinks-container"'>
 <b:if cond='data:post.showBacklinks'>
 <b:include data='post' name='backlinks'/>
 </b:if>
 </div>
 </div>
 </div>
 </b:includable>
 <b:includable id='commentDeleteIcon' var='comment'>
 
 <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
  
 </a>
 
 </b:includable>
 <b:includable id='status-message'>
 <b:if cond='data:navMessage'>
 <div class='status-msg-wrap'>
 <div class='status-msg-body'>
 <data:navMessage/>
 </div>
 <div class='status-msg-border'>
 <div class='status-msg-bg'>
 <div class='status-msg-hidden'><data:navMessage/></div>
 </div>
 </div>
 </div>
 <div style='clear: both;'/>
 </b:if>
 </b:includable>
 <b:includable id='feedLinks'>
 <b:if cond='data:blog.pageType != "item"'> 
 <b:if cond='data:feedLinks'>
 <div class='blog-feeds'>
 <b:include data='feedLinks' name='feedLinksBody'/>
 </div>
 </b:if>
 
 <b:else/> 
 <div class='post-feeds'>
 <b:loop values='data:posts' var='post'>
 <b:if cond='data:post.allowComments'>
 <b:if cond='data:post.feedLinks'>
 <b:include data='post.feedLinks' name='feedLinksBody'/>
 </b:if>
 </b:if>
 </b:loop>
 </div>
 </b:if>
 </b:includable>
 <b:includable id='comment-form' var='post'>
 <div class='comment-form'>
 <a name='comment-form'/>
 <h4 id='comment-post-message'><data:postCommentMsg/></h4>
 <data:blogCommentMessage/>
 <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>
 
 <data:post.iframeColorizer/>
 </div>
 </b:includable>
 <b:includable id='backlinkDeleteIcon' var='backlink'>
 
 <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
  
 </a>
 
 </b:includable>
 <b:includable id='feedLinksBody' var='links'>
 <div class='feed-links'>
 <data:feedLinksMsg/>
 <b:loop values='data:links' var='f'>
 <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
 </b:loop>
 </div>
 </b:includable>
 <b:includable id='postQuickEdit' var='post'>
 <b:if cond='data:post.editUrl'>
 
 <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
  
 </a>
 
 </b:if>
 </b:includable>
 <b:includable id='comments' var='post'>
 <div class='comments' id='comments'>
 <a name='comments'/>
 <b:if cond='data:post.allowComments'>
 <h4>
 <b:if cond='data:post.numComments == 1'>
 1 <data:commentLabel/>:
 <b:else/>
 <data:post.numComments/> <data:commentLabelPlural/>:
 </b:if>
 </h4>
 
 <dl id='comments-block'>
 <b:loop values='data:post.comments' var='comment'>
 <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
 <a expr:name='"comment-" + data:comment.id'/>
 <b:if cond='data:comment.authorUrl'>
 <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
 <data:comment.author/>
 </b:if>
 <data:commentPostedByMsg/>
 </dt>
 <dd class='comment-body'>
 <b:if cond='data:comment.isDeleted'>
 <data:comment.body/>
 <b:else/>
 <data:comment.body/>
 </b:if>
 </dd>
 <dd class='comment-footer'>
 
 <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
 <data:comment.timestamp/>
 </a>
 <b:include data='comment' name='commentDeleteIcon'/>
 
 </dd>
 </b:loop>
 </dl>
 
 
 <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
 
 </b:if>
 
 <div id='backlinks-container'>
 <div expr:id='data:widget.instanceId + "_backlinks-container"'>
 <b:if cond='data:post.showBacklinks'>
 <b:include data='post' name='backlinks'/>
 </b:if>
 </div>
 </div>
 </div>
 </b:includable>
 <b:includable id='main' var='top'>
 
 <div class='blog-posts'>
 <b:loop values='data:posts' var='post'>
 <b:include data='top' name='status-message'/>
 <b:include data='post' name='post'/>
 
 <script language='javascript'>
 var blogAuthor = '<data:post.author/>';
 fetchComments('<data:post.id/>');
 </script>
 </b:loop>
 </div>
 <b:if cond='data:blog.pageType != "archive"'>
 <div class='comments' id='comments'>
 <center><h2>No comments yet</h2></center>
 </div>
 </b:if>
 
 </b:includable>
 </b:widget>
 </b:section>
 </div>
 
 <div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
 <b:widget id='Gadget1' locked='false' title='Blogger Play' type='Gadget'>
 <b:includable id='main'> 
 
 <b:if cond='data:renderingUrl != ""'>
 <b:if cond='data:title != ""'>
 <h2 class='title'><data:title/></h2>
 </b:if>
 <div class='widget-content' style='border: 1px solid #999; padding: 2px'>
 
 <b:if cond='data:trackingUrl != ""'>
 
 </b:if>
 
 
 </iframe>
 </div>
 <b:else/>
 <data:errorMessage/>
 </b:if>
 
 <b:include name='quickedit'/>
 </b:includable>
 </b:widget>
 <b:widget id='Label1' locked='false' title='Labels' type='Label'>
 <b:includable id='main'>
 <div id='LabelList'>
 <b:if cond='data:title'>
 <h2><data:title/></h2>
 </b:if>
 <div class='widget-content'>
 <ul>
 <b:loop values='data:labels' var='label'>
 <li>
 <b:if cond='data:blog.url == data:label.url'>
 <data:label.name/>
 <b:else/>
 <a expr:href='"javascript:fetchLatestPosts(\"" + data:blog.homepageUrl + "\",\"" + data:label.name + "\");"'><data:label.name/></a>&nbsp;(<data:label.count/>) 
 </b:if>
 </li>
 </b:loop>
 </ul>
 <b:include name='quickedit'/>
 </div>
 </div>
 </b:includable>
 </b:widget>
 <b:widget id='HTML1' locked='false' title='Azo Logo' type='HTML'>
 <b:includable id='main'>
 <div class='widget-content'>
 <a href='http://azowebsphere.blogspot.com/search/label/blogger%20template'></a>
 </div>
 
 <b:include name='quickedit'/>
 </b:includable>
 </b:widget>
 </b:section>
 </div>
 
 
 <div class='clear'> </div>
 
 </div> 
 
 <div id='footer-wrapper'>
 <b:section class='footer' id='footer'/>
 </div>
 
 </div></div> 
 </body>
 </html>

OR you can DOWNLOAD.

How to scan text directly into Microsoft Word using OCR

2008-08-25T17:12:00.000+08:00

One day my boss asked me to get a soft copy of an annual report. He gave a 400 pages report book and he want it done by the end of the day. Luckily he just needed some portion of it but still the amount were a lot and can't possibly done in one afternoon. So I'm thought that it would be better if I can scan the text report directly using a scanner and grab the text and past it into a Microsoft Word document. And that was exactly what I did.

I'll show you how I done it. This method require a copy of Microsoft Office 2007 or later. What you need to do is to install the Microsoft Office Document Scanning tool. It is shipped with Microsoft Office as an optional tool However the tool is not install during the Microsoft Office normal installation.

Step 1: Go to Control Panel > Add or Remove Programs. Search for Microsoft Office 2007. Click change button. Choose add or remove feature on the next screen. Next you will get this pop-up

Step 2: Scroll down to the 'Office Tools' and expand it. Expand the 'Microsoft Office Document Imaging'. You will get the following options feature.
Select 'Run on your Computer'. That's it, you are done.

How To Change Blogger Favicon

2008-08-25T17:04:00.005+08:00

What is Favicon?
Favicon (abbreviation of "favorites icon" and also known as a page icon), is an icon associated with a particular website or webpage that is displayed in the browser address bar next to a site's URL.By default, Blogger inserted their own favicon. Do you know that you customize and install your very own favicon? Here's how...

Before we start, you will need an icon image with .ico extension. If you don't have any, there several tools that you can use to create one. But if you're totally clueless, you can create it using an online tool. Once generated, save it on your desktop and follow this step:

Step 1: You need to host the icon image somewhere by uploading the icon to your favorite image hosting. You can try Oogle Toogle or imageshack if you want. Copy the published url as your reference.

Step 2: Go to your Blogger Dashboard > Layout > Edit HTML.
There find the title tag which looks like this:-

<title><data:blog.pagetitle/></title>

and add the following code:

Change the URL-of-your-icon-file to your actual icon URL that you get from step 1.

Step 3: Save the template, refresh your blog and you are done.

CSS 3 Column Blog Style Liquid Layout

2008-08-25T12:44:00.017+08:00

There are tonnes of method can be done to achieve this 3 column blog style layout, but I found a CSS layout from Matthew James Taylor and want to keep this as my reference because of its simplicity and straight to the point. So maybe you want to take a look.

Basically this is what we're trying to achieve with this CSS layout design:As shown above the center and right column widths are in pixel and the left column is the main content area will control the page height.

Update:
Since the author himself (Matthew James Taylor) found out about this page and ask to link back to his work rather than I post the CSS code here as "my own reference" well I respect that and remove the source totally. But using the word "steal" seems a little bit harsh here, I rather called it an open source. Beside this blog not even mine, it's Google's. I just put in some words. The author also said something like "some minor cosmetic changes". It's an indicator that I spent some amount of time to test out and verify each line of CSS code, print screen it and post it here. Not just simply put all the source. Beside it's just another CSS layout, the author might claiming all 3 columns layout website or patent the 3 columns website in a future as his invention. Yikes!! In the event of the author's hosting server under maintenance or out of service (some personal website has this problem), I post a copy of the code anyway.

How To Post Code Snippets in Blogger Post

2008-08-21T01:35:00.011+08:00

This issue haunting me for almost 2 years now (yup that long). I never properly research how it can be done before, not until last night. I have to enable this feature due to several factors where I need to post any sample snippet code directly to the blog post. However you need some tag into HMTL special character first.

As you notice (check for the blogger template tag), I start posting Blogger template for Blogger user. I did it because I want to channel out my art inspiration that clogging my mind. Anyway I thought maybe I could post the whole template (XML file) in the respective post. Later on I found that, Blogger just won't let you post some specific tag like <html> or <head> or <title> no matter what. So what is the point if it doesn't solve the issues? Read on...

Most people would say that using the <pre> would solve it. But I found a much better way to present your snippet code in your blog post. It is called SyntaxHighlighter. It quite easy to set up if you have your own domain as it requires some include files like css and javascript for coding syntax brushes where you can get it from the same website. No worries I'll show you how to deal with this. Read the step bellow:

1) Upload the SyntaxHighlighter files to your server.
2) Include the SyntaxHighlighter.css file at the top of your page, inside the head tag.


<link type="text/css" rel="stylesheet" href="SyntaxHighlighter.css">

3) At the bottom of the page, just before the end body tag, include the brushes and other js files you will need, as well as the function call to stylize the <pre> tags:


<script language="javascript" src="shCore.js"></script>

<script language="javascript" src="shBrushCSharp.js"></script>

<script language="javascript" src="shBrushXml.js"></script>

<script language="javascript" src="shBrushPython.js"></script>

<script language="javascript">

dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swf';

dp.SyntaxHighlighter.HighlightAll('code');

</script>

4) Now you can start using it by placing your snippet code in between these two <pre> tags that the javascript will stylize


<pre name="code" class="html">

<!-- code here -->

</pre>

<pre name="code" class="python">

# code here

</pre>

As you can see above, the result is much better.

Note:

You might find extra tag in the posted code. This is due to the Blogger setting. By the dafault Blogger will automatically add tag for each new line. There are to ways to fix this issue:

You can disable this Blogger feature at Settings > Formatting > and set the Convert line breaks to 'No'. However from here onward, each of your blog posting will be one liner. Yup, no matter how many new line you made, your blog entry output will be in one line.

Another method is to fix the SyntaxHighlighter by adding this specific script. Go to this line (at the step 3 above)


<script language="javascript">

dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swf';

dp.SyntaxHighlighter.HighlightAll('code');

</script>

Well ditch that that part and add this one.

Thanks to Hongjun for that fix.