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
- Login ke Blogger.com, dengan akun anda
- Klik ''Template'' di Dasbor blogger
- 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 :
- Pergi ke menu ''Tata Letak''
- Klik ''Tamabah gadget''
- Pilih Gadget ''HTML/JavaScript''
- 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>
- Ganti # dengan Url yang ingin anda inginkan
- 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......
