Cara Pasang Floating Images di Blog WordPress
![]()
Cara buat gambar melayang Floating Image di Blog WordPress | Cara Pasang Animasi Flash di Blog
Sobat narablog, artikel berikut saya ambilkan dari blognya mas bro Bootingskoblog. Artikel-artikel tutorial wordpress di blog dia sangat bagus baik untuk narablog pemula maupun yg sudah bangkotan di wordpress.com
Dari blog inilah saya pribadi banyak belajar bagaimana membangun blog wordpress.
Artikel ini istimewa karena:
- dari dulu saya ingin tahu bagaimana caranya memasang floating images ( gambar melayang ) di blog wordpress dan ketemu di artikel mas bro ini. Dulu saya gak tahu apa itu namanya, jadi saya search di mbah google dengan kata kunci: pasang gambar di pojok blog
. Bagi sobat yg belum tahu apa itu floating images : ini adalah sebuah/beberapa gambar yang selalu berada di pojok blog kita. Gambar tersebut tidak akan bergerak dan tetap berada di pojok halaman walaupun kita meng-scroll halaman ke atas dan ke bawah - ternyata mas bro bootingskoblog mengetahui trick ini dari duo ●●ЄЯШЇЙ●●● yang super narsis itu
. buseeeedd dah! Rupanya mas dan mbak Erwin ini emang ajibbbb! Kalu maen ke blog mereka pasti narablog sudah ‘dihadang’ oleh macan dan elang yang menjadi floating images blog mereka. Entah sampai kapan macan imutnya ada disana wkwkwkwk:D
Jika rekan narablog tertarik untuk mencoba memasang floating images di blog untuk sekedar mempercantik tampilan blog, atau untuk alasan2 lainnya, caranya super mudah.
- Login ke akun WordPress.com sobat.
- Kemudian klik [Tampilan] > [Widget].
- Pilih widget “Text”. Click and drag (klik dan tarik dengan mouse) widget teks ini ke sisi kanan (sidebar)
- Copy dan pastekan kode dibawah ini:
Posisi bawah-kanan:
<a style="display:scroll;position:fixed;bottom:0;right:0;">
<img src="URL gambar" /></a>Posisi atas-kanan:
<a style="display:scroll;position:fixed;top:0;right:0;">
<img src="URL gambar" /></a>Posisi bawah-kiri:
<a style="display:scroll;position:fixed;bottom:0;left:0;">
<img src="URL gambar" /></a>Posisi atas-kiri:
<a style="display:scroll;position:fixed;top:0;left:0;">
<img src="URL gambar" /></a>- Dan klik tombol “Save”.
Membuat Floating Image yang berlink
dari sobat narablog Lambertus , saya mengetahui info ini. Trims berat mas bro! Inilah keuntungan dari blogwalking ke narablog lainnya agar ilmu ngeblog kita terus di-update!
Floating image yg punya link ini bisa sobat manfaatkan untuk macam-macam keperluan. Linknya bisa internal (mengarah ke dalam halaman atau postingan blog kita) ataupun eksternal (menuju ke blog atau website lain). Saya beri contoh:
Posisi bawah-kiri (dengan Link)
"URL gambar" /></a>Keterangan:
- Sobat narablog bisa mengganti huruf yang dicetak merah dengan URL gambar atau animasi. URL gambar bisa didapatkan dengan meng-klik kanan pada sebuah gambar di-internet lalu klik “copy image location” (dengan browser Mozilla Firefox)
- Yang dicetak biru silahkan diisi dengan link yg akan kita tuju misalnya: http://annunaki.wordpress.com
- Trick ini berjalan dengan mulus di browser Mozilla Firefox, Google Chrome dan Opera.
Membuat Floating Image yang Transparan
dari nona Edda yang cantik bin ajaib itu
, saya jadi tahu jika floating image bisa dibuat menjadi transparant. Kita tinggal menambahkan kode HTML ini: style=”opacity:0.1;filter:alpha(opacity=10);” di dalam img src-nya, contoh:
Posisi Atas Kiri (dengan Link)
"URL gambar" style="opacity:0.1;filter:alpha(opacity=10);" /></a>Penjelasan Menurut Nona Edda:
opacity nya bisa disesuaikan menurut keinginan kalian. mau transparant banget kayak di blog gue ini (liat alexa gue)
, atau setengah transparant juga bisa (kayak YM status gue), mana yang enak diliat ajalah. tinggal ganti opacitynya aja, jadi 0.1 dan 10 atau 0.2 dan 20, dst. up to youuuu
![]()
Tambahan
- kita bisa membuat floating images-nya itu saling berderet. Perhatikan floating images di pojok kiri bawah blog ini. Contoh: untuk kiri bawah kode HTMl-nya adalah: “display:scroll;position:fixed;bottom:0;left:0;” ini bisa ditambahin lagi gambar di sebelahnya. Di blog ini saya nambahin kode : “display:scroll;position:fixed;bottom:0;left:80px;” . Angka 80 itu adalah jarak gambar kedua dari tepi sisi kiri bawah monitor. Jika di kode html kedua ini sobat tetap mengisikan angka nol, maka gambar kedua akan menimpa gambar pertama. Jangan sampai seperti ini. Jadi sobat eksperimen saja dengan angka-angka ini sampai ketemu posisi yg pas untuk 2 gambar saling berderet. Gampangnya adalah: ketahui berapa pixel besar gambar pertama. Jika gambar pertama besarnya 100 pixel, maka sobat mungkin mau memberi angka 120 untuk kode HTML gambar kedua.
- Saya beri contoh. Ini adalah kode HTML dari 2 floating images yang berderet dari pinggir bawah kiri di blog annunaki. Gunakan 1 wigdet text saja:
Kode HTML Pertama
<code><a style=”display:scroll;position:fixed;bottom:0;left:0;” href=”http://annunaki.wordpress.com/2010/10/05/cara-pasang-floating-images-di-blog-wordpress” title=”yg lagi online disini” target=”_blank”><img src=”http://whos.amung.us/swidget/0ekaj4tlyk5m” /></a></code>
Kode HTML Kedua
<code><a style=”display:scroll;position:fixed;bottom:0;left:80px;” href=”http://annunaki.wordpress.com/2010/10/05/cara-pasang-floating-images-di-blog-wordpress” title=”Google Page Rank” target=”_blank”><img src=”http://pr.prchecker.info/getpr.php?codex=aHR0cDovL2FubnVuYWtpLndvcmRwcmVzcy5jb20v&tag=3″ /></a></code>
Keterangan:
- Image source dari gambar pertama berasal dari whos.amung.us yang merekam jejak pengunjung di blog annunaki. gambar tsb saya beri link ke halaman ini. lebar gambarnya kira-kira 80 pixel. Image source dari gambar kedua berasal dari PRchecker info yang merekam PR dari blog ini. Gambar tsb saya berikan juga link ke halaman tutorial ini. dari lebar gambar pertama, maka saya bisa membuatnya berderet dengan menyisipkan angka 80px di kode HTML
Update:
Cara Pasang Animasi Flash sebagai Floating Images
Saya minta sobat melihat tampilan di blog Orido . Floating images di sana adalah animasi flash ! Dengan flash , tampilan floating images kita jadi lebih keren (meski waktu loading blog kita bertambah). Sobat juga dapat menampilkan floating images dengan animasi flash. Caranya sbb:
- tetapkan di mana animasi flash-nya akan ditampilkan, apakah di atas kiri, bawah kiri, atas kanan atau bawah kanan.
- cari animasi flash yang ingin sobat tampilkan. di Blog orido ada banyak animasi flash yang bagus. ada yang bernuansa islami atau bernuansa nasionalis. Klik disini untuk melihat daftar animasi flash-nya.
- Saya ambil contoh animasi flash ” Jam Garuda Pancasila” . Tampilannya seperti ini :
- Kode HTML dari animasi flash ” Garuda Pancasila ” adalah: Klik disini
- Saya akan menempatkan jam Garuda Pancasila tsb di atas kanan blog saya. Kode HTML-nya setelah digabung dengan kode HTML Floating Images menjadi: Klik disini
- Bang Red… gue pengen ada ‘spiderman’ di pojok atas kiri blog gue kayak di blog Orido itu. Caranya gimana? Klik disini sob !
- Bang Red… gue mau ada jam digital di pojok kiri atas blog gue, sama kayak punyamu. gimana caranya bang? Aduh nak nak… kamu ini maunya buanyaaaaak banget seeehh
klik disini ! - Tambahan: semua floating images dapat ditempatkan dalam 1 widget text.
- Ini adalah hasil coba-coba saya sendiri dan ternyata berhasil
Silahkan sobat eksperimen di blog sendiri .
Semoga postingan ini bermanfaat !
courtesy of bootingskoblog.wordpress.com dengan sedikit penyesuaian
Recent Posts :














kalo posisi ditengah-tengah bawah tinggal rubah code nya jadi bottom-center ato gmana kang?
jadi masbro mau psang pas di tengah bawah? kalo gitu bisa pake kode bawah kiri/kanan trus angkanya dikira-kira aja
posisi tengah bawah ya? pake aja kode untuk posisi bawah kiri/kanan lalu diotak atik angkanya masbro sehingga pas ada ditengah-tengah
saya coba dech………
Permisi bang red..saya nitip link satu ya http://lombokdihati.wordpress.com/2011/07/07/cara-mudah-pasang-flash-banner-swf-pada-widget-wordpress-com/
sipppp
sip.. makasi tutorialnya.. bermanfaat beud..
tutorial-nya bermanfaat.. makasi..
broder..maunya pasang float yang ber-link..dah copy dengan benar. tapi abis disimpen,Href-nya sampe target blank ilang..image-nya engga..
Kalo aku masukin ini =
jadinya =
yang artinya adalaaahh..jeng jeng jeng trek tek dung dung…GAGAL..hahahahahaha sediihh… bangeettt..
mohon bantuan dari master..
mampir ya..
Mau nanya nih gan…cara pasang banner kayak dibawah widget translator blog agan ni gmna caranya ya??????msih newbie nih…mohon pencerahannya,,mksih
yg itu dibikinin teman, saya tinggal upload aja kode htmlnya ke blog ini. itu kan flash animation dan saya gak tahu bagaimana cara buatnya sob
nah ini baru lengkap om,beberapa blog saya kunjungi cuma sekedar gambar saja untuk linknya tidak ada…terimakasih banyak om semoga semakin sukses dan tetap sehat.amin
sama-sama bro
makasih mas tutorialnya
sangat bermanfaat bagi saya yang baru ngeblog
Saya sdh coba..diblogdetik.com…..kok secara otomatis…
html nya berubah…dia tdk bisa floating image..yg muncul hanya source imagenya saja..
tutorial ini memang untuk blog wp.com bro
Terimakasih banget..nona eda atas informasinya….
mo tanya nih…kok kamu bisa masang file flash di blog…??
boleh minta resepnya….??
gimana cara ngebuat text scroll diblog….?
Kamu baiikkk dech…
(sori yach blom kenal..udeh nanya2.. maklum..menurutku …blog kamu paling kereenn)
skali lagi trimmm’s
tuh edda… ada yg nanyain tuhhh
manstrabbbb Boss…
TQ banget ilmunya….
sama sama bro
thhhhhhhhhhhhhhaaaaaaaaaaaaaaaaaaaaannnnnnnnnnnnnnkkkkkkkkkkkkkkkkssssssssssssss………….. juragan annunaki..
Wah mantabs triknya, thanks banget
semoga berguna
bos cara menambahkan jam spt di atas gimana bos???
sudah saya tambajlan link download di tutorial artikel ini sob
cara membuat jam seperti di atas gmana bozsblmnya tanks…
http://annunaki.wordpress.com/2010/10/05/cara-pasang-floating-images-di-blog-wordpress/
nice share mas..
terimakasih juga sudah di link kan widget animasi flash saya..
*hmmm.. floating image yang ada disini boleh juga ide nya..*
wuuuiiiih manteep bang,, ntar gw coba dah
coba ach….
silahkan dicoba
haturnuhun dulur!
saya langsung coba!
maksudnya code tersebut digabung dalam 1 widget txt begitu ya mas?
bisa digabung dalam 1 widget
okeh bang red,
di coba bang…
wah…mantap banget nie, ternyata gampang toh hehehe
langsung coba praktek…
ok mas bro, semoga terbantu
pengen cobain,ah…
Nice share kang, dicoba ah..thanks.
Heheh itu gambar orang yang duduk bersila di langit juga lucu
Thanx infonya mas red nanti mau nyoba juga deh hehe
sillahkan bro.. nanti aku lihat di blogmu yah
minta page nya … minta pagenya….
gak butuh banget seh, tapi pas liat, eh bagus juga … jadi kepengen,,,
Gambarnya juga bisa ditambahin link Bang Red. Caranya:
itu contoh saja. seperti floating image di blog saya yang pojok kanan atas.
okay makasih prend. segera saya praktekkan!
sip bro. sudah saya masukkan jadi tutorial di postingan ini agar diketahui juga sama narablog wordpress lainnya
sip sip sip
langsung praktek
selalu keren dan menarik postmu
salam hangat dari blue
posting2 blue juga kereeeennnn . salam sukses bro!
keren bozz, dicoba dulu yak..
silahkan mas bro
wah,,,
mau coba…y mas…
mantap …
kayaknya ini salah satu cara untuk mempermudah pengunjung menuju link2 tertentu.. :0(
iya mas bro..
Trims tipsY gan…,oke banget nih
, salam kenal
wahh.. nice info..
tapi bikin berat nggk ya?? soalnya di blog saya udah ada lagu..
float images gak bikin berat kok
terimakasih bang mas, ni mau tak coba praktekkan…
wahhh kali ini tips nya maknyoss ya bang, pengen nyobain ah…
silahkan dicoba neng tari
tips yang keren Bang Red…
langsung praktek Bang..
salam sukses selalu.
sedj
di wordpress.org bisakah ?
saya punya blog wp.org tapi belum coba disana karena disana pake floating images dari plugin (tinggal install aza)
Saya selama ini memang terbersit juga ingin pasang floating images, tapi masih mikir2… makasih ya untuk sharingnya. Sapa tahu nanti mau buat juga.
terima kasih mas red ,bisa dicoba biar tampilan blognya tambah cuantik.
ajib mas bro! semgoa blog mas jadi tambah ajiiibbbb
Thank ya bro atas informasinya, semoga dapat bermanfaat.
Dengan Mengatasi Permasalahan Yang Kecil; Maka kita Dapat Mengatasi Permasalahan Yang Besar.
Sukses selalu.
Salam~~~~”Ejawantah’s Blog”
klo aku mo pasang floating image di sudut blogku, kira2 pantasnya gambar apaan yach buat menghadang para pengunjung?… boleh minta sarannya kang?… hehehe
mas bro kan punya blog wp.org, jadi bisa pasang plugin macam maxblogpress stripe-ad. dia berbentuk banner yg melintang di header. bisa dijadikan link atau text banner saja. ini link downloadnya: http://www.maxblogpress.com/plugins/msa/
jadi gitu caranya. cara masang Floating Images di blogspot tahu, tapi ane yg di wordpress nggak tau.
Terimakasih atas infonya mas.
alhamdulillah, selalu dapat ilmu baru kalau datang mertamu kesini
terimakasih ya Red , krn telah sudi berbagi
salam
langsung coba ah … makasih, kak red…
wah, makasih infonya
terus bagi2 ilmu ya!
hahaha
lagi2 dibilang narsis
hahaha biar bisa ngasih internal link ke blog sendiri