English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
Translate Widget by Google

Kamis, 28 Juni 2012

Membuat Gambar Melayang (Float Image) Pada Blogspot

Kalau kamu membuka-buka blog ini pasti kamu akan bertanya-tanya kenapa gambar panah ke atas dan ke bawah tetap diam sekalipun kamu menggulung layar (menarik scroll)? Nah, itulah yang dimaksud dengan gambar melayang (float image). Jadi maksud gambar melayang disini bukannya gambar yang bisa melayang kesana kemari seperti Gatotkaca, tapi gambar yang tetap diam (statis) sekalipun scroll ditarik.


Lalu apa mamfaat dari adanya float image ini dan bagaimana cara membuatnya?
Mamfaatnya selain membuat tampilan blog kamu semakin keren, juga untuk menambahkan tautan (link) pada gambar tesebut sehingga jika gambar itu diklik akan langsung ke alamat yang dijadikan tautan.

Cara membuat float image ini juga cukup mudah, kamu bisa mengikuti langkah-langkah berikut:
  • Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
  • Cari kode berikut dengan menekan Control F :
    ]]></b:skin>

  • Jika sudah ketemu, kopikan kode berikut :
    #gambar1 {
    position:fixed; _position:absolute;
     top:0px; right:0px; clip:inherit; z-index:+1000;}
  • Letakkan kode tersebut di atas ]]></b:skin>
  • Setelah itu kopikan kode berikut :
    <div id="gambar1">
    <a href="
    http://ruangsc.blogspot.com/" target="_blank" title="Tips Membuat dan Mendesain Blog">
    <img border="0" src="http://i563.photobucket.com/albums/ss76/peace_enes/kupu-kupu.gif"/></a>
    </div>
  • Letakkan kode tersebut di antara </head> dan <body>
  • Lakukan Pratinjau (Preview). Jika sudah OK baru simpan.

0 komentar:

Posting Komentar