Menambah Navigasi Menu Vertikal Efek Animasi di Blogger

Menambah Navigasi Menu Vertikal Efek Animasi di Blogger

Menambah Navigasi Menu Vertikal Efek Animasi di Blogger . Menambah Menu di Sidebar sangat menarik untuk dicoba. Menu yang dibahas disini i... 23.14.00

Menambah Navigasi Menu Vertikal Efek Animasi di Blogger. Menambah Menu di Sidebar sangat menarik untuk dicoba. Menu yang dibahas disini ialah menu vertikal. Menu ini dilengkapi dengan efek animasi. Jadi sekarang Anda mengatur halaman Anda lebih indah. myblogger-tricks telah membuat instalasi lebih mudah. Menu ini tidak hanya untuk blogger. Anda dapat menambahkan menu ini di blog WordPress Anda atau bahkan website anda. Jika Anda ingin melihat menu kami yang lain, Anda dapat melihat Drop Down menu Kategori tanapa menggunakan javascript. Saya sarankan Anda untuk melihat Demo pertamanya. Kemudian ikuti langkah-langkah berikut untuk menambahkan menu bar ini vertikal di blog Anda.

Langkah - langkah Menambah Navigasi Menu Vertikal di Blogger

1. Masuk ke dashboard blogger >> Tata Letak.

2. Klik pada menambahkan gadget.

3. Pilih dan temukan html / JavaScript

4. Jika sudah menemukan klik ikon ditambah di pojok kanan atas.

5. Kemudian paste html berikut dan kode css di daerah konten.

<style>
#v-menu {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#v-menu {
    width: 275px;
}
#v-menu ul {
    list-style: none;
    text-indent: 0px;
}
#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
}
#v-menu 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/AVvXsEiMes9pNQkygLlfq70rmBBSR28Zx0yPxkUygLAUEZm-tBBX_p5NXC803IvfOFfy_k9VlRPnWHUNEsf_eVXkaF4Wz7_Ljig2Hre-FZsOMKyd1DP1lC79n7G6amSVh28V60r_e5ZqFurbZKNg/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);
}
#v-menu a:hover {
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToi7FOCEvx2-GI_0UNPoWkFKkDlteQRtKVdL75ancagTagLEutA5Zh7KS0Qq9ZdkC-lqvCwE4BIq8ySDnkrPi5B3oxoylFuoBh64anpD5A7vfEHZ1S3AdEk5NOpUf56WVabH36U_tYWKg/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);
   
}
#v-menu a:visited {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToi7FOCEvx2-GI_0UNPoWkFKkDlteQRtKVdL75ancagTagLEutA5Zh7KS0Qq9ZdkC-lqvCwE4BIq8ySDnkrPi5B3oxoylFuoBh64anpD5A7vfEHZ1S3AdEk5NOpUf56WVabH36U_tYWKg/s1600/hover-bg.png) no-repeat;   
}
#v-menu a:active {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToi7FOCEvx2-GI_0UNPoWkFKkDlteQRtKVdL75ancagTagLEutA5Zh7KS0Qq9ZdkC-lqvCwE4BIq8ySDnkrPi5B3oxoylFuoBh64anpD5A7vfEHZ1S3AdEk5NOpUf56WVabH36U_tYWKg/s1600/hover-bg.png) no-repeat;   
}
</style>
<div id='v-menu'>
<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>

Untuk mengubah judul link hanya diganti teks dengan judul halaman dan ganti tanda hash (#) dengan alamat link yang dimaksud. Klik save dan Selesai.

[source]