Cara Membuat Menu Horizontal CSS Simple Black di Blog - Selamat pagi sobat blogger semua !!! Bertemu lagi nih denganku. Setelah dulu fahrurrozi18 sempat membagikan artikel tentang Cara Membuat menu drop down diatas atau dibawah header, Kali ini, fahrurrozi18 akan berbagi tips mengenai Cara Membuat Menu Horizontal CSS Simple Black di Blog. Untuk lebih jelasnya, silahkan sobat lihat dahulu screenshot dibawah ini:
Gimana sob? Simple bukan menu nya? Jika sobat tertarik untuk memasangnya, silahkan sobat ikuti Tutorial dibawah ini.
Cara Membuat Menu Horizontal CSS Simple Black di Blog :
- Login ke akun blogger.com sobat.
- Pada Dashboard, sobat klik Template => edit HTML.
- Kemudian sobat Cari kode ]]></b:skin> lalu sobat letakkan kode di bawah ini tepat diatas kode ]]></b:skin> tadi :
ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqnjHQYlvJJQQn5FB3Xm7F-RCwt5pqmCv7DHCD5t0JPhDohAjruvtM5ZuKBFDnSIbtOeUAwwWWVzoKnFXQlY0IKZbEbjCvNBilTrqpyzmOtpJUAaFzMb8tSmmsf4ZJ6IRfioYHgs0L78w/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}ul#menu li {display: block;float: left;margin: 0 0 0 5px;}ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}ul#menu li a.current {color: #FFF;background: #FFF url("http://2.bp.blogspot.coahm/-t9vkEKC1ATA/TcuW-EFUaoI/AAAAAAAAAdg/zg6gbrI9u9A/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;
- Kalau sudah, sobat klik Simpan template.
- Selanjutnya, sobat pergi ke Menu Tata letak => Tambah gadget / add gadget => Pilih HTML/javascript.
- Lalu, sobat copy paste kode dibawah ini :
<ul id="menu"><li><a class="current" href="#">Home</a></li><li><a href="#">Daftar Isi</a></li><li><a href="#">Contact Me</a></li><li><a href="#">Advertise</a></li><li><a href="#">Other</a></li></ul>
Keterangan : Silahkan Sobat ganti tulisan yang berwarna Hijau diatas dengan Kata-kata sobat sendiri. dan sobat ganti juga kode # diatas yang berwarna Merah dengan Url blog sobat.
Penempatan Posisi :
Silahkan sobat Atur dan geser Menu diatas, dan letakkan diatas / di bawah
header blog sobat ( Tergantung minat sobat sendiri ).
- Kalau sudah, sobat klik simpan.
Demikian tips dariku kali ini tentang Cara Membuat Menu Horizontal CSS Simple Black di Blog, semoga tips ini bermanfaat. :)
Ditulis Oleh : Unknown ~ Tips and Trick, Download, Widget and Gadget, and Other Article
Sobat sedang membaca artikel tentang Cara Membuat Menu Horizontal CSS Simple Black di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terima kasih.
0 komentar "Cara Membuat Menu Horizontal CSS Simple Black di Blog", Baca atau Masukkan Komentar
Posting Komentar
Harus diingat ! :
1. Dilarang berkomentar dengan Kata-kata Kasar/Kotor.
2. Dilarang berkomentar SPAM dan Memasang Link Aktif.
3. Komentar dengan Link Aktif akan dihapus sesegera mungkin.
4. Berkomentarlah sesuai Topik/Artikel.
5. Berkomentarlah dengan Sopan.
6. Sobat diperbolehkan Copy-Paste artikel namun jangan lupa untuk menyertakan link sumbernya.
Tulislah Setiap kata dengan penuh makna Kesopanan.
Salam dari saya FahrurRozi18.