Berbagi Informasi, Tips, & Tutorial

Friday, 12 October 2018

membuat gambar melayang di blogger

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