8 Membuat Floating Image Atau Gambar Melayang Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Floating ImagePada kesempatan kali ini saya hanya ingin berbagi tutorial sederhana cara menambahkan floating image atau gambar melayang diblog. Disebut demikian bukan karena gambarnya bisa melayang kesana kemari, tapi gambar tersebut tetap diam (statis) sekalipun anda menarik scroll atau menggulung layar.

Adapun manfaat dari kita memasang floating image mungkin selain membuat blog kita lebih menarik, juga kita bisa menyisipkan tautan link pada gambar tersebut sehingga ketika gambar diklik akan langsung ke alamat yang dituju. Beberapa blog kadang menggunakan image welcome to my blog atau space iklan.

Nah sekarang bagaimana cara membuat floating image ini? Caranya cukup mudah. Anda bisa mengikuti langkah-langkah berikut:

  • Setelah sign ini ke akun anda, dari dashboard klik Tata Letak dan pilih edit HTML.
  • Cari kode berikut dengan menggunakan Control F ]]></b:skin>
  • Jika sudah ketemu, copykan kode berikut diatas kode ]]></b:skin>:

#gambar1 {
position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}

Note: Perhatikan tulisan berwarna biru diatas adalah posisi gambar anda nantinya. Jika anda ingin mengubah letak gambar, ubah saja posisinya (top dan right) diatas dengan bottom untuk gambar dibawah dan left untuk gambar diposisi kiri blog.

  • Setelah itu kopikan kode berikut diantara </head> dan <body> :

<div id="gambar1">
<a href="http://www.tipstrikblogging.com/" target="_blank" title="Tips Trik Blogging">
<img border="0" src="http://URL gambar anda"/></a>
</div>

Note: Perhatikan tulisan berwarna biru diatas, jika ingin mengganti link (tautan) kamu tinggal mengubah pada href=”alamat tautan” yang kamu inginkan. Demikian juga jika ingin mengubah gambar src=”Alamat/URL gambar anda”. 

  • Klik Preview atau lakukan pratinjau, Jika sudah tampil gambar melayang diblog anda baru save/simpan pekerjaan anda!

Lalu bagaimana jika ingin membuat floating imagenya lebih dari satu? Anda tinggal mengcopy kode #gambar1 dst., Lalu ganti menjadi gambar2. Copykan pula <div id='gambar1'> dst., lalu ganti menjadi gambar2 dst.

Nah demikian tutorial membuat floating image atau gambar melayang diblog kali ini, mudah bukan? Selamat mencoba!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

8 komentar :

  1. cara membuat link tempat menyimpan gambar gmn gan?

    www.catatanpendekpenulis.blogspot.com | catatan ketika iseng

    BalasHapus
    Balasan
    1. Mudah saja, anda tinggal upload gambar dari komputer anda ke tempat hosting gambar. Banyak image hosting gratis, anda search aja digoogle tapi untuk diblog blogger agr loading bs cpt pakai aja hosting image blogger (picasa). Caranya mengambil linkx, jika anda udh upload gambar pada bgn compose editor posts lihat src image pd bagian HTMLx, itulah link gbr anda. Semoga bs dimengerti dan dpt membantu. Terimaksh apresiasinya.

      Hapus
  2. sangat mantap sobat
    terima kasih sudah berbagi

    BalasHapus
  3. pengen sekali memasangnya tapi lum bisa bisa

    BalasHapus
    Balasan
    1. Mudah sekali sebanarx klu qta mau mencoba. Thanks tuk kunjungan dan apresiasinya.

      Hapus
  4. saran yang bermanfaat sob http://www.kisikisibola.com

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!