Membuat Gambar Melayang di Pojok (Lebih dari Satu)

Setelah beberapa saat ane mandeg jegrek ga posting apa-apa sekarang giliran ane mau kembali ke jalan yang lurus....(waduh emang "rahasia illahi"????) ya udah deh....gini.....ane dapet lencana kebanggaan dari temen ane terkasih ukhti anindya yang lagi ultah....makasih bross cantiknya ukhti nin...moga panjang umur dan sehat selalu.......oh ya...ada juga dari ukhti vie_three...katanya nih sponge bob buat ane....makasiiiihhh bgt......ewot nya.......

(STOP GAYA ARABNYA...KEMBALI KE LOGAT INDONESIA....)

Beberapa waktu yang lalu saiia dapet (eh kok malah menyek)..ulangi ah........Bebelapa waktu yang lalu au apet....(halah manja au au....)...STOP!!!!!.....Beberapa waktu yang lalu saya dapet pertanyaan dari adik kelas jurusan web design di kampus....gimana cara membuat gambar melayang di Blog.......(kok aneh....harusnya kan dia yang lebih pinter...wong saya aja cuman dari design grafis)...terus langsung saya jawab "kan banyak tutorialnya????" dan saya pun merekomendasikan blog mas khendin yang sampai saat ini berada di TOP ranking google dengan keyword "cara membuat 'anu' supaya terus berada di pojok"......di bukalah tuh blognya mas kendhin, eh dia masih nanya lagi...."bisa mas....sekarang udah jadi......tapi buat trik seperti itu untuk dua sampai tiga gambar gimana ya mas?"

semproooollllllllllllLLLLLLLLLL.......dasar tuh anak,manja nya minta ampun, cewek lagi.....klo ga punya pacar udah tak .... hehe ga jadi deh..tar ada yang marah.......

nah dari situ saya mencoba untuk bereksperimen, berbekal pengetahuan yang saya dapet dari mas kendhin dan beberapa blog temen yang lain saya coba buat script untuk trik gambar pojok yang bisa menampilkan lebih dari satu gambar, tentunya dengan modifikasi agar ga di bilang njiplak..... en saya ucapin makasih buat mas kendhin karena udah ngasih saya ilmu berharga.....meskipun ucapan ini ga dia baca...tapi temen-temen pasti baca...n kali aja nyampe ke orangnya hehe. Oke deh...trik ini saya kasih nama gambar_pojokan biar terlihat kalau generasi jawa timur juga bisa melakukan hal positif di dunia internet (meski masih banyak di luar sana yang jauh lebih pinter) tapi kan setidaknya saya telah "berbuat" di bandingkan diam,atau mengkritik tanpa melakukan sesuatu.....

Selebihnya,saya yakin banyak yang udah bisa dan udah tau hal-hal seperti ini....buat yang udah pinter....just sharing aja ya.....buat yang masih belajar kaya saya...mari kita lanjooooottttttttttttttttttttttttttttttttttttttttt....................................

pertama.....buat gambar animasi dengan macromedia flash atau apa aja ber ekstensi .gif simpan ke photobucket atau webhost lainya....(jangan upload ke picasa kecuali gambar jpg tau gif namun bukan animasi alias tidak bergerak) usahakan gambar dan animasi memiliki frame transparent ya...biar ga nutupin teks di belakangnya...ukuranya sih terserah...tapi ada baiknya seukuran 100x100 px (atau maksimal 100 kb) tujuanya biar load nya ga berat. klo udah selesai upload...simpan URL gambarnya............
kedua.......masuk ke tata letak>>edit html>>klik expand widget template......(bila di perlukan...backup dulu templatenya)
ketiga,perhatikan baik-baik yah...ini point paling penting (duh kaya ngajar TK aja xixixixixixixi) cari kode ]]></b:skin>
lalu pastekan kode di bawah ini tepat di atas kode tadi :

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

lalu cari kode </body> pastekan kode berikut di atas kode tersebut :

<div id="gambar_pojokan">
<a href="http://www.secretoftrifle.co.cc/">
<img src="http://urlgambar.com/gambar.gif" border="0" /></a>
</div>

perhatikan TEKS yang di cetak merah......(SAMPEK NANTI PATOKANYA TULISAN MERAH ITU YA)
absolute berarti gambar akan kokoh di situ dan ga akan berubah tempat meski di buka lewat opera mini atau di lindas oleh gambar pojok lainya,
top adalah letaknya berada di atas...bila ingin merubah menjadi di bawah cukup di ganti bottom
right berarti posisinya di sebelah kanan klo pengen di kiri ya tinggal ganti left dan o px adalah jarak antara gambar dengan sisi window.
http://www.secretoftrifle.co.cc ganti dengan alamat blog kamu
http://urlgambar.com/gambar.gif ganti dengan alamat gambar kamu (kalo masih ribet....cari aja gambar animasi yang udah terpasang di blognya orang truz copy image location, nah masukan ke sini aja,tapi ijin dulu ya ama yang punya hehe......)
keempat........ klik pratinjau / preview klo udah cocok,baru saved..........

lha trus gimana cara masang dua sampai tiga gambar sekaligus? (iya-iya sabar)......memasang gambar pojokan lebih dari satu memerlukan ketelitian...karena kalau salah memasukan kode...bisa ga muncul deh gambarnya........tapi sebenernya simpel kok,tak kasih contoh untuk gambar pojokan di 3 sudut sekaligus ya....antara lain kanan bawah,kiri bawah,dan kiri atas.

Sebelum kode ]]></b:skin>
kita masukan script di atas dalam tiga formasi,contohnya di bawah ini :

#gambar_pojokan {
position:fixed;_position:absolute;bottom:0px; left:0px; (gambar kiri bawah)
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#gambar_pojokan1 {
position:fixed;_position:absolute;bottom:0px; right:0px; (gambar kanan bawah)
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#gambar_pojokan2 {
position:fixed;_position:absolute;top:0px; left:0px; (gambar kiri atas)
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

lalu cari kode </body> pastekan kode berikut di atas kode tersebut :

<div id="gambar_pojokan">
<a href="url blog kamu/">
<img src="url gambar 1" border="0" /></a> (kiri bawah)
</div>
<div id="gambar_pojokan1">
<a href="url blog kamu/">
<img src="url gambar 2" border="0" /></a> (kanan bawah)
</div>
<div id="gambar_pojokan2">
<a href="url blog kamu/">
<img src="url gambar 3" border="0" /></a> (kiri atas)
</div>

(Tulisan yang merah ga usah di copy cz itu cuma keterangan)
klik pratinjau atau langsung saved bila udah yakin.......................nah.....utak atik sendiri ya... (contoh hasil akhirnya di sini) logikanya di mulai dari gambar_pojokan,gambar_pojokan1,gambar_pojokan2,dst................terus kalau pengen 3 gambar di satu sudut yang sama...ubah setingan letak baik top/bottom,left/right,jarak antara gambar dengan sisi window,serta ubah absolute menjadi relative maksudnya,biar gambarnya ga saling tindes
udah dulu deh.......pada tulisan berikutnya saya mau buat tutorial gimana cara membuat gambar pojokan menjadi marquee (tulisan berjalan) blink (tulisan kedip kelip) dan menampilkan widget seperti jam,alexa,widget email subscriber,iklan refial,dll.....tetunya dengan teknik yang sama.....GAMBAR_POJOKAN....
buat yang demen puisi,cerpen,novel,film layar lebar,politik,dan renungan..monggo.....kita ngobrolin apa aja,buat yang pengen tanya tentang topik di atas....silahkan.....saya jawab sebisanya ya........n buat yang udah pinter-pinter, tolong masukan positifnya...................trims.....