Membuat Menu Navigasi Navbar dengan Efek Rollover

Membuat Menu Navigasi Navbar dengan 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 disini.

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.

Cara Membuat Navbar dengan Efek Rollover

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 for the menu starts here bloggertrix.com */
ul{
margin:0;
padding:0;
}
li{
display:inline;
list-type:none;
}
a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; /* default color */
background: #808080; /* 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%);
}

Keterangan :

• 808080 = Kode warna background navigasi bar.

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="Judul Menu">Judul Menu</span></a></li>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="Judul Menu">Judul Menu</span></a></li>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="Judul Menu">Judul Menu</span></a></li>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="Judul Menu">Judul Menu</span></a></li>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="Judul Menu">Judul Menu</span></a></li>
<li><a class="glidebutton" href="URL Tujuan"><span data-text="Judul Menu">Judul Menu</span></a></li>
<li><a class="glidebutton" href="URL tujuan"><span data-text="Judul Menu">Judul Menu</span></a></li>
</ul> 

Keterangan:

• Ganti kode yang berwarna merah dengan masing-masing judul menu navbar.
• Ganti kode yang berwarna biru dengan masing-masing URL tujuan menu navbar.

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

Demikian informasi terbaru tentang cara membuat navigasi bar dengan efek rollover, baca juga artikel menarik lainya seputar tutorial blog tentang cara membuat daftar isi otomatis dengan efek jQuery accordion, semoga bermanfaat, dan selamat mencoba.

Sumber Referensi : Bloggertrix