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.
Biru : ganti dengan gambar sesuai selera anda.
Selamat mencoba...
Untuk cara memasangnya, silakan login ke akun blogspot anda. Klik Tata Letak >> Tambahkan Gadget, lalu pilih HTML/JavaScript. Setelah itu masukkan kode berikut ini.
Merah : silakan ganti dengan URL link sesuai keinginan.
<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>
Biru : ganti dengan gambar sesuai selera anda.
Selamat mencoba...