Download this Blogger Template by Clicking Here!

Cara Membuat Widget Floating Image

Jika ada pertanyaan apa sih floating image, silakan anda liat di pojok kiri bawah blog ini. Logo Warung Blogger yang dengan efek melayang. Selain untuk mempercantik tampilan blog, floating image juga bisa digunakan apabila sidebar blog kita sudah terisi penuh dengan widget. Selain itu, tampilannya yang terlihat unik akan membuat pengunjung tertarik mengklik gambar floating tersebut.

Untuk cara memasangnya, silakan login ke akun blogspot anda. Klik Tata Letak >> Tambahkan Gadget, lalu pilih HTML/JavaScript. Setelah itu masukkan kode berikut ini.


<style type="text/css">
#corner {
        position:fixed;
        left:10px;
        bottom:5px;

#corner img {
        height:67px;
        width:100px;
        border:1px solid #888;
        padding:1px;
        background:#aaa;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
       -o-transition:all 1.2s ease-out;
       -moz-transition:all 1.2s ease-out;
       -webkit-transition:all 1.2s ease-out;

#corner:hover img {
        z-index:99;
        background:#666666;
        border-color:#333333;
       -o-transform:rotate(360deg) scale(1.3) translate(25px,-30px);
       -moz-transform:rotate(360deg) scale(1.3) translate(25px,-30px);
       -webkit-transform:rotate(360deg) scale(1.3) translate(25px,-30px);
}

 </style>
<div id="corner">
<a href="https://www.facebook.com/groups/warung.blogger/" target="_blank" title="Warung Blogger">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBp3fIsU6QGDPraN4TxuCaesPcsAsANiSm7y88WLh1AyJGKiUWVwZ-ww7F0g8KY9Jjdxqgg0iI_x6iIshQaM0oDv27ur-0Vc3_vsWR3uNsrbAj5dGebWB7hCAXByHQpgPQy5u5ihvGqFc/s1600/warung+blogger.JPG"/></a>
</div>

Merah : silakan ganti dengan URL link sesuai keinginan.
Biru : ganti dengan gambar sesuai selera anda.

Selamat mencoba...