Membuat Gambar Melayang di Pojok (Lebih dari Satu)

Welcome to My Blog Bang Udin

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>

klik pratinjau atau langsung saved bila udah yakin .

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.....

By : Bang Udin

Prcantik belok anda di bawah ini

Tidak ada komentar:

Posting Komentar

Followers

Pengikut

ALL TUTORIAL BLOG

Informasi Baru
Cara Membuat Scroll Bar. Tulisan Berjalan di Addressbar.
Menghilangkan Angka Label.
Cara Hack Chip Zynga.
Membuat GIF Untuk Banner.
Membuat Read more Otomatis.
SEO Blogger/Blogspot Template. Curi Password Flash disk. Cara Buat Title Header Bergerak. Cara Membuat Letak Background Di Kotak Comment. Cara Membuat Menambah Jumlah Yang Di Batasi. Cara Membuat Memasang Widget Sms Gratis. Cara Membuat cursor Pada Blog. Membuat Domain Gratis di CO.CC. Membuat Next Page judul Postingan. Next Page Hanya Judul Postingan. Cara Membuat Efek Heart(Hati). Cara Memasang Meta tag. Cara Membuat meta tag di blog. Cara Membuat Icon,GIF, Flash. Cara Membuat Flash. Cara Membuat Menu Melayang. Cara Membuat Label Berputar. Cara Mengganti Icon Bloger. Cara Membuat Template. Menambah dua kolom dibawah/diatas post body. Cara Membuat Menu Tab View. Safware Pengelola Blog.

Archives