IT = my sTyLe, my WoRLd, my HobBy, my LiFe....

  • Righteous Kill

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis ...

    read-more
  • Quisque sed felis

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus.Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. [caption id="attachment_111" align="alignright" width="300" caption="Image with caption"][/caption] Mauris elit. Donec neque. ...

    read-more
  • Etiam augue pede, molestie eget.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis ...

    read-more
  • Hellgate is back

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris ...

    read-more
Previous Next

SLIDING HORIZONTAL MENU DENGAN CSS

Posted by Muhammad Afifuddin On - - 0 komentar

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.

Categories:

Leave a Reply