Aku melihat dia menangis di sudut jalan

JOIN THIS SITE

 

     Ketika akku berjalan menyusuri lorong kehidupan, aku bertemu seorang perempuan di persimpangan jalan kehidupan.. dia menangis, lemah, bahkan untuk berdiri pun sepertinya dia sudah tak mampu lagi, ketika aku mengulurkan tangan ku dan mencoba bertanya, belum sempat aku membuka mulut, perempuan itu menatap lekat wajah ku, bola mata nya membesar dan berbinar, di menangis, dan berkeluh kesah..

“bisakah kau menjawab pertanyaan ku? Mengapa dari sekian banyk orang yang beruntung di dunia ini aku tidak ada di antaranya? Mengapa dari sekian banyak orang yang berbahagia di dunia ini, aku tidak ada di antaranya? Mengapa dari sekian banyak manusia yang memiliki keluarga lengkap yang saling menyayangi dan mengayomi, mengapa aku tidak ada di anataranya? Mengapa dari sekian banyak orang yang di saying pasangan nya aku tidak ada di antaranya? Kehidupan seperti apa sepenarnya ini? Apakah aku sedang bermimpi? Lalu jika aku bermimpi mengapa mimpi ini bergitu buruk? Mengapa aku tak kunjung bangun juga dari tidur ku ini? Tapi jika ini mimpi mengapa mimpi ini tampak begitu nyata? Dunia apa ini sesungguhnya? Atau ini adalah sebuah drama sinetron yang di rilis sutradara dengan penuh duka dan aku sebagai peran utama yang slalu menderita? Akankah ending membahagikan di rilis oleh sutrada? Lalu kapan ending itu dating? Berapa episode lagi harus ku lewati? Aku lelah.. cerita ini tampak seperti ilusi semata akan tetapi mengapa seolah akju mengalami ini seperti sungguhan? Dan tangis ini kenapa begitu terasa menyayat hati? Bisakah kau menjawa pertanyaan ku? Lalu harus sampai kapan drama ku menebar senyum palsu berakhir? Samapi kapan ?”

Kemudian di bangun tanpa menunggu jawaban ku dia berjalan lagi lurus kedepan tanpa sepatru dengan jejak kaki penuh darah, kakinya terluka, akan tetapi dia terus memaksakan untuk berjalan lurus kedepan.. mengapa dia menangis? Mengapa dia terluka tapi terus saja berjalan? Mengapa dia tidak singgah lebih lama lagi? Mungkin aku akan mengajaknya kerumah minum susu hangat dan mengganti pakaian nya yang goyah.. bagaimana mungkin perempuan mampu berjalan dengan tertaihnya seperti itu?

Tahukan ahnda mengapa?

 

Tatapan dari sosok itu

JOIN THIS SITE

 

Tatapan itu, tatapan yang betapa sejuknya ketika di lihat, tatapan yang mamapu membuat suasana panas menjadi teduh, tatapan yang mampu membuat hati terluka menjadi tawa, dan kesedihan menjadi bahagia..

sosok yang mampu memeberi tatapan tersebut menghilang saat ini, entah aku hanya bermimpi, berilusi atau berfantasi saja atau memang nyata, jika hanya sebuah mimpi, mimpi itu terasa nyata, mimpi itu menghapus segala duka ku dan mengubahnya menjadi tawa, mimpi itu membuatku bahagia..

 

Blockquote

 
JOIN THIS SITE   

 

 Apakah "Blockquote"? "Blockquote" digunakan untuk menunjukkan petikan teks/perenggan daripada sumber yang lain atau dari entri post-post anda yang lama."Blockquote" juga digunakan untuk menunjukkan satu petikan atau kata-kata yang hendak di'tekan'kan kepada pengunjung sesebuah blog. Contoh:

 

Caranya :

1. buka new post

2. setiap entri post seperti biasa, kemudian bila ada petikan atau perenggan yang nak dihighlightkan sebagai blockquote, klik ikon quote:

 

Selamat mencoba ...

Cute Backround

JOIN THIS SITE

 

 Ini buat kalian yang pengen backround blog kalian lucu kaya punya aku ini

 

 

Caranya mudah..

1. Log in Blogger kalian >> template >> sesuaikan

2. Klik Latar belakang >>Tingkat Lanjut

3. tarik scrol kebawah kemudian klik tambahkann Css, dan paste kan kode nya di kolom putih.. rujuk backround yang kalian mau di bawah..

ini cuma pilihan saya, kalian bisa pilih pilihan lainnya DISINI

<style>
.glitters { Code Generated by Glitter Graphics }
table, tr, td { background-color: transparent; border: none; border-width: 0; }
body {
    background-color: FFFFFF;
    background-image: url('http://dl3.glitter-graphics.net/pub/51/51720sn4ss8yz1p.jpg');
    background-attachment: scrolling;
    background-repeat: repeat;
}

</style><div id=Backgrounds style='left:10; top: 8; position: absolute'><a href=http://www.glitter-club.com title='Myspace layouts'><img src=http://dl3.glitter-graphics.net/banners/backgrounds.gif alt='myspace codes' border=0></a></div>Click here for <a href=http://www.glitter-club.com title='Myspace layouts'>Myspace glitter graphics and Myspace layouts</a><br>

<style>
.glitters { Code Generated by Glitter Graphics }
table, tr, td { background-color: transparent; border: none; border-width: 0; }
body {
    background-color: FFFFFF;
    background-image: url('http://dl3.glitter-graphics.net/pub/2835/2835164rb0grf581a.gif');
    background-attachment: scrolling;
    background-repeat: repeat;
}

</style><div id=Backgrounds style='left:10; top: 8; position: absolute'><a href=http://www.glitter-club.com title='Myspace layouts'><img src=http://dl3.glitter-graphics.net/banners/backgrounds.gif alt='myspace codes' border=0></a></div>Click here for <a href=http://www.glitter-club.com title='Myspace layouts'>Myspace glitter graphics and Myspace layouts</a><br>

<style>
.glitters { Code Generated by Glitter Graphics }
table, tr, td { background-color: transparent; border: none; border-width: 0; }
body {
    background-color: FFFFFF;
    background-image: url('http://dl3.glitter-graphics.net/pub/2727/2727364prucex3wc9.gif');
    background-attachment: scrolling;
    background-repeat: repeat;
}

</style><div id=Backgrounds style='left:10; top: 8; position: absolute'><a href=http://www.glitter-club.com title='Myspace layouts'><img src=http://dl3.glitter-graphics.net/banners/backgrounds.gif alt='myspace codes' border=0></a></div>Click here for <a href=http://www.glitter-club.com title='Myspace layouts'>Myspace glitter graphics and Myspace layouts</a><br>

 <style>
.glitters { Code Generated by Glitter Graphics }
table, tr, td { background-color: transparent; border: none; border-width: 0; }
body {
    background-color: FFFFFF;
    background-image: url('http://dl3.glitter-graphics.net/pub/577/577814mxl3lzplgr.gif');
    background-attachment: scrolling;
    background-repeat: repeat;
}

</style><div id=Backgrounds style='left:10; top: 8; position: absolute'><a href=http://www.glitter-club.com title='Myspace layouts'><img src=http://dl3.glitter-graphics.net/banners/backgrounds.gif alt='myspace codes' border=0></a></div>Click here for <a href=http://www.glitter-club.com title='Myspace layouts'>Myspace glitter graphics and Myspace layouts</a><br>

<style>
.glitters { Code Generated by Glitter Graphics }
table, tr, td { background-color: transparent; border: none; border-width: 0; }
body {
    background-color: FFFFFF;
    background-image: url('http://dl3.glitter-graphics.net/pub/676/676657yhxq5o5bjd.gif');
    background-attachment: scrolling;
    background-repeat: repeat;
}

</style><div id=Backgrounds style='left:10; top: 8; position: absolute'><a href=http://www.glitter-club.com title='Myspace layouts'><img src=http://dl3.glitter-graphics.net/banners/backgrounds.gif alt='myspace codes' border=0></a></div>Click here for <a href=http://www.glitter-club.com title='Myspace layouts'>Myspace glitter graphics and Myspace layouts</a><br>

SELAMAT MENCOBA.......

Cute Icon

JOIN THIS SITE

Hai.. Ini aku punya beberapa Icon cute, cocok banget buat nambahain di mana pun kalian  suka, bisa buat di mana pun, kalian bisa copas URL atau HTML nya.. sesuka kalian mau tempel dimana..

URL

[url=http://www.glitter-graphics.com][img]http://dl2.glitter-graphics.net/pub/250/250142zs5hlrlxbo.gif[/img][/url]

HTML

<a href="http://www.glitter-graphics.com"><img src="http://dl2.glitter-graphics.net/pub/250/250142zs5hlrlxbo.gif" width=50 height=48 border=0></a>

URL

[url=http://www.glitter-graphics.com][img]http://dl8.glitter-graphics.net/pub/434/434518xlbzh5vtds.gif[/img][/url]

HTML

<a href="http://www.glitter-graphics.com"><img src="http://dl8.glitter-graphics.net/pub/434/434518xlbzh5vtds.gif" width=30 height=27 border=0></a>

URL

[url=http://www.glitter-graphics.com][img]http://dl6.glitter-graphics.net/pub/638/638146kvkkfs33zm.gif[/img][/url]

HTML

<a href="http://www.glitter-graphics.com"><img src="http://dl6.glitter-graphics.net/pub/638/638146kvkkfs33zm.gif" width=28 height=28 border=0></a>

URL

[url=http://www.glitter-graphics.com][img]http://dl6.glitter-graphics.net/pub/575/575266us4crzygeq.gif[/img][/url]

HTML

<a href="http://www.glitter-graphics.com"><img src="http://dl6.glitter-graphics.net/pub/575/575266us4crzygeq.gif" width=32 height=32 border=0></a>

URL

 [url=http://www.glitter-graphics.com][img]http://dl.glitter-graphics.net/pub/1008/1008951xbh88shb03.gif[/img][/url]

HTML

<a href="http://www.glitter-graphics.com"><img src="http://dl.glitter-graphics.net/pub/1008/1008951xbh88shb03.gif" width=23 height=23 border=0></a>

URL

[url=http://www.glitter-graphics.com][img]http://dl8.glitter-graphics.net/pub/638/638148hihxwgn8gx.gif[/img][/url]

HTML

<a href="http://www.glitter-graphics.com"><img src="http://dl8.glitter-graphics.net/pub/638/638148hihxwgn8gx.gif" width=28 height=28 border=0></a>

URL

[url=http://www.glitter-graphics.com][img]http://dl7.glitter-graphics.net/pub/727/727057f5owblcuts.gif[/img][/url]

HTML

<a href="http://www.glitter-graphics.com"><img src="http://dl7.glitter-graphics.net/pub/727/727057f5owblcuts.gif" width=50 height=50 border=0></a>

Naaaaahhh.. selain ini kalian juga bisa cari icon lainnya di sini

selamat mencoba....

Menu Horizontal Untuk Blog

     join this site

https://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaACfoK5vky3XZIm9rcbP%252BabkabKSTAGrAlarPV9O5IlQwXxBqgPHYWaaCIQg3zAgZAejCqV27%252FEPAyNxjwXSFXewOv4R%252BgmXV6iBYrQuNh%252FyEYm3V6ACVsYYlX5vyp6HeYsZFkv%252Fq502rsWpkIdRYC0msnabt4mJXE8Yl9qGcad90aadRrq7XiSk9dhmfk63msfAk6kX2z6%252B0xUea6F3GuSlbfqGx8tLBSgPYv6iVCb6GKDXX4%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1

Disamping menampakkan kelainan pada rupa blog anda, dengan adanya menu horizontal ini, blog akan lebih mudah di explore oleh pelawat. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod Menu Horizontal pada ruang Html / Javascript tadi.

<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>

# - url untuk setiap menu ( cth: http://jombinabelog.blogspot.com/2012/01/menu-horizontal-pada-blog.html)
Link 1 - 7 - nama menu yang korang nak letak ( cth home, about me, contact dll)

* Terdapat 9 pilihan style menu horizontal untuk anda pilih. Just copy kod yang disediakan:

 

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHyl3nwOdGSAl0gxMXTP9ViajhfozrqmEFlZQsKCxd_NittAeG1f3YXm4pyO9imXsLw1sqra5SIyxyK7TGUF8Dxd4BbS5xw5WRMBTGi442rdXgLNwt65dnN3inURolPL0W0a1g4X1CF94/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1gJqgcJDBYtErIxh3tkHJEvH38h607bA1KnX4HsWmj8bRG3pX6t_mCFJzwNx9rVS2oveEXMRiZgB3yEmfOqjWgd5Kq8YJbTltUKtTT5-fw7EgcwS8nab-6xkd1bfRiPfMQb-0UKHn_vQ/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QjcvpmXiji6ozXKFsYRJt7Zvr6Ozt37st717kLREhNSbJ33g3gwMBvCydvyqbixRiJbs06XVcr5Uh6b5jzqvZN6jBFI0IG_H-3P9r_OHWV0zXOgjpxnaBow3juT3COizjQJg4x2pvcA/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhoDTyBhs3UWRRAkZMDsmOW4MuabI5Ng3n7dwCWJEy5X39Lq0TwGo-PXU5YUlBqDInxvm_Dmo1y_LY7wEGY4F2W4231CQfCFsmYTYgd4C_DmxcBwh_WfiFtDpS9OYFz2BqxOLMJBI4zE/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwlxSko74WltvVlgXamJ83arjgSHlbE4l-qAw72412TowdIkqhh989UrqeWFtiO2dx8Wllc-Nv_SxMals0HA7byIUJOK9ehPBqVyZEytJEzxq02rzqpo4ch437baosquaj63vs7ARmfpU/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUCA6YvbFeV_N0zUXj5HnUonE3k_tnCan9nc_6RJcZpuoAZKjqg_kkdTHbDBGjKBLokyoTy9khyphenhyphen-PFF1strx39V2cQyEP-VUv7ApezIIYRykiJImE6cbLz91jA01PdrRg4WBEaeOhBIm8/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"><ul id="navlist"><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNYv9S6MsVL6CaCMCHzObQLX8YA0zuywV1c0Fp0puPb9omXsBFPB7uQM3q4UGgZTXn7X9MqshoY1yTUnyqGFz0KLGHoXd0uffmqV580MiweoTBKJBngegPf5Npl2ldqhZdK5Hm-My3Hds/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKDxIH-WJfQw3h15mpFxiAZy1v08_ZknGs0fhgTqqqiSB0x80qAq39RyYpYkVHinTJfMrh_eKBIhu0x-kTm3LK8ZZF0OpnIwIeCAUx_bABJVNVP3DqIMQHEZ-rK_iVRsUW0bvGo5t153s/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIphMjFFAuLwf0wfPfjl3jUrPAsVA1qdCSLIf2xxWHFwEwUcnLSmfCQBw4vID8kPq88xjeQdMUPcUsXnsGJeNRBRxiWkqK_GPEqU8SqgSfAlUlyPNR3du7D0g_ZhVeqmGjPUXnZ4qfftk/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpmWhpaoG8gADG32LCgMZ11NulwmIvAbqAM4y1XSmk_DyywRn0w5ifVlX51GKvRJ9L7hgUWNBs4ABo8UjHeP-cWMqmPnqvXbBbATEFMEv0snJxF5gSssMdiidPwqifAzvNUP7Mgapo6Dw/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3yeIbC1dGEMf5wZpVaHlyAMmxAXv0MhrG7WZ4yc1C8tIrY73DjZPlSFReHTpYjs0EgJxk9nfup3DxzJgqDP5EoFseFxUb6umJbst_BJUoacGcUJbUHhseGkaxaHuPJnzxWDOXOCAIunc/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"><ul id="nav"><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

&lt;style&gt; #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT86MBByH1fhQ717bNCF5SdjpRgxZvfeL4gGAbLxb5J8z5qroQ28L3F047N5-jC_ptKr0jP0LHIrd3AbyCrpiu88OmS7gqbNxzywK4gmwM02Zj6lYXzZBJfNqQ9A4AIsLUqCKhH153PUo/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRzUyTzoy5ebngjnMw82nqbHJ__3wpQaXmavvkSgrfuzMqk_YChLOnEIdnkSA6RPF2lA9JmzdVrcCIG5949HE3w2G7-z7go-WbFlndi8DrLnLE7PdEKAHrxfA5CnMvTXNf41pqVcv_en8/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } &lt;/style&gt; &lt;div id=&quot;tabsE&quot;&gt;&lt;ul&gt;&lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;#&quot;&gt;&lt;span&gt;Link 7&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0vbV6jcECOruyK8RPPoE4pg5eXUnQ1tMPChbEfj_xtQt1th4CAy7ImDaK3pV7waFDD0WIx6-yAwt6N2rGfVSn3Nl3rG74IBgU3mS8j_AP0XKGL8-Bgv-h-dPw5yUZ37be7EzmXDdxMNY/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK0flNllfLylw9PYs3NF25eNWXNi5ZR0CXFtgD3VRPpkqeiwBQ-weeWCK8DCbLSf_B-H5mFjO0upkM46UMQqguYIc3_HDbQ06jsuF3g4QxoziZC_odsWhgs-c6s69RmqFjj9hpF1eYu5Q/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"><ul><li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul></div>

4) Dah selesai klik save dan lihat hasilnya.