Eches - Blogging, technology, internet and earn money online

The addition of subtle HTML and CSS styling in your blog is essential as readers might overlook the things that you desperately want them to read. Here are few tricks that you can do to make your blog more appealing and to enhance the visibility of important facts of your posts.

1. Highlighting Important Text Inside HTML Boxes

Lets start with an example. Instead of using mundane exceprt (i.e. “Lorem ipsum dolor sit amet…”) in this example, I will use my first language for the exceprt in this example ;)

– Example Begins –

Saya sungguh tertarik dengan long-term goal saudara smartusaha dalam menyahut cabaran Melayu Boleh: Wangcyber SEO challenge. Bermula

dengan blog yang baru sahaja disetup dengan blogspot, ini sesungguhnya merupakan cabaran SEO sebenar bagi seorang webmaster kerana anda perlu memikirkan cara untuk memastikan blog baru tersebut diindexkan secepat mungkin ke dalam google dan yahoo.

Saya berpendapat, blog baru tersebut akan dibacklinkkan ke blog utama beliau yang mempunyai PR5. Dengan cara ini, mana2 blog baru akan diindexkan dengan kadar yang lebih cepat dan ini adalah juga salah satu strategi SEO yang sering dipakai oleh webmaster2 telah mempunyai PR website yang tinggi.

Saingan dalam “melayu boleh” semakin rancak dengan kemasukan banyak webmaster2 yang berpengalaman. Sekian sahaja untuk contoh HTML dan CSS tricks
– Example Ends –

Place the following code between the paragraph or wherever you want it to be and it will appear like in the above example.

<div style="width:200px; 
height:100px;
float: right;
border-top: 1px solid #000; 
border-bottom: 2px solid #000; 
padding: 5px;">Sample Text Goes Here.</div>

2. Never use Ampersands or Quotes in Titles

There’s nothing wrong with using Ampersand signs (&) or double-quotes(”) in your blog titles, but in some cases they may break your social bookmarking URLs. As far as this blog is concerned the “&” will create an error in my feedburner. Luckily the “&” sign resides at lower end of this post, so it won’t create the problem. You should use HTML special characters like

& for & [ampersand]
" for ” [double quote]
' for ‘ [single quote]

3. Bullets and Lists are boring, try something different

If you create a list of something you can switch to other fancy bullet style rather than the convetional one. Here’s some example that’s taken directly from the original post.

» with » | º with º | · with ·

4. Image wrapped around text

Blending image into a lengthy post will enhance readers’ comprehension. This can be done by adding the following style="margin: 0 0 2px 5px; float: right;" into img tag. For example,

For right alignment - <img style="margin: 0 0 2px 5px; float: right;" src="file_name_here" />
For left alignment - <img style="margin: 0 5px 2px 0; float: left;" src="file_name_here" />

I hope this will give your post a better look.

[source: Digital Inspiration]

Technorati Tags: HTML, CSS, tricks, style your post