 |
| Menu Floating / Melayang di Blog |
Navbar cantik di blogger akan sangat menarik dan sangat cocok jika berada di blog yang bagus pula. kali ini kita akan membahas Cara Membuat Menu Navigasi Floating di Blog. nah sekali lagi tutorial ini saya ambil dari blog Kang Ismet , saya di blog ini hanya akan menalar lebih mudah dan simplenya saja. langsung saja ke tutorial berikut :
1). Pergi ke Blogger Dashboard > Template > Edit HTML.
2). Cari kode ]]></b:skin> , kemudian letakkan kode dibawah ini tepat di atas kode ]]></b:skin> tadi.
/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top, #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom, #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}
a). Kemudian ganti 'width:970px' sesuai dengan ukuran template anda, hanya antisipasi untuk menyesuaikan, jika tidak perlu juga tidak apa".
3). Setelah itu cari lagi kode </head> , dan letakkan kode dibawah ini tepat di bawah / sesudah kode </head> tadi.
<!-- Floating Menu-->
<div id='ki_floating_menu'>
<ul>
<li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrnH_xdWePeYUVptaWXLSMPEgm8RDXce5E_Lgn44XNU1-nQQ9pVtj4bSpiemZpWK200AXhFp1N4fwTWchHJLt0y7zQNBMo5oRQ0zp82nGaXwTb7P541nUhq-LLJjA2NvYrA07NJBIUgk/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>
a). Ganti tulisan yang berwarna hijau dengan nama menu yang akan di munculkan di blog.
b). Ganti juga tanda '#' (pagar) isi dengan alamat yang dituju dan sesuaikan dengan judulnya.
Semoga tutorial ini bermanfaat bagi Sahabat Blogger...... Terimakasih...
Terima kasih telah membaca artikel Cara Membuat Menu Navigasi Floating di Blog . Jika Anda ingin copy-paste / menyalin sebagian ataupun keseluruhan dari artikel ini, harap anda mencantumkan link berikut Cara Membuat Menu Navigasi Floating di Blog sebagai sumbernya atau anda bisa copy permalink dibawah ini.
0 comments "Cara Membuat Menu Navigasi Floating di Blog", Baca atau Masukkan Komentar
Post a Comment