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

>> statcounter.com

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 :

ICANTSEEWHATYOUAREWRITING

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

To customize font use this
<font size=3 color="#ffffff" face"trebuchet">YOUR TEXT</font>

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:
>> Flickr.com
>> MyOpera

After uploading the photos, capture the photo link and use this code:

<img src="InsertURL" style="border:none;" width=700px>

Flickr.com and Deviantart.com 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,
aj.

ayub.jamil.my