Membuat Menu Horizontal

Dah, langsung aja yaaa...cara bikinnya seperti biasa teman2 login ke blogger dulu, lalu klik tuh Tata Letak lalu Edit HTML

Selanjutnya letakkan kode berikut ini tepat di atas kode tag ]]></b:skin>

.horizontal-menu{width:100%; overflow:hidden; border-bottom:1px solid #000000;}
.horizontal-menu ul{margin:0; padding:0; padding-left:0px; font:11px Arial; list-style-type:none}
.horizontal-menu li{display:inline; margin:0}
.horizontal-menu li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#999999;}
.horizontal-menu li a:hover{color:#FFFFFF; background:#FF9900}

Sudah itu klik simpan template

Bagian Utama yang bisa teman2 ubah adlh sbg berikut:

-------------------------------------
Biru: Itu adalah ketebalan garis pinggir di bawah menu, bagi teman2 yg tdk menginginkannya silahkan 1px diubah menjadi 0px

Pucat: itu adalah warna tampilan menu, contoh:. Silahkan cari kode warna di sini

Orange: Adalah Warna background ketika disorot, ketika tman2 menyorot menu horizon pada blog ini pasti warnanya seperti ini:. Silahkan cari kode warna di sini
-------------------------------------


Selanjutnya yang harus teman2 lakukan yaitu menaruh kode HTML menu horizontal pada elemen add gadged bagian header (bagian atas blog)

Bagi teman2 yang ternyata template-nya gak ada elemen add gadget pada bagian headernya, maka bisa ditambah dengan menggunakan trik yang berada di postingan "cara menambah add elemen pada bagian header", pilih add elemen di bawah header, bukan yang di atas header. Kalau sudah menerapkan trik tersebut, maka langkah selanjutnya (pastikan anda sekarang berada pada halaman tata letak/layout) adalah klik add gadget/tambah gadget, pilih gadget HTML JavaScript, dan isikan kode HTML berikut di dalamnya

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="horizontal-menu">
<li>

<a href="http://black-links.blogspot.com/">HOME</a>

<a href="http://black-links.blogspot.com//2009/11/bagaimana-kalau-seorang-seniman-lagi.html">DAFTAR ISI</a>

<a href="http://black-links.blogspot.com/2009/11/english-post.html">ENGLISH</a>

<a href="http://black-links.blogspot.com/2009/12/arabic-blogger-tutorial.html">
العربية</a>

<a href="http://black-links.blogspot.com/2009/12/sekilas-info.html">SEKILAS INFO</a>

<a href="http://black-links.blogspot.com/2009/11/link-to-this-blog.html">LINK AND BANNER</a>

<a href="http://feeds.feedburner.com/%7Er/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan/%7E6/2" target="_blank">FEED</a>

</li>
</div>
</div>

Klik Simpan


Yang perlu teman2 ubah adalah pada bagian2 yang telah saya tandai denagn warna biru itu adalah link/URL menu serta bagian yang di-bold/ditebalkan yaitu keterangan dari link/URL tersebut, ex: http://black-links.blogspot.com ===>> HOME

Subscribe

Monitor continues to update the latest from This blog directly in your email!