Sabtu, 31 Juli 2010

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:

  1. Kode CSS
    2. Untuk masalah ini letakan diatas/sebelum kode ]]></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 ========== */
  2. Kode HTML
    3. Untuk masalah yg ini letakan didalam tag antara tag <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>
  3. 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

Diposting oleh di
Label: , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)