Silver Ray

The name of this layout is a combination from silver lining and sunray which has been suggested by Minci and Farah. Thanks to Striker, Moshimoshi, Aria Ayumi for giving suggestion :).

Silver Ray is a fixed width 3-column layout. This is based on my current blog layout. This new blogger layout is compatible with IE6, IE7 and Firefox 2. Snapshot of the layout.

Update: Silver Ray version 2. Blog post is in the middle.

Comment Section.

I have modified the comment section. In my previous blogger layouts, I have designed it as a dialog box. For this one, I designed the comment section as a box.

Installation guide

1. Backup your current blog layout. How to migrate from old classic Blogger to new Blogger.
2. Download Silver Ray or Silver Ray (blog post middle) by right click and save link as...
3. Open the file using Notepad.
   
4. Search the following words: yourprofile, YourBlogName. [How to search? If you are using windows, press Ctrl and F together at the same time, or go to Edit and scroll down to Find]. Change yourprofile with the address of your profile. Change YourBlogName to your blog address. There are 3 places that you need to update YourBlogName.
5. Save the file.
6. Login into Blogger and click layout. Click edit html tab and upload Silver-Ray.xml by clicking upload button.
7. At this point, Blogger may ask you that the current widget setting will be deleted. Please save the setting into a text file [eg Notepad, Microsoft Word] if you are going to use the widget in the future. Otherwise, click confirm and save.
8. Next, click setting tab. Go to formatting and choose the following options.

• Language: English (United States)
• Date Header format: Month, Day, Year. Please make sure the name of month in abbreviation form. For example, December 10 2007 will be written as Dec 10 2007. This step is to ensure the date will fit into the date-calendar icon.

9. Check your blog and hopefully you will have Silver ray installed as your current blog template :)
   

Blogger Hack

1. Encrypted blog post. Read More.
2. Language Translation Widget.
3. Expandable post with Peekaboo view.
4. Recent post widget
5. Recent comment widget
6. Blogger Label Hack
7. Need more hack? Use Blogger Hack Search Engine or Google :).
   

If you have any problem, feel free to contact me.

rainy day

It has been raining for the past few days. Some area even have been flooded [read more]. Not that I am complaining though. Victoria is currently facing severe drought and many areas has been put under severe water restriction. Rain is a blessing for Victorians.

This is the current satellite picture.

The current enormous clouds has moved from East Australia to New Zealand. It seems like the cloud has gobbled up NZ. Hopefully the people of NZ will be all right :).

finding a name

I usually put a name to a blog layout based on the header image. At the moment, I am designing another blog layout. This time the header image is the picture below.

This picture is taken on top of Mount Lofty, Adelaide. The time was somewhere before sunset. So, what should I called my new blog layout? Should it be waiting for the sunset, cloudy day...any idea will be welcomed :).

Related post
My winter trip adventure (in Malay)
Taking pictures from Mount Lofty (in Malay)

Ladybug (Red theme)

I have edited the original Ladybug layout and modified the colour from green to red :). I'm not sure whether the colour is too striking or not. This is the first time I designed a blog layout in red.

This is the snapshot of the Ladybug (red theme)
The snapshot of the comment section.

This new blogger layout/template is compatible with Internet Explorer 6, Internet Explorer 7 and Firefox 2. There is one issue with Internet Explorer 6 though. The header is created in gif format and thus, when view using Internet Explorer 6, white corner appear around the header image as shown below. Issue has been fixed :).

Installation Guide

1. Make sure you backup your original blog layout/template in your computer. How to migrate from old blogger to new blogger.
   
2. Download the ladybug (red theme) by right click and click save link as....
3. There are several links that need to be updated with your blog url.

   • open the file with Notepad.
     
   • Search this in the file yourblogname and update this to your blogspot name. There are 5 places where you need to update the blogspot name.
   • save the file.
     

4. Login into Blogger and click layout. Click edit html tab and upload ladybug.xml by clicking upload button.
5. At this point, Blogger may ask you that the current widget setting will be deleted. Please save the setting into a text file [eg Notepad, Microsoft Word] if you are going to use the widget in the future. Otherwise, click confirm and save.
6. Next, click setting tab. Go to formatting and choose the following options.

• language: English (United States)
• Date Header format: Month, Day, Year. Please make sure the name of month in abbreviation form. For example, June 16 2007 will be written as Jun 16 2007. This step is to ensure the date will fit into the date-calendar icon.

7. Final step is to check your blog and hopefully you will have Ladybug Theme :D.
   

Related post

Ladybug (Green theme)

Feel free to contact me if you encounter any problem.

UPDATE 2/9/2007: Ladybug (red theme) with 3 column.

Broadband connection speed

Out of curiosity, I tested speed of my internet connection. The results were strange and perplexing. I hypothesized that the closer the server is, the faster the internet speed.

Testing at Adelaide gave me this result which is the fastest speed I achieved in this test.
From Auckland, the speed was lower than Adelaide.
Testing at further sites around the globe gave me mixed results.
Testing two sites from Malaysia highlight the differences.
In conclusion, my hypotheses was proven wrong. The distance does not necessarily affect the speed of internet connection. I guess it must be something to do with the settings of firewall at the server or type of internet cables present in the region.

You can test speed of your internet connection at speedtest.net

Melbourne lockdown.

Gunman on the loose...

POLICE have identified a person of interest as they hunt for the gunman who shot three people in Melbourne's CBD this morning, leaving one man dead and a man and woman in hospital.

Two men came to the aid of the woman who was involved in a scuffle with a man, who then opened fire on all three before fleeing at approximately 8.15am (AEST) this morning near Flinders Lane in central Melbourne.

One man was killed while the other man, 30, is in a critical condition in hospital undergoing emergency surgery .

Read more

I was planning to go to the city this morning. Fortunately, I postponed the plan...

How to migrate from old classic Blogger template to new Blogger layout

First step is to login at Blogger. If you are using old classic Blogger, your Blogger Dashboard will be looking something like this.

Click template and click customize design.Click upgrade you template, and Blogger will transfer your classic Blogger template into new Blogger layout. Blogger will automatically save your old template and you will always have the option to revert back to classic Blogger :).

Now, Blogger will ask you to choose any of the default Blogger layout. Choose any layout and you will be given the option to choose any customised Blogger layout later ;). For example, I choose the first Blogger layout which is Minima.
Once you do that, you are now have successfully transfer your Blogger account into new Blogger layout :D.

Now, the explanation after this will demonstrate the steps to upload any customised Blogger layout to your blog.


Click edit html.
Click browse. Find the location of any Blogger layout that you have saved in your computer. The file should have the extension of .xml. For example Blogger.xml . If the file does not have the extension of .xml, the layout will not be accepted by Blogger.

Once you have found the file, click upload.

Now, you should have something like in the picture below. Blogger will ask you whether you would like to like to delete widgets.

What are widgets? Blogger widgets are mini application that helps you to add anything to your blog. You do not necessarily need to know any programming language to edit widgets. For example, you can easily add links, shoutbox, RSS feeds, third-party javascript using widgets without having to modify the whole layout manually.

Since this is the first time you are using new Blogger layout, your current widgets will not contained any information. Thus, click confirm and save.

You will be directed to page elements under template tab once you saved your new Blogger layout.

This is the example of page elements of my template, Ladybug. Do you know that you can drag-and-drop the page elements in page element editor? For example, you can easily put Labels on top of About Me. It is a cool feature in new Blogger layout B-).

freezing

And it is getting colder from now on. At 9.00pm, the temperature is 2^oC. I bet in the early morning, it will be somewhere negative celcius.

Same layout, different platform.

I have managed to transfer my blogspot layout to another blogging platform, efx2.com. There are few things that I couldn't achieved at efx2 due to differences of the platform.

The experience taught me a lot and in the same time it helped me to improve the original layout :).

Learning to design

I started blogging around middle of 2004. Initially I used custom templates offered by Blogger. Then, I found blogskins which offer literally thousands of custom-made Blogger templates. I started to browse looking for cool templates and bits by bits, I learned a bit about HTML.

I learned how to make font bold, italic, underline, cross the text, _subscript and ^superscript. I learned HTMl by knowing the basics. I played around with colours and borders. Initially, HTML seems something unfamiliar to me. It is totally different from anything that I have learned so far. Please note that I do not have any prior knowledge on neither programming nor web design. It was a difficult journey but I persevere.

Early in 2006, I started to use different internet browser following my friends recommendation. Previously, I used Internet Explorer 6 [IE6] as my only internet browser since it is the default browser in Windows. The new browser was Mozilla Firefox. It has cool features and amazing collection of extensions.

After few weeks using Firefox, I noticed that many websites look different under Firefox and IE6. In fact, my own blog at that time look totally different under different browsers. I investigated and found out that there are differences on how internet browsers interpret every websites. One of the major reasons lies in one of the programming language called Cascading Style Sheet [CSS]. IE6 does not follow web standards established by World Wide Web Consortium and thus, many websites break-down when viewed using IE6.

Triggered by that knowledge, I started to learn CSS. CSS is based on HTML and since I have learned much about HTML, the journey now is a bit easier. It took me months and years to learn those two languages. In the same period, I also discovered the differences of internet browsers under different operating systems, namely Windows XP and Mac OS.

With the amount of knowledge I have on CSS and HTML, alhamdulillah, I have gained the basic ability to understand the code behind web design. There are three basic things you need to know about web design.

1. HTML
2. CSS
3. ability to create/use elegant image/graphics ;). You need to know a bit about image-editing software for example Paint [the most basic], GIMP, or Adobe Photoshop. There are alternative methods if you don't want to spend time to learn about image-editing. You can always use other people pictures in your layout or opt for not using any image at all in your blog design :).
   

My journey in web-design is still in the beginning and there are many things that I am interested to learn more. If you are interested to learn about design, start with the basics first :)

• HTML school
• CSS school
  

Selective expandable post in new Blogger

At first, I try to implement the code from Blogger Help. I succeeded to establish expandable post in this blog but Read More links appear in every post, and that is annoying. I try to play around with b:if condition tags but failed eventually. I guess I do not have enough knowledge and experience with Blogger conditional tags.

My idea of using b:if tags is to create an equation. If span class id fullpost only contains "Type rest of the post here", Read More links will be hidden. If the text in the span class not equal to the default text, Read More links will appear. If I know a bit of javascript, this might help, I think...

As a final measure, I used Ramani's hack from hackosphere. It works but same problem appear again. Read More links appear in every post. Thus, I modified the code a bit. Instead of putting

span id="fullpost">Type rest of the post here</span

in the post template, I put the code manually in post editor. It works. Now, Read More links will only appear in any posts that I choose :).

UPDATE: At first it works, but later it fails miserably :-L Now, it works. The reason it failed previously is caused by putting the javascript in the body section instead of head section :)

Ladybug

I have finished the layout. The header image shows a macro shot of ladybug :). The original picture come from this website. It is an excellent picture and the whole layout is based on the picture. Check the screenshot of the layout below.

Features of this layout

1. Favicon . Every header in the sidebar widget will also have this picture next to the title.
2. Date-calendar icon . This feature is inspired from iTheme created by Arephyz. There a lot of elegant new blogger layouts created by him :).
3. Blog search. The search function is taken from the original Blogger navigation bar. Any search will be displayed in the blog itself.
   
4. Author comment highlighting. Credit goes to Ramani. I have modified the code a bit and put images surrounding the comment section. Comment from blog author and visitor will have different colour. The result is shown below B-).
5. This new blogger layout is compatible with three major internet browsers: Internet Explorer 6 [IE6], Internet Explorer 7 and Firefox 2. Only one tiny issue with IE6. The ladybug icon is in PNG format and when view using IE6, the icon will have grey background as shown here. It is not that obvious though.

Instruction on how to install this layout.

1. Make sure you backup your original blog layout/template in your computer. How to migrate from old blogger to new blogger.
   
2. Download the ladybug.xml by right click and click save link as....
3. There are several links that need to be updated with your blog url.

   • open the file with Notepad.
     
   • Search this in the file yourblogname and update this to your blogspot name. There are 5 places where you need to update the blogspot name.
   • save the file.
     

4. Login into Blogger and click layout. Click edit html tab and upload ladybug.xml by clicking upload button.
5. At this point, Blogger may ask you that the current widget setting will be deleted. Please save the setting into a text file [eg Notepad, Microsoft Word] if you are going to use the widget in the future. Otherwise, click confirm and save.
6. Next, click setting tab. Go to formatting and choose the following options.

• Language: English (United States)
• Date Header format: Month, Day, Year. Please make sure the name of month in abbreviation form. For example, September 24 2007 will be written as Sept 24 2007. This step is to ensure the date will fit into the date-calendar icon.

7. Final step is to check your blog and hopefully you will have Ladybug Theme :D.
   

Options

You can now choose to update this layout with several blog widgets. The default widgets in the layout is profile, blog labels and archive.

• Recent comment and recent post widget by Beautiful Beta. Please click here for further instructions. There are several blogger widgets available in that site.
• Smilies. Click here for further instruction :).
• Would like your feed to show the post according to published date instead of when the post is updated? This is the answer.
• Would like to modify your Google Reader Shared Item? Click this post.
• You need more Blogger hacks. How about using Blogger Hack Search instead ;).
  

Related post

Ladybug (Red theme)

Feel free to contact me if you have any problem installing the template.

sneak preview

This is what has been keeping me busy :). I designed this layout to fill my free time and to improve my skill. The main colour/theme of this new layout is green. I designed the comment section as a dialog box and this is managed by creating several images. I probably give this layout to anyone who are interested. Speaking of that, maybe I should create another blog for new blogger layout that I will be designing in the future.

I'm not sure whether the header fits the main theme. It is something to do with insect :).

almost complete

This blog layout is almost complete. Only few things that I wish to add to this layout. Adding favicon, create an expandable post and perhaps reduce the length of style sheet. I am attracted to add recent post widget but I think blog archive should suffice for that function :).

So, after this blog layout complete, perhaps I should create few blog layouts just for fun ;).

bookmark versus feed subscription

There are few ways to mark a website. The most common method is to bookmark/favourite in the browser. The shortcut for that is Ctrl + D :). As we surf more and more websites, we are likely to bookmark a lot of websites and the list of bookmark in the browser is getting longer; but you can always create folders to manage your long bookmark list.

New method of marking a website is to subscribe to RSS/Atom feed of your favourite websites. The advantage of this method is that you will know when the website is updated. Firefox offers feed subscription via Live Bookmark. Other browsers offer similar feature too. This is a good feature. One of the disadvantages of using this method is that you cannot access the feed whenever you are away from your computer.

Now, let me introduce web-based feed aggregator/reader. This aggregator/reader collects all your feeds and display these feed at their website, online or offline. Now, you can always access your feeds anywhere as long as you have internet connection.

I have been using Google Reader as my feed reader. Now, I have reduced my bookmark list and subscribe all the feeds of my favourite websites. The only trouble for this is when the website does not offer any RSS/Atom feeds :(.

For every blog hosted at blogspot.com, you can always find their post and comment feed respectively. Although the blog author may not display their feed, you can always find the feed.

To find post feed, you can always click the feed icon at the address bar. In firefox, the RSS icon is the one in orange ;). Manually, you can type this address

http://theblogname.blogspot.com/feeds/posts/default

For comment feed, the address is

http://theblogname.blogspot.com/feeds/comments/default

By subscribing the blog's comment feeds, I will know when new comment has been posted :). Now, I am waiting for Utusan Malaysia to offer RSS feeds :-w

I did not mention social bookmarking in this post. If you are interested, perhaps you can visit Digg, Del.icio.us, Reddit. Social bookmarking is useful in finding excellent websites around the world B-)

Related post:
Google Reader shared items hack
Change default blog post feed to feedburner

Comment highlighting

At first, I would like to edit the comment section by designing it as a dialog box. This can be achieved by putting images surrounding the comment. That would be cool but at last minute, I scrapped the idea. The reason behind this is that I don't want to increase loading time of this blog. Currently, it has few javascripts which increase the page load. Another reason is the hack behind comment section. If I wrote my comment, my comment will be highlighted and have different colour compare to other commenters. If I continue with my original idea, I need to create several images. To check this out, click the post title that have few comments in it, for example the previous post :D.

contact address

I have put my email in the sidebar in case someone would like to ask something about this blog. I put it in the form of image to reduce the chance of any spammers to know about my email address. Hopefully my email will not be filled with any spam at all. Currently, I've never received any spam for that address after using it for more than 2 years B-).