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:
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.
#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 ========== */
<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>
:-h
Loading... |
4 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...