Assalamualaikum Wr. Wb.
A.Pendahuluan
Salam sejahtera bagi kita semua .
B.Pengertian
blogger adalah sebuah layanan publis blog
C.Maksud dan tujuan
Mempercantik blogger
D.Pembahasan
Cara membuat float image ini juga cukup mudah, kamu bisa mengikuti langkah-langkah berikut:
Dari halaman Dashboard klik Tema 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.
Jika kamu ingin mengubah letak gambar, ubah saja posisinya (top dan right) di atas dengan bottom untuk gambar di bawah dan left untuk gambar sebelah kiri. Dan jika kamu ingin mengubah gambar, ganti saja alamat gambar pada src="alamat gambar" dengan alamat gambar yang kamu inginkan (Bocoran gambar: kunjungi Adiwidget).
Lalu bagaimana jika ingin float image-nya lebih dari satu? Kamu tinggal meng-kopi kode #gambar1 dst., lalu ubah menjadi gambar2. Kopikan pula kode <div id='gambar1'> dst., lalu ubah menjadi gambar2 dst.
Float image ini juga bisa kamu mamfaatkan untuk memberi perintah ke atas dan ke bawah halaman blog.
Berikut
Kupu-kupu 1
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/kupu-kupu.gif
Kupu-kupu 2
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/butterflyT.gif
Mickey Mouse
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/Mickey.gif
dah sekian kalian bisa melihat gambar melayang di sisi kiri layar anda khususnya di blogku hehehehehe.
E.Waktu
10 menitan
F.Hasil yang diharapkan
lebih cantik dari sebelumnya
G.Refensi
https://ruangsc.blogspot.com/2009/06/membuat-gambar-melayang-float-image.html
H.penutup
Sekian dan terima kasih
Wassalamualaikum Wr. Wb.
No comments:
Post a Comment