Membuat Float Image dan teks ( gambar melayang dan teks ) pada Blogger

Membuat variasi dalam blogger memang menyenangkan, salah satunya adalah membuat  Float Image ( gambar melayang ) dan teks pada Blogger. Sebenarnya caranya mudah dan sederhana, trik ini sudah banyak dimuat dalam banyak blog tapi tidak ada salahnya aku coba posting kembali agar blog ini infonya jadi lebih lengkap.

Keuntungan dari trik ini kamu bisa pakai selain sebagai variasi juga sebagai media promosi karena bisa kamu isi dengan berbagai kode script advertise selain image dan teks.

Langkah selanjutnya

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini
   

<style type="text/css">
#gb{

position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}

}

* html #gb{position:relative;}

.gbcontent{
float:right;

border:0px solid red;

background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/animation/indonesIAFLAG.gif) no-repeat ;

padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">

[Close] - [Klik 2x]

</a>
</div>

<center>

SELAMAT DATANG....!
<br />

TERIMA KASIH atas Kunjungannya .. !
<br />

Berikan saran dan kritik anda ....!
<br />

Semoga Bermanfaat..!

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Keterangan :

• kode warna merah : transparent ( kode warna background = ganti sesuai dengan kebutuhan = transparent artinya tansparant / yang dipakai warna dasar blog )
• http://i864.photobucket.com/albums/ab206/kibagus/animation/indonesIAFLAG.gif = alamat url image sebagai background teks ( ganti dengan image sesuai kebutuhan )
• kode border:0px solid red = kode border 0px = tebal tipis garis = red = kode warna = ganti sesuai kebutuhan.
• kode warna kuning tua = isi dari foat image dan teks yang akan kamu tampilkan = ganti dengan kode sript atau teks sesuai dengan kebutuhan.
• Contoh ___________
  
  • SELAMAT DATANG....!
  • TERIMA KASIH atas Kunjungannya .. !
  • Berikan saran dan kritik anda ....!
  • Semoga Bermanfaat..!
  •  Contoh ___________ ( ganti dengan kode script atau image atau teks sesuai kebutuhan )

• kode warna hijau = menu close  ( [Close] - [Klik 2x] ) yang akan muncul pada foat image dan teks bisa kamu ganti sesuai kebutuhan.
• kode warna orange =  position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000 = posisi top:0px; right:0px berarti pada pojok kanan atas silakan diganti angka 0px sesuai kebutuhan.
• kode warna aqua =  posisi image dan teks = left - center - right = ganti sesuai kebutuhan

terima kasih...
semoga bermanfaat..!