Menu/Navigasi adalah bagian blog/website yang tidak dapat dipisahkan. Keberadaannya sangat penting sebagai alat bagi pengunjung menuju ke bagian/halaman blog/website.
Pada posting kedua CSS Horizontal Menu untuk Blogger/Blogspot, saya persembahkan "Stripped Red Horizontal Menu for Blogger Blog"
1. Masuk ke dashboard > Design/Rancangan > edit HTML
2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
Kode CSS:
Kode CSS:
ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPZPtqCgQlQxRg6bFUshJKu8VWP37ljZOX7JfUB7GiI2lyh7i1aw3QrYrPJzbseqfDs6-hfHisQp-1qG-6BMQGE7Jt7Rc9ADYuN79YkKYrFS19hEJkW4Y1c9eOfMdpQMHLmEfT69wcHuE/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}
ul.menu li {display:block;float:left;margin:0;padding:0;}
ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}
ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPZPtqCgQlQxRg6bFUshJKu8VWP37ljZOX7JfUB7GiI2lyh7i1aw3QrYrPJzbseqfDs6-hfHisQp-1qG-6BMQGE7Jt7Rc9ADYuN79YkKYrFS19hEJkW4Y1c9eOfMdpQMHLmEfT69wcHuE/s1600/bg.png") repeat-x top left;text-decoration:none;}
ul.menu .current a {color:#fff;font-weight:700;}
/*Garis Merah*/
ul.menu.red{background-color:#B11718;}
ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}
3. Save template.
4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.
Kode HTML:
Kode HTML:
<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>
Contoh:
<li class="current"><a href="http://buka-rahasia.blogspot.com">Home</a></li>Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:
<li><a href="#">anchor text</a></li> sebelum </ul>
5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
6. Setelah pop up window muncul, pilih opsi HTML/Javascript
7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.7. Klik save.
8. Drag gadget/widget tersebut ke bawah/atas header.
9. Save lagi.
10. Done!
Judul: Cara Membuat Menu Horizontal CSS Stripped Red Blogger/Blogspot
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh Unknown
Terima Kasih Atas Kunjungan Anda...
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh Unknown
Terima Kasih Atas Kunjungan Anda...
Klik tombol "Like" atau "Suka" bila Anda suka dengan artikel ini. Jangan lupa poskan komentar agar saya dapat berkunjung balik ke blog Anda. Jika Anda ingin membaca artikel lain dari blog ini, maka silakan klik di sini untuk membuka daftar isi. Harap menyertakan dan mencantumkan http://ayibagus-spc.blogspot.com/2012/07/cara-membuat-menu-horizontal-css.html bila Anda menyalin dan atau meng-copy artikel ini, dengan menggunakan kode di bawah ini. Terimakasih.
Terima kasih Sudah berkunjung
Ditulis Oleh : Unknown Blogger Indonesia Tetap Kunjungi
Artikel Cara Membuat Menu Horizontal CSS Stripped Red Blogger/Blogspot ini diposting oleh Unknown Pada Hari Senin, 23 Juli 2012. Terima Kasih atas kunjungan sahabat kesini. Semoga sobat dapat berkenan untuk sedikit memberikan sekelumit komentar mengenai postingan kali ini.
ayib adam al-mahjub
|
|
0 komentar:
Posting Komentar
Harap tidak mengepostkan komentar SPAM, Setiap komentar akan dimoderasi, Sehingga mohon maaf apabila saya tidak dapat segera dan atau membalas komentar anda, Terima kasih