Saturday, June 09, 2007


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.

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.


chem said...

aaar...ladybug bukan warna hijau!

hafiz238 said...

mungkin lepas ni kena tukar layout colour dia kepada warna merah :)

nuu_OL said...

bagus..mesra alam layout ni hehehehe

farah y said...

Look. What. I. Have. Missed. Out!! Hats off to you, Sifu. Hats off to you. Everything seems so.. Wow!

You've managed to come up with things that have been roaming around my head but couldn't execute (on 're-tweaking' the blog of course) :D

This is just great, Hafiz :)
I really hope you don't stop here.

hayad said...

pada saya sesuai ladybug ni dgn kaler ijau :)dia kan hinggap pada tumbuhan. tp mungkin background kalernya yg warna kelabu tu boleh dituka :)

juz my opinion,ehe...

hafiz238 said...

nurul: thanks. tapi kan rasanya warna merah lagi sesuai dengan ladybug :)

farah: it is not easy to achieve this stage. Alhamdulillah, everything seems fine now. Compatibility with different browsers is the most difficult part in designing a layout. If I have time, I will continue to design another layout.

Hayad: thanks for the suggestion. The original picture
has grey background. It is possible to change the background colour but I took the easier route :D.

ummu layth said...

hijau is perfect. kalau gune merah nanti tak stand out pula colour ladybug (or ladybird in UK)

what is widget? seems like a new word because baru je jumpa merata-rata

hafiz238 said...

widget is something like plug-in. New Blogger layout now make it easier if you would like to add links, feeds, shoutbox, or any code by using widgets.

These widgets allow you to add anything to the layout without any knowledge of html or css :)