Menu Navigasi Bulat Untuk Blogspot

Menu Navigasi Bulat Untuk Blogspot

8 Comments

Beberapa waktu lalu saya pernah share menu navigasi dengan berbagai bentuk. Kali ini saya akan share menu naigasi bulat untuk blogspot. Menu navigasi ini pada dasarnya sama dengan menulainnya, namun bentuk dan penampilannya berbeda dengan yang lain. Bentuknya unik dan dilengkapi dengan hover aktif yang bekerja ketika mouse bersentuhan dengan widget tersebut. Selain itu cara pembuatannya mudah dan tidak memberatkan loading blog anda. Baiklah, sekarang mari kita bahas cara pasang menu navigasi bulat untuk blogspot. Ikuti langkah berikut.

menu navigasi bulat

Log in ke blogger
Klik Template
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>
.blogonol_circlemenu{width:100%; overflow:hidden}
.blogonol_circlemenu ul{margin:0; padding:0; font:bold 14px Verdana; list-style-type:none; text-align:center}
.blogonol_circlemenu li{display:inline; margin:0}
.blogonol_circlemenu li a{display:inline-block; text-align:center; text-decoration:none; color:#2E2E2E; background:#DBA901; margin:0; margin-right:5px; width:100px; height:100px; border-radius:400px; -moz-border-radius:400px; -webkit-border-radius:400px}
.blogonol_circlemenu a span{position:relative; top:40%}
.blogonol_circlemenu li a:visited{color:#2E2E2E}
.blogonol_circlemenu a:hover{background:#FE9A2E}
Klik Simpan Template
Selanjutnya klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya
<div class="blogonol_circlemenu">
<ul>
<li><a href="alamat link anda di sini"><span>Home</span></a></li>
<li><a href="alamat link anda di sini"><span>Judul 1</span></a></li>
<li><a href="alamat link anda di sini"><span>Judul 2</span></a></li>
<li><a href="alamat link anda di sini"><span>Judul 3</span></a></li>
<li><a href="alamat link anda di sini"><span>Judul 4</span></a></li>
<li><a href="alamat link anda di sini"><span>Judul 5</span></a></li>
</ul>
</div>

Silahkan ganti tulisan hitam dengan cetak tebal sesuai perintah dan kebutuhan
Selanjutnya klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu


"keep spirits and do the best"
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.