Hai, Pada Artikel ini saya akan membahas sebuah artikel tentang Cara Membuat Menu Navigasi Vertical Di Blog, Pada menu ini Dengan Bentuk vertical Ke Bawah.
Menu ini Dengan Tampilan yang elegan dan cantik, dengan di tambah sebuah icon petunjunk panah dan warna yang stylish, Yang membuat menu ini tambah Menarik, Menu ini bisa Di Taruh Di samping Kanan atau Kiri artikel, Kalau sudah mengerti langsung saja kita coba membuatnya seperti ini :
- Login ke blogger
- Pergi ke Menu ''Tata Letak'' >> ''Tambah Gadget''
- Cari Gadget ''HTML/JavaScript''
- Masukanlah kode dibawah ini, di dalam gadget tersebut
<style type='text/css'>
#anarchyta {
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
#anarchyta {
width: 275px;
}
#anarchyta ul {
list-style: none;
text-indent: 0px;
}
#anarchyta li {
margin-top: 0px;
border-bottom: 1px solid #414141;
}
#anarchyta a {
font-family:Verdana, Geneva, sans-serif;
font-size: 15px;
font-weight:bold;
font-variant: inherit;
text-transform:uppercase;
padding: 0px;
color:#CCC;
display: block;
padding: 13px 50px;
height: 26px;
line-height: 26px;
text-decoration: none;
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1YGEm7QHLH2Xp9klsduE0GTWF8zrRXnCRkxI9P7HuMABL__M4_Vw3_Aa7bat52U11GKZPRlDVDe68l-s2hzx6l1CM4KO0YzjB81w7n8YVrjG6v6DpsHst22eh2sy8pHf9fOuxIL1hQJXN/s1600/menu-bg.png) no-repeat;
text-shadow: 1px 1px 1px #111;
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#anarchyta a:hover {
background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPvlvh-tbRo0gA6LPCpzlXPKfRpzg6zep-WU4eCWwtCjYhzhCAWZCxHMNkUsl3Z76d_vOAMqY8YWxaD92NtctyyUy4uIglEyDdFpS0P4HQ5QMNPmORdq_9NmO_KG3_hRMZVGunueVbhhU/s1600/hover-bg.png) no-repeat;
font-size: 14px;
padding: 13px 60px;
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#anarchyta a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPvlvh-tbRo0gA6LPCpzlXPKfRpzg6zep-WU4eCWwtCjYhzhCAWZCxHMNkUsl3Z76d_vOAMqY8YWxaD92NtctyyUy4uIglEyDdFpS0P4HQ5QMNPmORdq_9NmO_KG3_hRMZVGunueVbhhU/s1600/hover-bg.png) no-repeat;
}
#anarchyta a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPvlvh-tbRo0gA6LPCpzlXPKfRpzg6zep-WU4eCWwtCjYhzhCAWZCxHMNkUsl3Z76d_vOAMqY8YWxaD92NtctyyUy4uIglEyDdFpS0P4HQ5QMNPmORdq_9NmO_KG3_hRMZVGunueVbhhU/s1600/hover-bg.png) no-repeat;
}
</style>
<div id='anarchyta'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Applications</a></li>
</ul>
</div>
- Setelah itu, Ganti # Dengan url yang ingin di tuju
- Ganti juga, Home, Widget, Seo Dan Lain Lain, Dengan Nama menu yang anda inginkan
- Setelah Selesai, Sekarang klik ''Simpan''
Demo
Gimana anda tertarik? mudah kan artikelnya? Demikianlah artikel yang baru saya bagikan ini, Semoga artikel ini berguna dan mudah di pratekkan, Silakan Tuliskan pendapat tentang artikel ini di kolom komentar dibawah ini.
Terima Kasih & Good Luck