Melalui HTML/JavaScript :
Oke saya rasa tidak perlu panjang lebar, ayo di mulai...
Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.
Ikutilah langkah-langkah di bawah ini :
1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).
<style>/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#000000;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#ff0000; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #00ff00; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#00ff00; color:#ff0000; 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='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
</ul>
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-menu-navigasi-horizontal-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#000000;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#ff0000; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #00ff00; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#00ff00; color:#ff0000; 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='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
</ul>
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-menu-navigasi-horizontal-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>
Keterangan :
- Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
- Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
- width:100%; adalah ukuran lebar, silahkan kamu ganti dengan selera yang kamu mau.
- height:35px; adalah ukuran tinggi, silahkan kamu ganti dengan selera yang kamu mau.
- Silahkan kamu ganti # dengan URL halaman yang kamu mau. (contoh : URL label, URL postingan, atau URL yang mengarah ke situs lain).
- Silahkan kamu ganti ? dengan nama menu yang kamu mau.
Catatan :
- Letakkan Cara Membuat Menu Navigasi "Horizontal" Di Blog ini di tempat yang sesuai : biasanya paling atas di "Tata Letak" blog kamu.
5. Simpan Pengaturan.
Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.
█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno
Ditulis Oleh : Tutorial Blog Eno » Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.
Saat ini kamu sedang membaca artikel tentang Cara Membuat Menu Navigasi "Horizontal" Di Blog. silahkan kamu Copy-Paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link di bawah ini sebagai sumbernya. INGAT : saling menghargai kreatifitas sesama sobat blogger oke.
Tidak ada komentar:
Posting Komentar
███████████████ Peraturan Berkomentar Di Blog Ini :
» Berkomentarlah dengan baik dan sopan.
» Dilarang spam, SARA, pornografi, junk, dan sebagainya.
» Jangan membuat keributan/kekacauan.
» Jangan mencantumkan LIVE LINK di komentar ini.
» Kalau kamu ingin copy-paste dari blog ini ke blog kamu (harap cantumkan LINK SUMBERNYA).
» Jika kamu melanggar salah satu peraturan tersebut, maka komentar kamu akan saya hapus dari blog ini.
███████████████ Terima kasih atas pengertian, kunjungan dan pesannya.
» Pengunjung yang baik itu adalah yang meninggalkan komentar, walaupun itu hanya ucapan "Terima Kasih".