12.02.2009

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.


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


63 komentar temen:

NURA mengatakan...

salam sobat
wah trims ilmunya nich,,
pingin bikin gambar melayang di pojok,,untuk menambah cantik tampilan blog,
tapi coba2 dulu deh,,praktekin ilmu dari mas ADIT.

cyzko mengatakan...

tutorial yang menarik lanjutkan....

-Gek- mengatakan...

Pintar amat sih dirimu, Dit, ayo ajarin mbok Gek mu yang super duduz a.k.a gaptek ini..
huks huks..

-Gek- mengatakan...

Apa itu, gambar pojokan?
Masak di blog dipasangin kuntilanak juga..
xixixixixixi!

-Gek- mengatakan...

Eh...
lupa, selamat ya ewod nye..
Nulis terus, aneh juga ni eke nye-pam, tapi invisible.. hihihihi..

(gimana kalo diatur, yang udah jadi temen, boleh langsung nye-pam sepuasnya.. )

Setidaknya ada ilmu yang kutularkan ke dikau kan, kan, kan..
hihihi..

*kabur sebelum di getok!*

Ninneta - MissPlum mengatakan...

oooohhhh Adit.... seperti biasa.... aku nggak ngerti..... hihihihihi.... ntar kalo aku mau nambahin apa2 aku minta kamu aja yah yang ngerjain.... hehehehehe......

Clara mengatakan...

gambar di pojokan? seru juga kalo pake mukaku lagi nyengir kali ya?
pasti blog ku langsung sepi pengunjung
pada takut liat gambar mukaku hihihihii

btw, selamatttt buat awardnya ^^

eh, kok aku blom follow yak?
duh dodol
ta' follow mas

BrenciA KerenS mengatakan...

woww kereennn tutorialnya... baguuss...

selamaat yaa awarnya kereen

Nyubi mengatakan...

hadir di blog kesayangannya mas Adit :) tutornya manteb, saya bookmark aja.. kapan2 dipraktekin.
makasih :)

SeNjA mengatakan...

infonya keren nih,... !

buatin dong ditttt..... he,.. ^_^

Achmad Fauzi mengatakan...

Salam. Wah sudah pinter gini masih nanya ke nyubi. Salut deh semangat belajarnya luar biasa. Aku ra wani nguyahi segoro.
Kalo mau blajar bikin tema, nanya ke mbah gugel soal Artisteer. Disana buanyak sekali masukan, lantaran lagi ngetren. Unduh saja software dan panduannya. Komplit pake telur 2 ... h h h
Tapi ya kudu sabar, sbab banyak yg mulai digusur, lantaran takut kena klaim pabriknya.
Coba dulu ya, nanti disambung lagi. Salam.

haitsam shiddiq mengatakan...

thank's atas tutorialnya. sangat membantu sekali..,,

salam kenal ya..,, dari http://haitsam.wordpress.com

Ninda Rahadi mengatakan...

mas adiiitt. tanggung jawab ya, SI BELANG HAMIL TUH!!! oh ngga, maksudnya tanggung jawab ya.. aku ngga paham sama sekali apa iniiihhh.. sebenernya sih awardnya boleh dipasang semua kok qiqiqiq
eh mas, bantuin aku bikin yang diatas kotak komen ada emoticonnya tuh, nyoba berbagai cara gagal mulu..capeks

Zahra Lathifa mengatakan...

semangat trus ya dit...semoga tetep istiqomah berada di jalan yang lurus..:D

Unknown mengatakan...

kalo pake gambar melayang2 itu jadi berat gag mas blognya ntar???

soalnya blog ku udah berat e..

bhogey mengatakan...

wan nambah lagi ni ilmu blogging saya ni..
thx sharenya bro

qarrobin mengatakan...

Apa kabar Dit, kalo facebooknya udah ada yang baru, add aku lagi ya...

blog nya sangat informatif...kalo ntar aku perlu, minta dibikinin ama adit aja ya...

gimana kalo gambar melayangnya gambar si kunti...ih pada kabur semua tuh pengunjung...hihihi(maaf ya canda)

kurniawan.q mengatakan...

waaaah blognya lebih bagus ,oh ya terimaksih ya ilmunya dan tipsnya

Kabasaran Soultan mengatakan...

nice sharing ....

mocca_chi mengatakan...

tutorialnya di bookmark ^ ^

vie_three mengatakan...

NAH itu dia spoilernya udah bisa gitu...... jiyaaahhhh aq udah pernah yang ini udah pernah nyoba di blogku..... wkwkwkwkwkwkwk

FaiS mengatakan...

tutor yg sangat bermanfaat untuk saya yg masih pemula...
thx ya tutor'y...

Laksamana Embun mengatakan...

Thanks atas kunjungannya...

Bolh.. Ntar kabrin aja kalau udah di psng. Biar saya psng balik...

Thanks

Laksamana Embun mengatakan...

Thanks ya ats kunjugannya...

Bolh,, Ntar kalau udah di psng konfirmasi ke saya ya biar saya psng balik linknya...

Thanks

rhe mengatakan...

di wp bisa jg gagh??

didiet mengatakan...

pingin nyoba tapi caranaya panjang juga ya mas

Blogger Admin mengatakan...

rhe @ mungkin bisa...tinggal sesuaikan aja ma langkah2 yang berlaku di word press...masalah kode kemungkinan sama...

ceritatugu mengatakan...

ya susah,inyong masing bingung alias ngga bisa,perlu banyak belajar nih
o ya mas Aditya,kalau teks berjalan itu gimana? lebih susah atau ngga,soalnya inyong ingin yang ini

bisnis online mengatakan...

nice tutorial sobat thanks ya uadah mau berbagi ilmu, salam kenal

Dameydra Jaya mengatakan...

heheheh cakep banget triknya ...sukses yach....

Seti@wan Dirgant@Ra mengatakan...

Wah dapet ilmu baru lagi nih...
makasih banyak sobat.

Seti@wan Dirgant@Ra mengatakan...

Dapat ilmu berharga lagi disini...
makasih banyak sobat.

FATAMORGANA mengatakan...

Aku bookmark dulu sobat..
makasih.

Ikutan Ngeblog mengatakan...

berbagi ilmu itu baik, nanti ilmunya bisa bertambah.. hehe...

kurniawan.q mengatakan...

biarpun doubel tetap sya kasih award ini kesahabat salam

Aisyah mengatakan...

infonya bagus...

JR mengatakan...

selamat malam....JR dateng kembali teman
wakh keren nih....tutornya, kalo mas kendhin aku juga sering dateng ke sana.....hanya saja, yang punya blognya gag mau ke ane....ya gitu dech..., maklum aku blog nuewbi sih mas

Admin Cakep mengatakan...

waaahhh.....
jd bgus loooh......
thank u.......

SeNjA mengatakan...

selamat malam sahabat,...mengunjungi sahabat juga salah satu wajah cinta loh ^_^

* aku celingukan mencari shout box disini,mana y sob ?

Blogger Admin mengatakan...

@all....makasih....semuanya bakalan ane bales deh kunjunganya.....
@ senja.....ane masih mencoba masang soutmix tersembunyi...nih lg register....:)

Laksamana Embun mengatakan...

Dimana liat what whould google see tuh bos? bisa kash link nya ke saya ga?

Laksamana Embun mengatakan...

Nh linknya Bro: sungaikuantan.com

Oia minta donk link haryantoblog tuh? gak ketemu saya cari2.. Takutnya salah orang

Khery Sudeska mengatakan...

Trims atas tutorialnya, My Friend. Akan saya pelajari. :)

ellysuryani mengatakan...

Mantap dan bermanfaat. Sementara numpang baca-baca aja dulu, soalnya hehe, saya gaptek dit.

Anggi Zahriyan mengatakan...

nice info bung...
izin coba dulu gan...

ri02000 mengatakan...

masalah javascript ekternal pernah saya bahas http://tinyurl.com/yllqxo5

Ikutan Ngeblog mengatakan...

komenku kemaren mana ya?

insanitis37 mengatakan...

waah, di sini makin rame aja ya...
menarik tuh tipsnya...
maaf baru berkunjung, baru tau deh ada yg ganti cat, hehe

Blogger Admin mengatakan...

@ikutan ngeblog@ lha itu d bwhny bang setyawan?masih ada kok,g ane apus hehe,santai bro,g ane moderasi ky pnyae DJ kok ahahaha piss...

ivan kavalera mengatakan...

wah, makin asyik dan keren aja nih templatenya bang

HB Seven mengatakan...

tengkyu..om telah mampir

mamah aline mengatakan...

mantap ilmunya, jdi pingin bisa bikin gambar melayang itu

Om Oktri mengatakan...

terima kasih atas ilmunya...n
sebelumnya saya minta maaf atas copas tips k'aduitya di blog saya...sekali lagi saya mnta mf....
mohon pencerahanya buat blogger pemula ini...
n akan saya akan membri sumber nya....di tips di blog saya...

terima kasih dan maaf....

FB BATAM mengatakan...

alhamdulilah selama 4 jam hinga subuh akhirnya saya berhasil membuat gambar melayang tks pak

KREATIFITAS MAYA mengatakan...

KANG CARA BUAT GAMBAR ANIMASI GIMANA??MAKASIH KEMAREN DAH BISA THANKS YA...!!!

blogger salim mengatakan...

pusing membuatx

salim mengatakan...

gimana carax??????????

sukore mengatakan...

kang adit,,, koq aku gk di masukin di blogroll kang adit sih,, padahal aku juga follow kang adit,,,
kang adit sekolah dimana sih,, koq bisa pinter banget,,,
jadi ngiri euy,,,

aku mau coba tips nya ah,, kebetulan aku mau tuh yang kaya bgonoan

ANGGITA mengatakan...

maksudnya 3colom spr mas punya,+edit+warnanya,sekalian ada program blog burung berterbangan di dlm posting ngak ya... (kl ada blh bg 2)sy blm bc semua artikelnya . tank's

ANGGITA mengatakan...

maksudnya 3colom spr mas punya,+edit+warnanya,sekalian ada program blog burung berterbangan di dlm posting ngak ya... (kl ada blh bg 2)

Asepjiku mengatakan...

Wah sob.. cara saya agak berbeda nih, hehe.. Mohon sarannya sob.

sewa villa di puncak mengatakan...

brotha gimana caranya kalo pasang di joomla?

Mbah Kuncen mengatakan...

Wah, tambahan ilmu, nich...

Sekarang ada 2 Penjaga Blog saya, lihat ya...

Dua2 menjaga sambil terbang...

Saya sudah follow blognya, plus, link posting ini saya pasang di daftar link dengan judul: Membuat Gambar Melayang Lebih dari Satu.

Klo berkenan, follow bali, ya...

Backlink nya juga klo ada...

Ini link posting daftar link:

http://www.andriwiyasa.com/2010/12/daftar-link-sahabat-dan-link-penting.html

Salam YAKIN SUKSES !!!