Cara Membuat Tab Menu Blog

Assalamualaikum Teman..

kali ini saya akan berbagi mengenai cara membuat tab menu pada blog. Sebagai contoh, teman bisa melihat pada bagian atas blog saya tepatnya dibawah gambar header. Untuk membuat menu berjajar secara horizontal seperti demikian teman - teman cukup membuat widget baru dan mengcopy paste kode HTML yang tertera dibawah.

seperti biasa, caranya cukup mudah :)

• Pertama masuklah ke dashboard lalu klik design
• Pada menu page elements klik add a gadget
• Pilih HTML/Javascript
• Masukkan kode HTML berikut ini pada content

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#000;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
</ul>
</div>

• Silakan ganti karatker berwarna merah tersebut dengan kode warna yang teman inginkan. pada contoh saya menggunakan #000 yang merupakan kode warna hitam.
• Ganti karakter # dengan alamat yang teman inginkan serta edit nama Menu 1, Menu 2, dst sesuai dengan kebutuhan .
• Jika teman ingin menambah menu baru cukup dengan menggandakan kode <li><a href='#'>Menu </a></li> dan letakkan diatas </ul> .
• Klik save..
• Untuk menempatkannya posisinya diatas teman cukup menggeser widget ini tepat dibawah header atau dapat disesuaikan posisinya sesuai selera.

Bagaimana ? Mudah bukan ? :)
Apakah teman berhasil menerapkannya?

Regards,

Irfan

Berlangganan Artikel Referensi Kita

Tweet

Masukkan alamat email Anda:

Related Post:

Tutorial

• Membuat Page Title Blog Menjadi Lebih SEO Friendly
• Cara Memasang Meta Keyword dan Deskripsi Blog
• Cara Membuat Chat Box Melayang Buka Tutup
• Cara Membuat Recent Post dengan Thumbnail
• Cara Membuat Auto Readmore
• Auto New Tab : Membuat Semua Link Otomatis Dibuka pada Tab Baru
• Cara Menghilangkan Tulisan Subscribe to: Post Comments (Atom) Pada Blog
• Cara Membuat Widget Daftar Isi pada Blog
• Cara Membuat Tombol Like Facebook Dibawah / Diatas Post
• Cara Membuat Spoiler pada Widget
• Cara Membuat Widget Recent Comments
• Cara Membuat Widget Top Commentators
• Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
• Cara Membuat Popular Posts Pada Blog
• Cara Membuat Recent Post Pada Blog
• Cara Menuliskan Kode HTML Pada Postingan Blog
• Cara Membuat Scroll Pada Widget

blog

• Cara Mengetahui Blog ID Kita
• Aplikasi Mobile yang Sebaiknya Dimiliki Seorang Blogger
• Apa Itu Google Author Rank dan Bagaimana Cara Kerjanya ?
• Membuat Text Area yang Kreatif
• Cara Membuat Footer Blog Menjadi 3 Kolom
• Sekarang Anda Bisa Mention Nama Pengguna Dalam Post Dengan Google+
• Menu Navigasi Ajax Keren
• Model Bisnis Online yang Potensial
• Cara mengetahui kode HTML dari warna
• Cara Menambahkan Meta Description Pada Blog Dengan Menggunakan Setting/Pengaturan Blogger
• Menambahkan Emoticon/Smile Pada Posting Blog
• Page Rank Pertama
• Cara Mengatur Jumlah Post yang Ditampilkan Setiap Halaman Label
• 15 Alternatif Pengganti Google AdSense
• Cara Membuat Custom Permalink Pada Post Blog
• Cara Membuat Header Blog Berisikan Link
• 6 Cara Membuat Template Blog Menjadi SEO Friendly
• Mengganti Tag Heading Judul Blog Agar Menjadi Lebih SEO Friendly
• Cara Membuat Related Post Dengan Scroll
• Menambahkan Rel Canocial pada Blog
• Facebook Recommendations Bar Official Untuk Blogger
• Cara Memasang Kotak Follower Box Twitter Pada Blog
• Membuat Page Title Blog Menjadi Lebih SEO Friendly
• Cara Memasang Meta Keyword dan Deskripsi Blog
• Tampilan Baru

widget

• Cara Membuat Footer Blog Menjadi 3 Kolom
• Menu Navigasi Ajax Keren
• Cara Membuat Related Post Dengan Scroll
• Facebook Recommendations Bar Official Untuk Blogger
• Cara Memasang Kotak Follower Box Twitter Pada Blog
• Cara Membuat Breadcrumb Pada Blog
• Cara Membuat Chat Box Melayang Buka Tutup
• Cara Membuat Recent Post dengan Thumbnail
• Cara Membuat Auto Readmore
• Auto New Tab : Membuat Semua Link Otomatis Dibuka pada Tab Baru
• Cara Menghilangkan Tulisan Subscribe to: Post Comments (Atom) Pada Blog
• Cara Membuat Widget Daftar Isi pada Blog
• Cara Membuat Tombol Like Facebook Dibawah / Diatas Post
• Cara Membuat Spoiler pada Widget
• Cara Membuat Widget Recent Comments
• Cara Membuat Widget Top Commentators
• Cara Membuat Tab View Menu (Widget Multi Kolom) Pada Blog
• Cara Membuat Popular Posts Pada Blog
• Cara Membuat Recent Post Pada Blog
• Cara Membuat Scroll Pada Widget