Cara Membuat Floating Menu Vertikal

139 views

alhadi.org – Cara Membuat Floating Menu Vertikal, Cara Membuat Floating Menu Vertikal

Cara Membuat Floating Menu Vertikal

Satu lagi tips blog untuk sobat blogger yang ingin mempercantik tampilan menu blognya, kali ini menu yang akan saya share adalah cara membuat floating menu vertikal. Floating menu ini posisinya melayang disebelah sidebar blog sobat dan akan mengikuti naik turun mouse yang sobat gerakkan.

Bagaiman cara membuat floating menu vertikal ini ? ikuti langkah-langkah dibawah ini :

Copy kode script di bawah ini dan pastekan tepat di atas kode ]]>

#floatMenu { position:absolute; top:170px; left:65%; margin-left:290px; width:70px;} #floatMenu ul {list-style-type: none;} #floatMenu ul li a { display:block; background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent; background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b)); border:0px solid #99; border-left:3px solid #fff; text-decoration:none; color:#fff; padding:5px 5px 5px 25px; width:80px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -webkit-transition: all 0.6s ease-out; box-shadow: #333 0px 0px 10px; -moz-box-shadow: #333 0px 0px 10px; -webkit-box-shadow: #333 0px 0px 10px; } #floatMenu ul li a:hover { color:#AD3D29; background-color: #000; border-right:3px solid #999; width:100px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 5px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 0px; } #floatMenu ul.menu1 li a:hover {border-color:#bdbdbd;} #s { background:#AD3D29; color:#00ff00; width:230px; padding-left:15px; font-weight:bold; font-size:10px; padding:1px; border-bottom:1px solid #F0F0F0; border-right:1px solid #F0F0F0; border-top:1px solid #F0F0F0; border-left:0; font-family: Verdana; }

Kemudian cari lagi kode . Copy kode script di bawah dan pastekan tepat di atas kode

Setelah itu cari kode .  Copy kode script di bawah dan pastekan tepat di atas kode
 

  • Link 1
  • Link 2
  • Link 3
  • Link 4
  • Link 5
  • Back to top

Kemudian save template dan lihat hasilnya.
Cukup sekian tips blog kali ini  Cara Membuat Floating Menu Vertikal . Semoga Bermanfaat
Terima Kasih Atas kunjungan anda di halaman  Cara Membuat Floating Menu Vertikal, Jangan lupa untuk Membookmars Halaman ini jika  Cara Membuat Floating Menu Vertikal berguna untuk anda.