Menu Navigation Horizontal Keren Dengan Sentuhan CSS3

Menu Navigation Horizontal Keren Dengan Sentuhan CSS3 | Pada kesempatan kali ini saya akan share tentang sebuah tutorial cara membuat menu navigasi pada blogspot. Tutorial saya dapat dari teman saya Deejayhan, ini agak sedikit berbeda karena sedikit sentuhan css. Ok kita mulai cara membuat menu navigasi horizontal dengan sentuhan css.

Terlebih dahulu anda lihat demonya, klik gambar dibawah ini :

Langkah untuk membuat navigasi menu horizontal dengan css di blogspot :
1. Login ke Blogger
2. Klik Rancangan
3. Klik Edit HTML
4. Backup dulu template anda
5. Centang "Expand Widget Templates"
6. Cari kode ]]></b:skin>
7. Copy kode di bawah ini dan letakkan di atas kode ]]></b:skin>

.Hansuperanima{
        position:relative;
        margin:15px 0 0 10px:
        overflow:hidden;
        margin:0;
        float:left;
        padding:0;
        background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#superAnima{
        width:590px;
        margin:10px 0 20px;
        padding:0;
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#superAnima li{
        margin:0;
        padding:0;
        overflow:hidden;
        float:left;
        height:40px;
}
ul#superAnima li a.anima{
        padding:10px 10px;
        font:10px Arial;
        float:left;
        color:white;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        clear:both;
        height:18px;
        line-height:20px;
        background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x;
        text-align:center;
        transition:all 1.2s ease-in-out;
        -o-transition:all 1.2s ease-in-out;
        -moz-transition:all 1.2s ease-in-out;
        -webkit-transition:all 1.2s ease-in-out;
        -ms-transition:all 1.2s ease-in-out;
        font-weight:bold;
        border:1px solid #999;
}  
ul#superAnima li a.anima:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
} 
ul#superAnima li a.anima span{
        padding:10px 9px;
        color:transparent;
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 1.6s ease-out;
        -o-transition:all 1.6s ease-out;
        -moz-transition:all 1.6s ease-out;
        -webkit-transition:all 1.6s ease-out;
        -ms-transition:all 1.6s ease-out;
        transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -o-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
} 
ul#superAnima li a.anima span:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:4px 9px;
        height:18px;
        transform:scale(1.0) rotate(0deg) translate(0,0);
        -o-transform:scale(1.0) rotate(0deg) translate(0,0);
        -moz-transform:scale(1.0) rotate(0deg) translate(0,0);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
        -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
        color:#FF0;
        border:2px solid #000;
        background:#555;
        text-shadow:1px 1px 1px #000;
        box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
        border-radius:4px;
}
ul#superAnima li{
        border:1px solid transparent;
        background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}  
ul#superAnima li:hover{
        background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
        border:1px solid #777;
}

7. Simpan dulu template anda

Keterangan :
Teks yang berwarna merah pada {width: 590px;} harus anda sesuaikan width dengan jumlah menu dan lebar ruang

Langkah selanjutnya dengan menambah widget di sidebar dengan cara :
1. Pilih Rancangan => Tambah Gadget => HTML/Javascript
2. Copy kode dibawah ini ke dalam HTML/Javascript

<div class="Hansuperanima">
<ul id="superAnima">
<li><a class="anima" href="http://teknik-blog-tutorial.blogspot.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://teknik-blog-tutorial.blogspot.cnm">About Me<br /><br /><span>About Me</span></a></li>
<li><a class="anima" href="http://google.com">Google<br /><br /><span>Google</span></a></li>
<li><a class="anima" href="http://facebook.com">Facebook<br /><br /><span>Facebook</span></a></li>
<li><a class="anima" href="http://twitter.com">Twitter<br /><br /><span>Twitter</span></a></li>
</ul>
</div>

Keterangan :
Silahkan ganti tulisan yang berwarna biru dengan link url anda

Nah sekian dulu postingan tentang cara mudah membuat menu navigasi horizontal pada blog, semoga bermnafaat dan selamat mencoba.