SCRIPT HORISONTAL CSS3 MENU

1. Login ke akun blogger sobat 2. Klik Rancangan --> Edit HTML 3. Letakkan kode berikut di atas kode ]]>

.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:599px; 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; } <div class="Hansuperanima"> <ul id="superAnima"> <li><a class="anima" href="#">Home<br /><br /><span>Home</span></a></li> <li><a class="anima" href="#">Comment<br /><br /><span>Comment</span></a></li> <li><a class="anima" href="#">Seowaps<br /><br /><span>BLOG</span></a></li> <li><a class="anima" href="#">My Facebook<br /><br /><span>My Facebook</span></a></li> <li><a class="anima" href="#">My Twitter<br /><br /><span>My Twitter</span></a></li> <li><a class="anima" href="#">Feed Blog<br /><br /><span>Feed Blog</span></a></li> </ul> </div>

Catatan: Sesuaikan kode angka yang berwarna biru dengan ukuran template. 4. Klik save dan lanjut ke tahap ke 2. 5. Klik Rancangan --> Elemen laman 6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript.. 7. Masukkan kode berikut kedalam kotak HTML/Javascript.

<div class="Hansuperanima"> <ul id="superAnima"> <li><a class="anima" href="#">Home<br /><br /><span>Home</span></a></li> <li><a class="anima" href="#">Comment<br /><br /><span>Comment</span></a></li> <li><a class="anima" href="#">BLOG<br /><br /><span>BLOG</span></a></li> <li><a class="anima" href="#">My Facebook<br /><br /><span>My Facebook</span></a></li> <li><a class="anima" href="#">My Twitter<br /><br /><span>My Twitter</span></a></li> <li><a class="anima" href="#">Feed Blog<br /><br /><span>Feed Blog</span></a></li> </ul> </div>

Catatan: Sesuaikan kode angka yang berwarna biru dengan ukuran template. 4. Klik save dan lanjut ke tahap ke 2. 5. Klik Rancangan --> Elemen laman 6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript.. 7. Masukkan kode berikut kedalam kotak HTML/Javascript.