Cerita Film Anime Btooom!

Btooom!....

kali ini membahas sedikit tentang seri anime BTOOOM! yang cukup banyak diminati yah walaupun Ending'y sedikit gantung, hehehe

solnya ending'y berakhir gini >

hemm,...ane rasa mungkin bakalan ada season ke 2 nya solnya mangga'y sendiri masing bloem tamat sob,

yang pertama kita bahas yaitu tentang apa si BTOOOM itu ?

okhe2 langsung ajah ya  sbener'y BTOOOM ini adalah film anime buatan jepang yang diambil dari mangga BTOOOM! itu sendiri. BTOOOM!  ini menceritakan tentang suatu permainan atau Games Tempur Online yang pada permainan'y menggunakan Bom atau yang sering disebut "BIM" iya memang sedikit berbeda dari game2 Online lainya yang biasa menggunakan Pistol And Pedang bro,..!

pada saat itu Game's BTOOOM  ini sangat diminati di jepang hampir lebih dari 3 Juta Copy terjual habis.

dalam permaianan ini peraturan'y sangat sederhana kalian cukup mengumpulkan 8 Chips berwarna Hijau yang dimiliki di setiap tangan kiri lawan , and selain itu Chips ini sendiri memiliki fungsi sob, yaitu sebagai Radar untuk melacak lokasih musih mu, Chips ini hanya bisah di ambil jika detak jantung pemain itu berhenti alias (MATI) so, kalian harus membunuh pemain lain untuk dapat mendapatkan chips ini.nah ini nie gambar untuk Chips'y...

fungsi  >> Radar

dan ini adalah jenis-jenis BOM yang di gunakan 

masing-masing peserta hanya dapat menggunakan 1 jenis Bom, namun untuk dapat menggunakan bom milik lawan kalian harus membunuh lawan itu terlebih dahulu, karna jika tidak maka BOM itu tidak akan berfungsi 

Udah cukup pembhasan tentang Gams'y sekarang kita kembali ke Film'y !jadi ngelantur heheheeh,..

nah di Episode 1 film anime BTOOOM! cerita'y berpusat pada Sakamoto Ryouta seorang pemuda NEET  

( Not In Education, Employment, Or Training ) yang berumur 22 thn.ia adalah salah satu pemain terbaik Dunia dunia Virtual BTOOOM. 

suatu hari, ia terbangun di sebuah pulau teropis. tanpa mengingat bagaimana ia bisa sampai ke sana. dia melihat sosok dari kejauhan dan ingin meminta bantuan, namun laki-laki itu menjawab dengan melemparkan sesuatu kearahnya, subuah BOM atau " BIM " nah di sa'at itulah sob ia sadar kalau dirinya sedang berada di dunia BTOOOM !. oh ya btw ternyata lokasi permainan nyata BTOOOM ini berada di INDONESIA ya,

pulau komodo mungkin, solnya di film'y banyak sekali Komodo hehehe,..

Para pemain :

1. Sakamoto Ryouta. 

Profil singkat :

Sakamoto Ryouta ( jenis Bom waktu )adalah pemuda NEET yang berusia 22 tahun, ia adalah pemuda yang sangat terkenal di dunia virtual BTOOOM!,karna ia adalah salah satu pemain Jepang yang dapat mendu2ki peringkat 10 besar Dunia hanya dengan 3 x permainan.yah, bisa dikatakan ia adalah satu2'y pemain terbaik di jepang Dalam Hal game's BTOOOM! ini, tapi pada kenyataan'y ia hanyalah  melarikan diri dari kehidupan nyatanya. dan alasan kenapa ia di kirim ke dunia nyata BTOOOM ini sebenarnya terbilang cukup menyedihkan di bandingkan peserta yang lain , karna Orang yang mengirimya ternyata Adalah ibu'y sendiri, menyedihkan kaen sob, pada awalnya ia tidak percaya namun setelah mendengar perkataan Himiko yang juga dikirim ke pulau tersebut, perlahan-lahan ia mulai percaya, dalam kehidupan nyata Sakamoto terkenal dengan sifat Anti sosial bayangkan saja ia hanya menghabiskan waktunya selama 2 tahun hanya untuk bermain game's. parah kaen sob, nah salah satu pembelajaran juga kaen,..hehehe

pasaat kecil ayah Ryouta sangat terobsesi dengan perkerjaan'y jadi jarang memperhatikan Ryouta, bahkan tidak perna sama sekali, dan beberapa tahun kemudian ibu dan ayahnya bercerai, sampai suatu ketika ibunya memperkenalkan ia dengan Ayah yang baru , pasaat itulah ia mulai menjadi anak yang egois,..

dan sangat menentang orang tuanya, ia merasa kalau orang tuanya hanya mementingkan diri mereka sendiri tanpa memperdulikan ia,.huhuhuh :( 

>>> Jenis Bom Waktu

2. Himiko 

Himiko ( jenis BOM peledak ) seorang siswi Sma yang berambut pirang bermata biru dan memiliki body yang indah dan karna itulah ia cukup populer, ia merupakan salah satu pemain BTOOOM! tetapi tidak sejago Sakamoto ryouta, ia memainkan games ini karna ia merasa bosan dengan kehidupan nyatanya, dan suatu ketika ia bertemu dengan Sakamoto Ryouta ( sebatas dunia Online ) dan itulah yang menambah rasa ketertariknya untuk memainkan games itu, ia merasa memiliki ikatan batin dengan Sakamoto ryouta, dan tidak hanya itu bahkan mereka sudah menika, ckckckc,... yah walaupun hanya sebatas di dunia Online/ Virtual , tapi ia tidak ingin bertemu dengan Sakamoto dalam kehidupan nyata, ia pernah berkata " Aku lebih menyukaimu di dalam du nia Virtual ini ". namun akhirnya mereka ber 2 bertemu juga dlam kedupan nyata , walaupun pada awalnya masih belum sadar tapi ikatan batin antara mereka berdua cukup kuat Mungkin sudah takdir, bahkan Sakamoto  relah datang untung menyelamatkan Himiko tanpa senjata 1 pun, 

nah ia dikirim oleh teman baiknya  sendiri  " Miho "ke pulau tersebut,karna di tuduh berpenghianat.

>>>jenis BOM tipe Peledak

Bersambung,....

kalau mau Copas tolong sertakan sumber'y yah ^^

makasih

Read More →

Cara Membuat Related Post LinkWithin

Cara Membuat Related Post LinkWithin (Thumbnails) dan Trik Lengkapnya

Cara Mendapatkan Widget

1. Go to LinkWithin.

2. Setelah masuk halamannya, lihat ke bagian kanan bawah dimana disitu terdapat kolom isian untuk mendapatkan widgetnya.

3. Masukkan valid email.

4. Isikan url blog/website.

5. Pilih Platform blog anda (ini digunakan untuk memasukkan secara otomatis melalui dashboard/admin page blog).

6. Pilih jumlah link/stories yang ingin anda tampilkan, sesuaikan dengan lebar post body di blog.(pilih melalui dropdown menu di kolom Width)

7. Centang "My blog has light text on a dark background" jika latar tampilan blog anda berwarna gelap.

8. Klik 'GetWidget!'.

9. Anda akan masuk ke halaman selanjutnya dan dibimbing untuk melakukan langkah-langkah sesuai dengan platform blog.

10. Setelah masuk ke halaman widget editor/page element di dashboard, tarik widget ke bawah post body jika ingin ditampilkan di bawah post body, save dan check hasilnya.

Contoh tampilannya seperti ini:

 Kostumisasi Widget

a. Kata-kata "you might also like:" mungkin kurang keren menurut anda, so anda bisa menggantinya dengan cara:

1. Masuk ke Edit HTML di dahboard anda

2. Cari tag <head> (Ctrl+F)

3. Kemudian masukkan script berikut di bawahnya:

<script>linkwithin_text='TEKS DISINI:'</script>

4. Ganti TEKS DISINI dengan teks yang anda inginkan dan save template.

b. Jika ingin menempatkan widget LinkWithin di posisi tertentu di bawah post body, karena mungkin disana ada banyak widget lain seperti Adsense, letakkan kode berikut di atas atau dibawah widget yang lain di bagian post body (cari widget-widget di bagian post body).

<div class="linkwithin_div"></div>

Lalu save.

c. Ketika berada di halaman utama (frontpage) atau halaman-halaman yang memuat query posts, widget ini akan muncul di bawah setiap post. Hal ini tentu saja tampak tidak elegan dan membutuhkan waktu loading yang lebih lama. So, jika anda ingin widget ini hanya muncul di bagian posting saja (menyembunyikannya dari halaman muka), lakukan langkah berikut:

1. Jika anda sudah terlajur memiliki widget LinkWithin yang terpasang, silakan di remove/delete terlebih dahulu.

2. Lakukan kembali langkah untuk mendapatkan widget LinkWithin diatas. Khusus pada menu Platform pilih 'Other'. Klik 'Get Widget!'

3. Anda akan menuju ke halaman selanjutnya, lalu copy script yang telah terbuat dan simpan script tersebut.

4. Kemudian masuk ke edit HTML template anda, dan ikuti langkah sederhana cara menampilkan widget hanya di post body.

5. Save dan lihat hasilnya.

Read More →

Cara Pasang Menu Navigasi

Cara Pasang Menu Navigasi pada Blogger

Setelah Anda menentukan pilihan menu navigasi yang paling disukai, ikuti langkah berikut :

1.  Masuk Blogger  >> Pilih Tata Letak

2. Klik Add a Gadget or  Add a Page Element

3. Pilih HTML/Javascript Widget

4. Paste Semua Kode Menu Navigasi Tersebut Dalam HTML/JavaScript Widget.

5. Kemudian Klik Save

6. Lalu drag atau geser HTML/JavaScript Widget tersebut dan letakantepat header atau judul blog

tampilan Tata Letak New Blogger

Anda bisa mengubah link-link menu navigasi nantinya sesuai keperluan, dengan cara mengubah / edit bagian kode HTML dibawah ini :

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

Ganti tanda "#" dengan Link Halaman / URL halaman dan ganti juga Page 1, Page 2, Page 3, dst. dengan nama atau judul halaman Anda.

Jika Anda ingin menambah atau mengurangi menu tab, maka dengan mudah bisa ditambah atau di-delet / hapus line html tersebut :

<li><a href="#" ><span>Page n</span></a></li>

Menu Navigasi Horizontal # 01

Black Orange ( no image )

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 02
Purple White ( no image )

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 03
Boxed ( no image )

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 04
Light Grey ( no image )

<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

 Menu Navigasi Horizontal # 05
Bulleted Top Navigation

<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/AVvXsEjOn6Lob0Q85KRndBVqPyY4ximx8XN7y-z8rfUqh8hJPWNt5-ERzHMaP4vzTx5n5UcembSL0KcOZnQZha7bdF1HTntkoQ8BL9qmxN9czoySSkPeaLOroEXEDRxWYDCTQ5T0ajo2Tr96iT8/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

 Menu Navigasi Horizontal # 06
Orange Blue 

<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/AVvXsEjQWI18q8tm45C6GFN-et1nK9YAFqf3VDGSYtwfJNHefpH5QtG_uC2y6Rz3p2Kiec7wOsizxOHJUVCv8mKNG2TOC4TuaFtpiEIx_3aJtEljEBS5meOfG6q2rOINbJ0hAO0iNuyYNaO_QgQ/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/AVvXsEj-FUTacuWlVfJlaNIf4ktXUyA3x8TfPwpoQvNC6X2zsg5hAWfpNBiNfqGwKSVhB7lFIlm8qFd6aqsDCjxx_2u3NJdbgcx9L2ix__TXbi-KhGqPCMx1bi3xJ7_37DUUVhF66dPpSffKOII/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 href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 07
Grey Blue

<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwzMacUoJx1oExUv-WrwNflCwlvT4KOup-8Yijv13HP4S65Sq4qZR61LJO5mVGyZ4ZqcrI5B3Qe5RQCwTbtqNxalS19gL6gPb3PwlQ2pFBQlvO_tjvWVXpnsMzyfGx4R6eoH6Dc8QzC90/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUiCTSxoaRcHYr1cWVNtGgFzY_WlPbZtRutTlymoRe5hJkthwjEO3Htpj-Snjm3WtO0ojIF0yYwvSooacr-_ohb4RlXG5dZ8z6Q-P8pEjzjjA7f28IKKhdls_pLY-sM42RmBGukJ00L_U/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 08
Rounded 

<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/AVvXsEguAAvVrLV0ojG7rWx0nKjpS_aH8KuPsu-I0Ln2F0zf6i3WWLKfAvISwllNSm9Uz3hDrtoORTPm7hKCEEtC-k3wozn8MOYF7d5wGXJH79pJDyy4GJ_b_GsiKRPAPKv_Cd3kYnSwciJpSVc/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/AVvXsEi6Q76Cz_76F_qdfEDb3uw9l8Q2xrbdHw5LfRYJPGnlp_gGpQ2f9xJrq1pd0BfzZpRN65It6_j-QFl8YoI9U7JJ9-sPryRlVgNHyaFKfi472hPHunpnkhsJxhpL4RFphdVEPDJm9eUxW50/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 href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 09
ZDnet Emulation ( no image )

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 10
Red Boxed 

<style> #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/AVvXsEj4EktUibY-0xhmGgTO2MjXCykTdNiPdwoglrSILeawVzlvpzCJspzrpKoVurwdGKzsFa-3Urq5j3yI2Lv78f-LtLzn4jhEE3GWZUOK4BkzjqCYycPkPbPnN6-Ejw0c3eAW3PjANW1A2ZA/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/AVvXsEgAJJ4f2P0bs3UIvcJzScallvE7W-QRPXbwVLI0nS0AsDiS0zMh1PfnuOPWc_rlcrnxTjbKB1SLXX5CdxqmUKbvssddwitGovPzwRLwhsUXApfRIypmlUAu681f9mF0BzCYvQAAkOtjPrY/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; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Berikut Koleksi Menu Navigasi Horizontal Keren Bag. II dari # 11 sampai # 20 untuk Anda :

Menu Navigasi Horizontal # 11

<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/AVvXsEjQ7AhXr8il46A0E0fO3rBzfBtcWRRa6BrJXFKKhbEJQU4PFX-n7GNQDYiVdd8Bku7-wzyTEDnKb1XKDrXYHT3fp4PgLHqPqdVJ7mmpkKmsp-Qf1Ly6k_P-i5ML4HaEo4DMacIR9pUcLm8/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/AVvXsEigN8CjKfKllKVhf46vGLZtk_sP7fzapsE0u-83RzuIC16X1jFljj09iZX6PkwdMkp0q0Clffbq0GMZGhrtRD2dcjUvquh2my5RAKo3RADtwm5KzEHlzv7j0JZGT9H7V930FPV-ghRhg6k/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 href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 12

<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUa4WzZeXLomLu1K3GykZCptKX62rDKqB9cAVVL45f5CWmUReHnFbkCcyVllFSSO3hPUZymIVT98ZCcNRLyxPaiqELYeGQ277Pyi6KPwlBxWUOeBR_D4KXgjvO5CHfNHVoCkXAb0Seg5g/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiUeG-X0YVxC-rj9-5JtEEJrvfiJ5FtIaM5lc2KtDRA0_rjb_gKXqgZEtr7DX_kJX5FBTMr5RhoG_I6MKmvBFLoQlmG9VdsjfF-Xskt5h8q-28LsAnodXeO4QlAmEjAtsMJquNa_neJ8w/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 13

<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdESE9N3oQ1c7Vcf8kWAhc0QCwKS96jz1QKY6b1va7F7kmgu-IouPZWcylBr_f29Hqeqf7BG7Jd3ob6bgOQ5-Qw6MiJYZ3-xULxWYPbM9ZHIf2e4K58BsiojHnu6R9FWSzz-0zURiiikg/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Y2yABvJT5gVaLIzU-dm0Ql1-Dq4Ssl5fWhiyZO4W0QIKnhNmrmXoCtGiJXdnIkJu92EoL5fE6fJj9A-vr69BnPhAnhv2npxeq2l42LNzA3d3T1Sj-TQry7HTEgtUSvf78RCInFWq6Hg/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 14

<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiROPd7V_6dkXx-2zbmAk-ktVc-MjouYpjv8wmzsew7857Jg084ikXOCwTrLWuQxb0ZaFcTrBkHCzPNbh9PHCbFEWwv_8dAwdG9WWpEf9sZ9HLrAxjJqbyjnJ9kowP-cCG3gURkN4xkbCU/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikTLCyklqgZyR6P_zMijFL6qvVAzvSDaBJj-fBsbhFXOS6aT3AWsj9fo_cQEWY7jNmX5L47scA4jUhqYTOygii9QqLPFASBcw36Dbqv9rbj6JMFX931-y4GnFVJ932ltiCRDEMSyuU8AQ/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 15

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

Menu Navigasi Horizontal # 16

<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/AVvXsEgj7IwpW0wRsQbY0oytkpNqfzYZmTkK2ozc8l5_a3XLh1V8_z0f5s7_IAudJTQLaU6AbU4pDUiB016S_yQgzSWirqKIZlqKxPGgzkb2xzXYVs-tFh_4CTCflvnaX9PtyMUmPREkX9fgfIA/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/AVvXsEhhBu_ZiCfctqBZBUGusFTqvnHWfZ7T_Jlkx_Hjgd5L8c0yvijaUFuOu5mh4qPxjqTj9Bz8vqROZEsTgKfthktwRrj9s_RQ9o1HR1AKML_F2XFuhxERpX2O8PqjK2cBox0GQmi2eaXe0vQ/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 href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 17

<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLMCWZLft_q0Psl6lgYktxlR61PUOW_HvYyIq5gf9UGx-cn6Ud-qZrE9hb__We5Ez2_YBQzkk7sIJanHt2dCcaiWYQN98aNH2H1pmG0n3SynQfF9KMCRJWM1Oomu6lcJ1a319iln_OH6A/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4FpRyEbPlcVrllpQvvqWWE5DO5IHalnCAqlzxXuY-5ACjUOtPiW94Uvr8GH4hlhyh3Yg-CYAijYTS3YKSfkDERWL3FEF6NDvcbpKVj7Y_4S7nL0Ieje3Ml8cu2PiUfsmoFvRY8bJkfZo/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 18

<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY68yF6n1dXWksgr5mZAYPUWQM7c4nZVT2bc2eKX60z-VzuNWcpnMmMhmPaCKiPYxh_AdU0dHw_z8T3q0HJ59CEQdbKl9z1QCKCaRTdVUFfd2zPqJwSZClXYgmGcTJXYlRF3fg1nGJIrY/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPfdUdJtqm7Ggv-8vzSHOptLDuFEYnuyT6KOAih2r0XJNXMjllXactxk0HxipGlLAB4G2sca0FfZm-bIBmw_aFK69_vXvS0t4exEPxiR5QNisuq0pPC_m1IIawaGs8BA5rpLIyFJAKKk/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 19

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

Menu Navigasi Horizontal # 20

<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/AVvXsEj36liSR-0dwXX9gO-7VmHVFx6DbhLX7w8RGepwgBn40onmi05tBNMlieOUQPxU0hNSGfCjuU4R20Jox6Kuw2Zk6XwsFmKsGbZDjvH-oD_a8XNMRtXLq5Y-MsQO3oWXuPXb9-grdWdZU_U/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/AVvXsEi-4ULn7UWSKFNe68G7QrT5o6PJlflwUkhWj0l3YJxQepGJ7MoE8AH30TDci-9L2N1Auv_nUFebB7_k2F5OhMy8DaEpphTHZXNmWLTIn-0O5rV0-zXoP3s7nO0zbvUXRLARzNx4r6ilxb8/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 href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Koleksi Menu Navigasi Horizontal Keren Bag. III # 21- # 30

Menu Navigasi Horizontal # 21

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

Menu Navigasi Horizontal # 22

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

Menu Navigasi Horizontal # 23

<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 24

<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 href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 25

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8S0KBmsk_TzIFitSKykkZ58jhldc8PaO72VUN_q1zJsxCRkFRM6lxTR986NYmuZisF0pr-FD0aoDSXRNN9yFMjdbbbNH_FajoZLqCAYb-_-c0N5jItrBITt_lvRg5hq2Mn99ZXp2zk8Q/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-QZJagjgAT2h3wiP8IhDdlrzpSFT7-ynNZTk29PujtTmDC6w7Wis-py5M6d_PSYQD3LU8MCy2rfFXviVtssxVHSHh1w-sr6aiKk8lscCa5V7RWvE8KFo0ltjusv3x334h1hqatTY_a68/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 26

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

Menu Navigasi Horizontal # 27

<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-TNhCBYlCo15Haty5JB_hyphenhyphenFVTy5C2R1rZAoaHsK9PsEil3e7i4zM94CEqFaYJKy2an3egxrkSHotf-uYCN_9RLF1Empm4rO374f5I-X7PCvL7gPPZhRsw7hgbWI46solu5FQHxCjWwI/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Q_WIL7sSjNZdBtvTl-eVlswq2V_Et9NSgK0r4ievy-EVFB5TBPq-16mO4elbSd8cP8Nm_7p-nBpUcQaf-nAu1BDINe45vhkoc1HsD6SdwDu0NS6JdEyy7fDoAgsitQtpty-7DgMnttI/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 28

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxisETOeMehOtRFsFb0fNt30QsWQs1U8ge6hIl8XASsbLVN1aZExFackdzbJlfpLNZPJfPyXx79KKM862RNMEgSLmVlHsthtMGGK0gKn63BOIUtdvyZb2fzhJFW4S5JzOTXwcUJXcJkg/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH12zcS-zNRwBy9nSzCHR-7Bn8J72uocOPPdeJU8v_O3aEslJQELRIMT0rleX77ybMGt-0K6ltvo6Y_VY9v_xWKTnvVZku0M-rfD1FY0cIPVzfbug3uKQVdx4Xxu4bnVy01y9F1fB_-14/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 29

<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYz7-QtON-KuaeAhYxb_vLclHPORkr5bLrhBo4QHKyVCp9R3xbz-9J5Vmvj6TxiVJvkaoJkTGo-U0PQChK64quyzxdO9o8X7lqK-xhqkJYmqrJYpE5ec9ekzBY0AT7-LNjPSURZlMOAfo/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifO0JfBMhRuavnL6fMwscnh4Ua2WaSQbld-4k9g6jVtiMJytGAgcFWwtYOMGd-NitlYveP92G6iscvjc2VezAsM42ipHZWtPx-x8n94AIwEg3KLXsFy6-gCisWquOsd07TdJNQr7OY7mA/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 30

<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/AVvXsEhxFH_VJyhNX0ot1VJ1Gz-C_KrhcmyGqVm9zQ-Sk-IpzONk1uFh_eYKeMvPP2tg02s3t-J8B6Zj7E52b2Pm4nToCZx1t6bq_7GPkqDeHOzBkPd_yIqRCGaAzGtj-7uQ2-CVDWQ2t1C-nqw/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/AVvXsEjLz1s2IyFRPRIvUPdv4OGxgkHgEKe_AtVeGDi8qxPE_fOSbUrebZrROuTwkoWFnCepPT_2exHm-Z05Jr6hMWsQ1PHRzJgl5Qh7RCsH1FGJV3MwGSPcdpg15AsN_wUOJHOYMZfI-p83mlY/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 href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Itulah seri Koleksi Menu Navigasi Horizontal Keren Bag I, Bag II, Bag III yang saya kumpulkan dan sedikit memodifikasi kode CSS, agar bisa digunakan atau Anda pilih salah satunya untuk dipasang pada blog sobat di Blogger.

Read More →