Make a Trick Use Fixed Attribute

Info singkat bagi blogger pecinta label/kategori bergaya flash/cloud/cumulus sekarang bisa berlega hati dengan hadirnya fasilitas Add a Gadget ;)) Tinggal lakukan settingan, kemudian klik, sampai deh ke blog kita. Master @way2blogging berkolaborasi dengan master @nitinmaheta sudah membuat tools add to blogger untuk flash animated label cloud :) You can read here easy install flash animated label cloud widget for blogger and here too quick add flash animated label cloud widget to blogger.
Koleksi Koben mengenai tema serupa bisa juga dilihat-lihat :"> make labels cloud full css for blogger. Apa lagi yaaa postingannya :D Sobat masih ingat dengan dynamic views update support gadget display! Di sebelah kanan posisinya itu loh?

Si bloglang anu ganteng kalem tea akan coba berbagi trick serupa memakai CSS dengan sedikit sentuhan variable DHTML. Walau tidak sama, namun seperti itu penampakan hasil trik ini :D Koben buat dengan kode sudah seminimal mungkin nih ;)
Karena memakai atribut fixed, maka harus diperhatikan posisi ketinggian!

Markup HTML

Penulisan syntax HTML bisa kalian pasang sebelum/diatas tagging penutup </body> Kalau pusing Add a Gadget saja pilih opsi HTML/JavaScript.

<div class="col-1" onmouseover="this.className='c1'" onmouseout="this.className='col-1'">
<div class="cc1">

--- YOUR CONTENT1 HERE ----

</div>
</div>

<div class="col-2" onmouseover="this.className='c2'" onmouseout="this.className='col-2'">
<div class="cc2">

--- YOUR CONTENT2 HERE ----

</div>
</div>

<div class="col-3" onmouseover="this.className='c3'" onmouseout="this.className='col-3'">
<div class="cc3">

--- YOUR CONTENT3 HERE ----

</div>
</div>

Temukan code ]]></b:skin> sisipkan diatasnya/sebelumnya CSS berikut.

    .col-1 {
        background: #444;
        width: 10px;
        height: 55px;
        position: fixed;
        right: 0;
        top: 200px;
    }
    .c1 {
        width: 280px;
        height: 200px;
        position: fixed;
        right: 0;
        top: 200px;
cursor: pointer;
z-index: 1;
    }
    .cc1 {
        margin: 5px 0 0 45px;
    }
    .col-2 {
        background: #444;
        width: 10px;
        height: 55px;
        position: fixed;
        right: 0;
        top: 256px;
    }
    .c2 {
        width: 280px;
        height: 200px;
        position: fixed;
        right: 0;
        top: 256px;
cursor: pointer;
z-index: 1;
    }
    .cc2 {
        margin: 5px 0 0 45px;
    }
    .col-3 {
        background: #444;
        width: 10px;
        height: 55px;
        position: fixed;
        right: 0;
        top: 312px;
    }
    .c3 {
        width: 280px;
        height: 200px;
        position: fixed;
        right: 0;
        top: 312px;
cursor: pointer;
z-index: 1;
    }
    .cc3 {
        margin: 5px 0 0 45px;
    }

SAVE. Lihat hasil kerja :)
Hal² yg perlu diperhatikan!!!
Atur width/height yg terdapat pada var .c1, .c2, dan .c3 Panjang dan tinggi itu merupakan efek ketika hover (nongol) :P Tambahkan panjang yg sudah dipatok dengan nilai nominal margin (margin: 5px 0 0 45px;)

Semoga bermanfaat :)
Happy blogging \m/