Trik gambar Melayang/Floating Images

30 Juli 2008 -- 05/0

Ayoo bagi teman teman Yang mau belajar bikin Blog disini dan yang punya trik dan tips bikin atribut blog silahkan kumpul dan post disini


Yang pertama   ::

#.Ada trik Bikin Floating Images/ Anunya melayang layang

Pasti pada bingung nih, apa maksudnya dan kenapa judulnya begitu, sebenarnya aku sendiri juga bingung mau ngasih judul apa untuk trik yang berikut ini. Setelah aku pikir-pikir eee.. nggak nemu-nemu juga judul yang cocok, ya udah deh aku asal aja kasih judul gitu. Trus apa maksudnya dari judul tersebut dan trik apa yang akan dibahas?
Gini, untunya itu gini trik nyoba ngebahas gimana cara membuat "ANU" itu selalu berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus maksudnya "ANU" itu apa? "ANU" itu maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. Kalo untuk di blog ini aku pasang gambar sonic yg sedang lari-lari (pojok kiri bawah). Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin mencobanya mari ikuti trik berikut ini:

ke 2
Copy kan kode berikut ke dadal CSS kalian


#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }

 

ke 3

Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "buttom", jika pingin di posisi atas bisa diganti dengan "top".

ke-4.
Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>
<div id=" trik_pojok">
<a href= http://redeagle.myflexiland.com/>
<img src= "http://kendhin.890m.com/soniclari.gif" border="0" /></a>
</div>


"http://redeagle.myflexiland.com/" adalah link. ganti dengan link kamu.
"http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.

ke-5.
 Simpan hasil kerja kamu dan lihat hasilnya.

Selamat Mencoba

Comment(s):

  1. ibr0

    Aku belum coba tapi seharusnya itu bisa di gunakan ko disana soalnya programnya gak jaug beda sama disini

     

  2. kemal

    allow ... mantap bro tips nya, btw tuh bisa gak ya di pasang di wordpress ?


     

  3. ibro

    Walaikum salam
    Silahkan kang kalo mau ambil artikelnya
    semoga bermanfaat dan bisa mempercantik blog anda

     

  4. manzone84

    slamolaikum,lam kenal... tipsnya boleh neh... avatarnya jg keren loh,bikinya gimana seh?

     

  5. yhus_dcc_x

    bro gimana carax bikin widget seperti di samping kiri blog ini (yg bertuliskan REDEAGLE MENU) warna hitam.
    tolong beritau aku yang culun ini

     

Your Comment

Comment: