Advertisemen
Cara membuat floating menu dengan efek slide, blogwallking dapet trik yang menurut saya cukup menarik dan keren, selain bisa untuk mempercantik blog, menu floating ini juga bisa menghemat tempat di blog. Menariknya lagi untuk kode'nya tanpa menggunakan script.js hanya menggunakan kode CSS. Nah, pasti tidak membuat berat blog kan?? Penasaran??Sobat bisa melihat demonya disini, (perhatikan menu kiri bawah), atau bisa melihat scrennshot'nya dibawah ini:
Screenshot
Cara membuatnya sangatlah mudah. Bila sobat tertarik, berikut langkah-langkah membuatnya.
1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Add Gadget, dan pilih HTML/JavaScript
4. Lalu masukan kode berikut didalamnya
<style text-type="CSS">
#floatmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#floatmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#floatmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#floatmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#floatmenu li a:hover{
color:#fff;}
#floatmenu:hover{
z-index:5;
height:175px;
</style>
<div id="floatmenu">
<h3>TITLE / JUDUL</h3>
<ul>
<li><a href="LINK URL">MENU-1</a></li>
<li><a href="LINK URL">MENU-2</a></li>
<li><a href="LINK URL">MENU-3</a></li>
<li><a href="LINK URL">MENU-4</a></li>
<li><a href="LINK URL">MENU-5</a></li>
</ul>
</div>Keterangan:
Warna Merah pada kode diatas, itu untuk mengatur posisi menu floating.
Bila sobat ingin menaruhnya di bagian kanan atas dengan slide kebawah, ganti kode yang berwarna merah dengan kode berikut:
right:10px; top: 5px;
Bila ingin berada di bagian kiri bawah, dengan slide kearah atas, ganti dengan kode berikut:
left:10px; bottom: 5px;
Warna Biru, itu untuk judul menu floating.
Warna Hijau itu adalah link url yang ingin sobat pasang, dan juga untuk nama menu gantilah sesuai dengan judul dari link url tersebut.
Selebihnya bisa sobat edit-edit sendiri sesuai keinginan sobat.
5. Bila sudah, jangan lupa klik Simpan / Save.
Begitulah kiranya Cara Membuat Floating Spoiler Menu Di Blog, semoga bermanfaat.
Sumber: full-tricks.blogspot.com
Article Information:
Description: Cara Membuat Floating Spoiler Menu Di Blog
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Floating Spoiler Menu Di Blog - Rating: 4.5
Advertisemen