Membuat Efek Rollover Untuk Menu Navigation pada Blog

Baca Juga

Efek Rollover

Navigasi Bar atau yang sering disingkat Navbar adalah widget menu yang menampilkan kategori topik-topik artikel dan juga halaman di suatu blog, seperti laman kontak kami, tentang kami, privacy policy, dan lain sebagainya. Biasanya pada template default blogger tidak tersedia navbar seperti ini, maka dari itu kita harus memasangnya sendiri, namun lebih mudah lagi jika anda memakai template dari pihak ke 3 yang 'biasanya' sudah dilengkapi dengan navbar, jika anda memakai template dari pihak ke-3, maka anda cukup merubah seluruh kode css navbar tersebut dengan kode css yang akan saya bahas.

Berbeda dengan menu navigasi pada umumnya, Navbar yang akan saya bagikan kali ini ternyata telah dilengkapi dengan efek Rollover yang bagus dan menarik, jadi nanti pada saat kursor mouse menunjuk salah satu menu, maka secara otomatis menu tersebut akan roll atau seperti terbang keatas. Bagi anda yang penasaran dengan live demonya, anda bisa langsung melihatnya di link bawah ini

DEMO Efek Rollover

Pemasanganya juga cukup mudah, anda hanya perlu menambahkan beberapa kode css 3 dan HTML di b:skin (skin blogger) dan pada menu tata letak, tepatnya dibawah header. Default navbar rollover ini berwarna abu-abu, tapi tentang saja karena nanti anda juga bisa merubahnya sesuai dengan tema blog anda masing-masing. Baik, tanpa panjang lebar, langsung saja silahkan disimak yang berikut ini.

Langkah-Langkah

1. Login ke Blogger.
2. Pilih Template
3. Klik Edit HTML.
4. Klik tanda panah hitam disebelah kode <b:skin>...<b:skin> (untuk membuka semua kode css).

5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode dibawah ini tepat diatas-nya.

/* The CSS Code by shaggyweb.blogspot.com */
ul{
margin:0;
padding:0;
}
li{
display:inline;
list-type:none;
}
a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; /* default color */
background: #111000; /* default bg color */
text-decoration: none;
font: bold 14px Arial; /* font settings */
letter-spacing: 2px; /* font settings */
overflow: hidden;
height: 30px; /* height of each button */
text-align: center;
border-radius: 5px; /* border radius */
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a.glidebutton > span:first-child{ /* first span inside button */
position: relative;
display: block;
height: 100%;
padding: 6px; /* padding of button */
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a.glidebutton > span:first-child:after{ /* CSS generated content */
content: attr(data-text); /* Duplicate text of span markup */
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}
a.glidebutton:hover{
color: black; /* color of button on hover */
background: #72cb47; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
}
a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}

 Tambahan:

• background: #111000 merupakan background dari navigation, anda bisa mengganti sesuai selera anda.

6. Klik "Save/Simpan" template.
7. Sekarang pergi ke Tata Letak.
8. Klik Add Gadget.
9. Pilih HTML/JavaScript.
10. Letakkan kode dibawah ini kedalamnya.

<ul>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="Home">Home</span></a></li>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="About">About</span></a></li>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="Label">Label</span></a></li>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="Postingan">Postingan</span></a></li>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="Contact Me">Contact Me</span></a></li>
</ul>

Tambahan:

• Untuk warna MERAH  ganti dengan URL alamat yang anda inginkan.
• Untuk warna HIJAU ganti dengan judul dari URL web anda.

11. Klik "Save/Simpan" gadget, dan selesai.

Demikian informasi dari kami tentang Membuat Efek Rollover Untuk Menu Navigation pada Blog semoga postingan ini dapat berguna bagi sobat blogger semuanya.

Silahkan tinggalkan komentar dibawah ini !! 
Terima kasih :)