Membuat Flipping Menu, Tanpa Edit HTML

Flipping Menu

Flipping Menu, Vertikal dan Horizontal sudah tadi kita simak cara pasangnya yang sedikit agak berbelok-belok dan jujur saya sendiri belum mencobanya kalau pun mencobanya belum tentu bisa *smile.

Tapi Flipping Menu yang satu ini tanpa harus belok sana sini tanpa mengedit HTML cukup penambahan Gadget/Widget makanya judulnya Membuat Flipping Menu, Tanpa Edit HTML. Karena caranya yang mudah jadi untuk Flipping Menu kali ini ada Demonya.

Setelah Anda memilih tambahkan Gadget/Widget lalu pilih HTML/JavaScript dan masukkan kode dibawah ini, setelah itu simpan.

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/Jquery1.3.2.js"></script> <script src="http://dl.dropbox.com/u/66348944/flipmenu.js" type="text/javascript"> </script> <style> .flipmenu { font-family: Times new roman; font-size: 16px; font-weight: bold; position: relative; } .flipmenu_box { overflow: hidden; position: relative; } .flipmenu_link,.flipmenu_link_over,.flipmenu_link_active { width:250px; text-decoration: none; text-shadow:1px 1px 1px #fff; text-transform: uppercase; color: #000000; cursor: pointer; margin-top:2px; padding: 6px; position: absolute; background: #fdd78d; background: -moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88), color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88', endColorstr='#fb9709',GradientType=0 ); -webkit-border-radius: 5px; -moz-border-radius: 5px; } .flipmenu_link_over, .flipmenu_link_active { text-decoration: none; text-shadow:1px 1px 1px #eee; color: #fa0320; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); </style> <div id="flip_menu"> <a href="#">● Thủ thuật Windows 7</a> <a href="#">● Thủ thuật Windows XP</a> <a href="#">● Thủ thuật Internet</a> <a href="#">● Thủ thuật USB</a> <a href="#">● Thủ thuật Yaoo-Gmail</a> <a href="#">● Thủ thuật Windows</a> <a href="#">● Thủ thuật Blogspot</a> <a href="#">● Chuyên đề máy tính</a> <a href="#">● Tổng hợp</a> <a href="#">● Linh tinh</a> </div>

Keterangan:

<a href="#">● Thủ thuật Windows 7</a> dan seterusnya hingga
<a href="#">● Linh tinh</a>

Ganti alamat tanda # menjadi nama url dan ● Thủ thuật Windows 7 ganti menjadi nama link

contoh: 

<a href="#">● Thủ thuật Windows 7</a>

setelah diganti
<a href="http://rohis-facebook.blogspot.com/2013/06/membuat-flipping-menu-tanpa-edit-html.html">Membuat Flipping Menu, Tanpa Edit HTML</a> 

Demo

Sumber: 
http://dunghennessy.blogspot.com