Xivanki Share !!: Cara Membuat Menu Navigasi Vertical Di Blog

Cara Membuat Menu Navigasi Vertical Di Blog - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Menu Navigasi Vertical Di Blog !! Semoga tulisan dengan kategori blogging !! css !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Menu Navigasi Vertical Di Blog ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

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'>
#apriliana-nav { 
margin: 0; 
padding: 0; 
font-family: Verdana, Helvetica, Arial, sans-serif; 
}
#apriliana-nav { 
width: 300px; 
}
#apriliana-nav ul { 
list-style: none; 
text-indent: 0px; 
}
#apriliana-nav li { 
margin-top: 0px; 
border-bottom: 1px solid #414141; 
}
#apriliana-nav 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/AVvXsEgAxZmNwrr-qpvVMa-yhGbdhSjs5gFLm3Kd-7PeRxh6jX3_yMh6bfrakHpAEXaist8TWtNPil41RfOxWwugSrd6Hu0IH7gLde3YVRY15ANNLVz6r-CNnUkPuoo2Ayrc4n9lJIQnMnYBeWbg/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); 
}
#apriliana-nav a:hover { 
background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj16ld-bEmJj6J27KcdQVMuwp88sASD-Wt3PvvfN66OMBkdJuFPgumu8xCE53IVTqFGxEHolZ0cUrcI3bq0ZxqqKZHTlfQmNnSXGCqi7aTR_j6XrjKeXu43brwkpMP1sW8C8OurLA82As2y/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); 
}
#apriliana-nav a:visited { 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj16ld-bEmJj6J27KcdQVMuwp88sASD-Wt3PvvfN66OMBkdJuFPgumu8xCE53IVTqFGxEHolZ0cUrcI3bq0ZxqqKZHTlfQmNnSXGCqi7aTR_j6XrjKeXu43brwkpMP1sW8C8OurLA82As2y/s1600/hover-bg.png) no-repeat;    
}
#apriliana-nav a:active { 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj16ld-bEmJj6J27KcdQVMuwp88sASD-Wt3PvvfN66OMBkdJuFPgumu8xCE53IVTqFGxEHolZ0cUrcI3bq0ZxqqKZHTlfQmNnSXGCqi7aTR_j6XrjKeXu43brwkpMP1sW8C8OurLA82As2y/s1600/hover-bg.png) no-repeat;    
} 
</style>

<div id='apriliana-nav'> 
<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="#">Apps</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.