10 Ways To Bedizen Your Blog [D.O.R style]

Salam and All praise to Allah SWT, its been 3 years i've blogged, and i think it's about time i share a little one or two on how to beautify blog. InsyaAllah it'll help attract readers to your da'wah and increase readers comprehension on anything you are about to address.

*I am lower class html & css codey. So this will all be more to basics.Nothing fancy =) I really hope it'll benefit you guys !

1. Putting up the system

Before making any major decision in making changes in UI(User Interface), make sure first thing first, set up your data and statistic system. For that i recommend


it provides:
+ Hits Tracker - Tells you how many people viewed your blog
+ Statistics Report - Gives you number of new time visitors and returning visitors
+ IP Tracker - Let you track down scam&spam IP to block
+ Readers System - Gives you the type of browser and dimension of reader's screen

Reasons for this system:
+ It gives you feedback on types of post which gain interest of your reader
+ It helps you to design wisely by knowing the right table frame size for majority of your readers

2.Starts of with recommended theme

If you started with blogger[blogspot] platform, starts of with the recommended blog theme given by blogger. This is because the css coding and xhtml structure of the code given in the theme are already standardized by google. The xml class are of the standard and easier to follow up with many tutorials on the internet. Some of the free theme you get from internet, they might have redefined the class name and coding structure, hence to follow up with tutorials on the net could be problematic and tideous.

I started off with "minima dark" given by blogger

3.Setting Up Your Frames

After gaining enough data and statistics of your viewer’s screen dimension, decide on the right frame size.

! Not too small !
It’ll cause cluttering and lack of neatness in presentation and cause imbalance in white areas (empty area) and content area

! Not too big !
It’ll cause your viewer to scroll sideways making it troublesome and less prensentable for readers.

Statcounter > System Stat

According to my statistics most of my viewer used 1280 x 1024 thus I chose 80%(1000px for header banner) for my main frame size. Make sure theres enough white spaces and margin between all the contents and sub sections. It’ll make it much more neat and less cluttering.

Note If you code in 1000px instead of 80%, you might deprive the 800px user from ease of surfing and they have to scroll sideways to read. Go for percentage value instead, it'll shift the cell to the right ratio when the Web Browser are minimized or user which use lower than 1280px.

To change settings of the main frame. Go to Layout > Edit HTML, and find following code:

Follow up with main wrapper 70% and sidebar wrapper 26%.
4% allocated for white spaces.

This is how it suppose to go

*Arrow indicating margin and white area to make things NEAT!*

4. Fonts Facts

Fonts is more about taste and depends on the theme. But try to obey this two rules.

i. Contrast in color

Make sure font color are in contrast with your background .
Light font with dark background .OR. Dark font on Light Background

THIS is easier to read than THIS

Try to avoid yellow and red. It'll influence mood and emphasize anger.
Go for PINK instead.

ii. Optimum size

PLEASEEEE go for standard size font or bigger. Dont ever do this :


Try to avoid using too large of a font. Except for artsy-fartsy stuff

To customize font use this

List of web safe font for css >> here
List of web safe font for html >> here
Color hex code generator >> here (eg; #231243)

5. Disable border on picture default

Check this out >> here
To disable border for header, go to header subsection in "edit html" and do the same.

6. Posting Big and Uncompressed Picture

Like This:

For this you'll need a web picture host. Free ones that i used:
>> MyOpera

After uploading the photos, capture the photo link and use this code: and is the two main photo stock site i used to make post other than my own photo collection.

Note: Blogger picture uploader will compress pictures and reduce quality. Sorry. Im such a NeatFreak

7. Pimping Block Quote

It'll help you get this :

This block quote is like Aladdin's Flying Carpet

Check it out >> here

8. Recent Comment

If you are person like me which do not moderate comments, you should have this widget. It'll be a big help in letting you know of incoming new comments which needs to be respond to. It'll help to get you noticed on the comment made on all the old posts too.

check it out >> here

9. Your Own Tune

You'll need free hosting domain . I recommend >> FileDen. Upload your favored mp3 files and get yourself a mp3 widget. I recommend >> MixPod Play your favourite nasyeed and zikrullah with different choices of mp3 player !

!! Attention : if your mp3 quality is too high of , it'll cause serious lag and create annoyance . Compress your mp3 by reducing bitrate file with >> SuperConverter

10. Star ratings

This one i just discovered 2 days ago. It allows you to get respond from readers with just a single click. It is somewhat the same features as "Like" button on facebook.

Check it out >> outbrain

For CSS HTML XHTML coding dictionary >> w3chool


Together with this post i include my XML code if you want .
Try it out! I dont really mind

Download Delights Of Remembrance XML >> here
Go to Layout > Edit Html > Upload

I hope you could make use of this to spread da'wah and peace ... be the best at what you do =)

May Allah Bless your effort insyaAllah =D !

hit me for any question =8 B
p/s: i could help pimp your blog. Sastisfaction NOT guaranteed!

with love,

14 comment:

Si Bisu says:
at: January 27, 2010 at 6:22 PM said...

panjang panjang pengsan baca.

anyway, simplicity is the best.

a.j. says:
at: January 27, 2010 at 6:42 PM said...

Yes BOSS! =) constructive indeed!

couldnt agree more on my lengthy habit

Syafiq Afifi says:
at: January 28, 2010 at 8:03 AM said...

wat aaaaa

a.j. says:
at: January 28, 2010 at 10:38 AM said...

=) tee hee

ZuwL89 says:
at: January 28, 2010 at 6:43 PM said...

salam..aha best best! xyah google byk2 kali, suh org dtg sini je baca :D great job aj

a.j. says:
at: January 28, 2010 at 11:54 PM said...

thnx zuwl =) harap bermanfaat ... ni pun forwardkan2 apa yand sudah ada di internet ...

ajak la ramai2 zul! lagi ramai lagi banyak blog2 yg cantik ... insyaAllah

TheHumbleWayfarer says:
at: January 29, 2010 at 12:01 AM said...

ayub, i really envy you =b maybe u can help me with my blog later. i prefer a dark layout actually, but can't do anythng..anyway, i'm not really a tech savvy.haha
really afraid that once i change the layout, i'll lose evrthng.

huh, so many familiar 'faces' in ur lovely peeps. =D .

a.j. says:
at: January 29, 2010 at 12:43 AM said...

thnx zuwl =) harap bermanfaat ... ni pun forwardkan2 apa yand sudah ada di internet ...

ajak la ramai2 zul! lagi ramai lagi banyak blog2 yg cantik ... insyaAllah

a.j. says:
at: January 29, 2010 at 12:46 AM said...

THW! hi hi! yes ... it was all urs! trying to reach out for more muslim friends ...

In friendships theres rizq and ra7mah ...

of course why not akhi! would love to help ...!

Im not savvy myself, but i know a few tricks =)

I learn to write better from you =) i envy you more!

at: February 22, 2010 at 9:08 AM said...

I didn't understand the concluding part of your article, could you please explain it more?

a.j. says:
at: February 22, 2010 at 10:14 AM said...

which part anon? xml part?

at: September 12, 2010 at 11:10 PM said...

I seldom leave comments on blogs, but the ideas really rocks, also I have a few questions like to ask, what's your contact details?


at: September 22, 2010 at 7:46 PM said...

Awesome site, I hadn't noticed before during my searches!
Keep up the good work!

at: January 27, 2011 at 2:51 PM said...

Fantastic article as always, I am seriously considering something along the lines of an affiliate section on my own site… so very timely post.