pasang menu horizontal flip

Berbeda dengan menu biasanya, menu ini terlihat sangat bagus. jika teman2 letakkan mouse kedalam menu maka akan terlihat bergerak ke atas.
contohnya seperti gambar dibawah ini atau teman2 bisa melihatnya di bawah header blog saya ini


ingin menggunakannya? baiklah ikuti langkah langkahnya di bawah ini:

Step 1 

1. Sign in
2. klik layout / tata letak
3. klik Edit HTML
4. klik Download Full Template, jangan lupa di save template anda
   
5. letakkan kode CSS berikut diatas ]]>
/* flip menu begin --------------------------------- */ /*Credits: CSS Library for new blogger (beta) */ /*URL: http://cempakul.blogspot.com */ #flip-menu{ padding: 0; width: 100%; border-top: 5px solid #961322; background: transparent; voice-family: "\"}\""; voice-family: inherit; } #flip-menu a{ background-color:#F0C737; float: left; display: block; font: bold 13px Arial; color:black; text-decoration: none; padding: 15px 15px; font-weight:bold; margin: 0 1px 0 0; padding-top: 10px; padding-bottom: 5px; border-left:1px solid #97632B; border-right:1px solid #97632B; border-bottom:1px solid #97632B; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; } #flip-menu a:hover{ background-color: #BE9813; padding-top: 2px; padding-bottom: 13px; } #flip-menu #current a{ background-color: #961322; color: white; border-color: #961322; padding-top: 20px; padding-bottom: 3px; border-left:1px solid #3E090F; border-right:1px solid #3E090F; border-bottom:1px solid #3E090F; } #flip-menu #current a:hover{ padding-top: 3px; padding-bottom: 20px; }
6. klik Save Template.

Step 2 :

1. klik Page Element
2. klik Add a Page Element
3. klik ADD TO BLOG pilih Javascript/HTML
4. Copy dan paste kode di bawah in
<!-- Please change the links with your own links --> <div id="flip-menu"> <a href="http://cempakul.blogspot.com/" title="HOME">HOME</a> <a href="http://cempakul.blogspot.com/search/label/Internet" title="Tips INTERNET">INTERNET</a> <a href="http://cempakul.blogspot.com/search/label/Facebook" title="TIPS FACEBOOK">FACEBOOK</a> <a href="http://cempakul.blogspot.com/search/label/Facebook" title="TIPS TWITTER">TWITTER</a> <a href="http://cempakul.blogspot.com/search/label/Tips%20trik%20NgeBlog" title="TIPS TRIK NGEBLOG">BLOGGER</a> <a href="http://cempakul.blogspot.com/search/label/PHOTOSHOP" title="TUTORIAL PHOTOSHOP">PHOTOSHOP</a> <a href="http://cempakul.blogspot.com/search/label/Film" title="CINEMA-CINEMA">CINEMA</a> <a href="http://cempakul.blogspot.com/search/label/Article" title="Article">ARTICLE</a> <a href="http://cempakul.blogspot.com/search/label/BISNIS%20ONLINE" title="BISNIS ONLINE">MY BISNIS</a> <a href="http://feeds.feedburner.com/Cempakul" target="NEW" title="FEED">POST RSS</a> <!-- you can add saveral link ini here --> </div> <!-- close for flip-menu -->
5. klik SAVE
6. letakkan sesuai keinginan anda
7. klik SAVE
8. selesai

 Mudah bukan???,   ok semoga berhasil