Membuat Menu Navigasi Hitam Biru Untuk Blog

Membuat Menu Navigasi Hitam Biru Untuk Blog | Ghiyats Blogs - Hai, Pada artikel yang saya akan bagikan saya akan berbagi sebuah Menu Navigasi Terbaru untuk sobat, Menu Navigasi mengunakan latar berwarna hitam dan kalau kursor bergerak ke salah satu menu akan berubah menjadi warna biru.

Pastinya sobat sudah tau apa itu kegunaan menu navigasi untuk blog adalah untuk membantu pengunjung untuk mejelajahi blog kita, Langsung kita akan coba belajar membuatnya seperti ini

1. Login ke Blogger.com, dengan akun anda
2. Klik ''Template'' di Dasbor blogger
3. Terus, Cari kode ]]></b:skin Setelah ketemu Paste kode dibawah ini sebelum kode yang tadi

/* The CSS Code */

#navigation1 { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgljpqonpEKmkDBxJU1oax-l549BOiauzQKkBxHD5zZ4KFRVxlvLYg2l32ZhMUDu5DdyJuZOZWZhZT8khJfjC50NM0P2Is7qgCZT4kiKFQwxfaGzuT50hctE5omLXGKMJYpNb6OkzaHWys/s1600/nav-bg.gif) repeat-x 0 0;

border:inherit 2px #000000;

-moz-border-radius-topleft: 10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;

border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }

#navigation1 ul { list-style: none outside; padding: 8px 0 0 8px; }

#navigation1 li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }

#navigation1 li.last { margin-right: 0; }

#navigation1 li a,

#navigation1 li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }

#navigation1 li a span { padding-left: 0; padding-right: 10px;  background-position: right 0; }

#navigation1 ul.sf-menu li a:hover,

#navigation1 ul.sf-menu li a:hover span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRSNT-nGSTt0yI7fNXF4J7oqNyiCxmGCO7MjA4Js9IMr9moQDO8F0QT5xGaeofOrz5kTScDUazzqrfNNljCo36br48HsjH5Td-OpaXzwIAXkDCMo60mjieWw8F8VDXzHc5-iWk0m3d4-4/s1600/bt_nav_hover.png); text-decoration: none; color: #fff; }

#navigation1 li a.clicked,

#navigation1 li a.clicked span { background-position: 0 bottom }

#navigation1 li a.clicked span { background-position: right bottom; }

     5. Setelah selesai, Sekarang Klik Simpan

Cara Pemasangannya :

1. Pergi ke menu ''Tata Letak''
2. Klik ''Tamabah gadget''
3. Pilih Gadget ''HTML/JavaScript''
4. Terus, Masukan kode dibawah ini di dalamnya

<div id="navigation1">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li class="cat-item cat-item-29"><a title="Home" href="#"><span>HOME</span></a></li>
<li class="cat-item cat-item-29"><a href="#" title="Graphics"><span>Graphics</span></a></li>
<li class="cat-item cat-item-31"><a href="#" title="Coding"><span>Coding</span></a></li>
<li class="cat-item cat-item-18"><a href="#" title="inspiration"><span>inspiration</span></a> </li>
<li class="cat-item cat-item-1"> <a href="#" title="Photography"><span>Photography</span></a></li>
<li class="cat-item cat-item-30"><a href="#" title="Freebies"><span>Blogger</span></a></li>
<li class="cat-item cat-item-19"><a href="#" title="Wordpress"><span>Wordpress</span></a></li>
<li class="cat-item cat-item-25"><a href="#" title="Logo"><span>Logo</span></a></li>
<li class="cat-item cat-item-22"><a href="#" title="Contact"><span>Contact</span></a>
</li></ul></div>

1. Ganti # dengan Url yang ingin anda inginkan
2. Ganti juga judul menunya seperti Graphits, Coding, inspiration, Dan lain lain, dengan kata kata seterah anda

Sudah sampai di penutup, Terima sudah membaca artikel ini, semoga artikel ini  bermanfaat dan mudah di pratekan oleh sobat, Maaf kalau salah kata karena saya hanya ingin berbagi, Dan Kalau sobat dan yang kurang di mengerti silakan beri komentar sobat di kolom komentar, Terima Kasih......

Via : Blogger Trix