Membuat Rollover CSS3 Navigation Bar untuk Blogger

Tempat Blogging - Hai sobat Blogger, kemarin saya suda update tentang Cara Membuat Related Post Thumbnail Dengan Komentarv Hover Untuk Blogger Saat ini saya akan posting tentang Cara Membuat Rollover CSS3 Navigation Bar untuk Blogger Langsung saja Ini adalah Navigasi Bar Style. saya akan menjelaskan bagaimana untuk menambahkanya ke blogger. Anda akan dapat melihat gaya melayang-layang yang keren di dalam menu ini. Efek ini bekerja dengan baik jika Browser Internet anda terbaru. Anda dapat menghubungkan dengan halaman utama Anda dengan menggunakan navigasi bingkai frame. ini sangat mudah untuk menambahkan ke Blogger anda. jika Anda ingin melihan Menu yang lainya Klik disini.

Langkah Memasang Rollover CSS3 Navigation Bar

1. Masuk ke akun blogger dan Pergi ke Desain >> Edit HTML

     (pastikan backup dulu template anda)
2. Find tag ini dengan menggunakan Ctrl + F]]> </ b: skin>
3. Paste kode di bawah sebelum]]> </ b: skin> tag

/* 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: #ececec; /* 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%);
}

4. Pergi ke Blogger dan klik Layout 
5. Klik Tambah Gadget dan pilih "HTML / Javascript"
6. Pastekan Kode dibawah ini ke kolom "HTML / Javascript"

Vew HTML

Catatan : 
                Ganti Tanda # dengan Link Anda 

7. Simpan "HTML / Javascript"


Sekian dulu tentang Artikel Membuat Rollover CSS3 Navigation Bar untuk Blogger  semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post