Cara Membuat Menu animasi

Masih di Variasi Blogger share Cara Membuat Menu animasi cekidot

Silahkan sobat Copy Paste script  di bawah ini simpan di blog sobat

<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://variasiblogger.blogspot.com/'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik HTML/Javascript , kemudian paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : Silahkan sobat edit kembali kode script di atas sesuai Variasi menu yang sobat inginkan , untuk contoh kode script di atas klik DEMO

More about → Cara Membuat Menu animasi

Cara cepat membuat navbar keren di blog

Masih di Variasi Blogger share Cara cepat membuat navbar keren di blog cekidot

Silahkan sobat Copy Paste script  di bawah ini dan simpan sebelum kode script ]]></b:skin> di blog sobat

#navbar-iframe{opacity:0;-moz-opacity:0;filter:alpha(Opacity=0);background:#000 url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/str4.gif) center repeat;}
#navbar-iframe:hover{opacity:1;-moz-opacity:1;filter:alpha(Opacity=1);}

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik Edit HTML >> centang Expand Template Widget , kemudian tekan ctrl + F paste script ]]></b:skin> jika sudah ketemu silahkan Copy Paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : Jika sobat sudah terdapat kode navbar pada Template Blog sobat saya sarankan hapus dan ganti dengan kode script di atas,Silahkan ganti teks yang berwarna merah di atas dengan gambar animasi pilihan sobat

More about → Cara cepat membuat navbar keren di blog