Pages

Jumat, 18 Mei 2012

Cara Membuat Gambar Melayang (Floating Images) Di WordPress.com


Benar apa kata para sahabat blogger, blogwalking sangat berguna sekali. Disamping bisa menambah teman dan keperluan lainnya yang berkaitan dengan SEO. Bisa juga kita mendapatkan inspirasi dari blog yang kita kunjungi tersebut. Sebagai contoh ketika saya berkunjung ditempatnya ●●●ЄЯШЇЙ●●● tidak sengaja saya tertarik dengan aksesoris di salah satu blognya. Saya pikir aksesoris tersebut hanya bisa dipasang di Blogspot atau di WordPress dengan self hosting.
Namun setelah saya coba ternyata di WordPress.com aksesoris tersebut dapat berjalan. Aksesoris yang saya maksud adalah memasang gambar yang selalu di pojok halaman. Gambar tersebut tidak akan bergerak dan tetap berada di pojok halaman walaupun kita meng-scroll halaman ke atas dan ke bawah. Cukup menarik bukan? Lumayan untuk mempercantik tampilan blog kita.
Jika rekan-rekan tertarik untuk mencobanya atau untuk sekedar mempercantik tampilan blog, caranya sangat-sangat mudah.
  1. Login ke akun WordPress.com anda.
  2. Kemudian klik [Appereance] > [Widgets].
  3. Pilih widgets “Text“.
  4. Copy dan pastekan kode dibawah ini:
    Posisi bawah-kanan:
    <div style="display:scroll;position:fixed;bottom:0;right:0;"><a href=" http://budihermanto123.blogspot.com " target="_blank">
    <img src="http://1.gravatar.com/avatar.jpg
    " />
    </a></div>
    Posisi atas-kanan:
    <div style="display:scroll;position:fixed;top:0;right:0;"><a href="http://budihermanto123.blogspot.com" terget="_blank">
    <img src="http://1.gravatar.com/avatar.jpg
    " />
    </a></div>
    Posisi bawah-kiri:
    <div style="display:scroll;position:fixed;bottom:0;left:0;"><a href=" http://budihermanto123.blogspot.com " terget="_blank">
    <img src="http://1.gravatar.com/avatar.jpg
    " />
    </a></div>
    Posisi atas-kiri:
    <div style="display:scroll;position:fixed;top:0;left:0;"><a href=" http://budihermanto123.blogspot.com " target="_blank">
    <img src="http://1.gravatar.com/avatar.jpg
    " />
    </a></div>
  5. Dan klik tombol [Save].

Keterangan:

  • Anda bisa mengganti huruf yang dicetak merah dengan URL gambar dan URL blog.
  • Trick ini tidak akan berjalan di browser IE.

0 komentar

Posting Komentar