Animated Horizontal Navigation using css3

• Home
• Link title-2
• Link title-3
• Link title-4
• bgsgr
• bloggerstars
• Lightbox

Navigasi horizontal dengan animasi css3 seperti di atas bisa anda gunakan untuk mengganti navigasi default blogger anda. Tab horizontal ini merupakan pengembangan dari sebuah tab sederhana dengan menambahkan css3 transition yang dibantu dengan permainan posisi background dan opacity effect. Tak banyak kode css yang digunakan dan anda bisa melihatnya di bawah. Jika ingin menggunakan tab navigasi menu horizontal ini, silahkan simpan xHTML di elemen bawah header blog atau di atas header (klo yang di atas header harus membuat elemen terlebih dahulu : baca di gubhugreyot!). Untuk kode cssnya bisa langsung disimpan di atas xHTML (dengan menambah tag style), atau akan lebih baik jika di simpan di atas ]]></bskin>.

Kode CSS :

#GRnavi{
        height:36px;
        border:0 solid !important;
        border-bottom:5px double #555 !important;
        text-align:center;
        display:inline-block;
        margin:0;
        padding:0;
        list-style:none;
        border-radius:0 !important;
}
#GRnavi:hover{
 border-bottom:5px double #000 !important;
}
#GRnavi li{
        margin:0 0 0 -3px;
        display:inline-block;
        background:#666;
        border-radius:0 !important;
}
#GRnavi a:link, #GRnavi a:visited{
        float:left;
        background:#fff  url(https://lh4.googleusercontent.com/-Qgnehm31W-E/T2RPdyOU76I/AAAAAAAAAcA/ULIWGJNUhUM/h120/grad-blue-transp-4x100.png) left -48px repeat-x;
        font-size:12px;
        font-family:Arial;
        line-height:20px;
        font-weight:500;
        padding:6px 10px;
        margin:0;
        border:1px dotted #000;
        border-bottom:3px solid red;
        border-radius:0 !important;
        text-decoration:none;
        color:#fff;
        text-shadow:1px 1px 1px #000;
        transition:0.4s ease-in 0.2s;
        -o-transition:0.4s ease-in 0.2s;
        -moz-transition:0.4s ease-in 0.2s;
        -webkit-transition:0.4s ease-in 0.2s;
        -ms-transition:0.4s ease-in 0.2s;
        opacity:0.7;
        filter:alpha(opacity=70);
}
#GRnavi a:hover{
        background:#C60 url(https://lh4.googleusercontent.com/-Z5XQKBtz8ic/T2ONa8Y9YwI/AAAAAAAAAbU/mlpTfDNC7AU/h120/gradblueH-7x53.gif) top right repeat-x;
        color:#FF0;
        font-weight:500;
        opacity:0.9;
        filter:alpha(opacity=90);
        border-bottom:3px solid #000;
}
#GRnavi a:visited{color:#888;}

xHTML :

<ul id="GRnavi">
     <li><a href="Link-1" title="title-1">Home</a></li>
     <li><a href="Link-2" title="title-2">Link title-2</a></li>
     <li><a href="Link-3" title="title-3">Link title-3</a></li>
     <li><a href="Link-4" title="title-4">Link title-4</a></li>
     <li><a href="Link-5" title="title-5">Link title-5</a></li>
     <li><a href="Link-6" title="title-6">Link title-6</a></li>
     <li><a href="Link-7" title="title-7">Link title-7</a></li> 
</ul>

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard) » klik "Rancangan (Design)"
3. Klik "Edit HTML".
4. Lakukan Backup Template.
5. Cari kode ]]></b:skin>.
6. Copy dan paste kode CSS di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)".
8. Lanjutkan menyimpan xHTML di "Page Elemens | Add a Gadget".

Catatan/Keterangan :

1. Panduan cara menyimpan kode HTML melalui "Add a Gadget" dapat di baca di sini!
2. Jika ingin menyimpan kode css-nya di add a gadget, tambahkan tag style pada kode css:
   

   <style type="text/css">
   Letakkan kode CSS di sini !
   </style>

3. Ganti semua link, title dan link-title pada xHTML dengan milik anda sendiri!