Menu horizontal sliding style merupakan sebuah menu blogger yang dapat bergerak bila cursor mengenai widget tersebut. Menu horizontal akan berputar dan memperlihatkan tampilan atraktif yang dapat dijadikan daya tarik tersendiri bagi blog anda. Sekarang mari kita bahas cara membuat Sliding Horizontal Menu Dengan CSS. Ikuti langkah berikut.
DEMO
Login ke akun Blogger Anda.
Klik Template.
Klik Edit HTML.
Masukkan kode berikut di bawah kode ]]></b:skin>
navrotatebt{max-width:900px !important;margin:100px auto;margin-top:20px} navrotatebt ul{list-style:none;overflow:hidden} navrotatebt li a{background:#D8D8D8;border-right:1px solid #fff;color:#fff;display:block;float:left; font:400 13px 'Montserrat Alternates',Arial;padding:10px;text-align:center;text-decoration:none;text-transform:uppercase;width:80px;-webkit-transition:transform 1s;-moz-transition:transform 1s} navrotatebt#nojquery li a:hover, .rotate{-moz-animation:animrotate 2s;-webkit-animation:animrotate 2s;background:#222} @-moz-keyframes animrotate{100%{background:blue;-moz-transform:perspective(200px) rotateY(360deg)} } @-webkit-keyframes animrotate{100%{background:blue;-webkit-transform:perspective(200px) rotateY(360deg)} }Selanjutnya klik Simpan Template.
Klik Tata Letak. Pilih HTML/JavaScript.
Masukkan kode berikut ke dalamnya:
<navrotatebt id="nojquery"> <ul> <li><a href="http://BLOG ANDA.blogspot.com/" target="_blank">Home</a></li> <li><a href="ALAMAT LINK ANDA" target="_blank">Judul</a></li> <li><a href="ALAMAT LINK ANDA" target="_blank">Judul</a></li> <li><a href="ALAMAT LINK ANDA" target="_blank">Judul</a></li> <li><a href="ALAMAT LINK ANDA" target="_blank">Judul</a></li> <li><a href="ALAMAT LINK ANDA" target="_blank">Judul</a></li> </ul> </navrotatebt>
Ganti semua tulisan yang hitam dengan cetak tebal sesuai kebutuhan anda.
Selanjutnya klik Simpan dan lihat hasilnya.