Cara Pasang Floating Images di Blog WordPress

Cara Pasang Floating Images di Blog WordPress

5 Oktober 2010 Tinggalkan komentar Go to comments

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)

<a style=”display:scroll;position:fixed;bottom:0;left:0;” href=”URL link yg akan dituju” target=”_blank”><img src="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)

<a style=”display:scroll;position:fixed;top:0;left:0;” href=”URL link yg akan dituju” target=”_blank”><img src="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&amp;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 :

• [Download] Simulasi Mak Erot 3D Untuk Pasutri!


• [unduh] Percaya Diri dan Jadilah Alpha Male!


• Razia Video Game Anak Anda!


• [unduh] Cara Menjadi Percaya Diri dengan Berafirmasi!


• Tidak Percaya Diri? Reshape Your Body!

Posted in: seputar wordpress