Trik Komputer: Floating Menu Gelap

Sebenarnya sudah mulai jenuh juga nih memosting tutorial tentang blog :-s Males cari inspirasinya :)) senior blogger dah pada menghilang :D Satu yang menjadi pertanyaan dibenak, yang blogger mana yang weber (panggilan komunitas web) mana :-/ Kalau dibilang blogger ya blogger, weber ya weber ;;) Tak ayal sekarang banyak blog tutorial malah mosting jauh dari topik ;)) Ya bebas bebas saja lah¡ Seutas pembukaan dari bloglang yg BT (bau tukul) :P

Trik kali ini berkaitan dengan CSS atribut fixed. Hampir mirip nih si fixed ini dengan absolute :D Untuk demonya sobat bisa melihat di http://inimu.com Lihat pada bagian kanan bawah pojok :-bd
Bumbu-bumbunya:

Kode CSS

]]></b:skin>

/* ========== ImFloatMenu-Gelap CSS ========== */
#imfloatdiv {
font-family:Tahoma;
position:fixed; bottom:5px; right:5px; z-index:100;
background:url(http://inimu.com/0-img/trans-hitam-1x1.png) repeat;
padding:1px 3px;
margin:0;
border:1px solid #333333;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#imfloatul {
font-size:11px;
line-height:15px;
padding:0; margin:0;
list-style-type:none;
}
#imfloatul li {
padding:0; margin:0;
display:inline;
text-align:center;
}
#imfloatul li a {
/* font-size:11px; */
line-height:13px;
font-weight:normal;
text-decoration:none;
color:#ffffff;
padding:0 3px;
}
#imfloatul li a:hover {
background-color:#cccccc;
color:#000000;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#imfloatul li img, #imfloatul li a img {
margin:0;
padding:0;
vertical-align:bottom !important;
}
a.imfmcp { color:#333333 !important; }
a.imfmdn, a.imfmup { font-size:15px !important; padding:0 !important; margin:0 !important; }
/* ========== ImFloatMenu-Gelap CSS ========== */

Kode HTML

<body>...</body>

<div id='imfloatdiv'>
<ul id='imfloatul'>
<li><a href='http://your-link.com'>Title</a></li>
<li><a href='http://your-link.com'>Title</a></li>
<li><a href='http://your-link.com'>Title</a></li>
<li><a href='http://your-link.com'>Title</a></li>
<li><a class='imfmcp' href='#' id='imfmcp' onclick='this.blur();' target='_blank' title='Get this widget'>♥</a></li>
<li><a class='imfmdn' href='#your UniqueID' id='imfmdn' onclick='this.blur();' title='Go to bottom'>▼</a></li>
<li><a class='imfmup' href='#your UniqueID' id='imfmup' onclick='this.blur();' title='Go to top'>▲</a></li>
</ul>
</div>

Save.

N B: Untuk kode yg diwarnai berbeda itu bisa tergantung dari bawaan template. Pada point ke 1 ada gambar, upload dan hosting. Pada point ke 2 ada UniqueID, itu disesuaikan dengan ID bagian top dan bottom template sobat.
:-h

Trik Komputer

Sabtu, 31 Juli 2010

Floating Menu Gelap

Tidak ada komentar:

Posting Komentar