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.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  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 orangeposition: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..!

    Komentar

    1. thx nih infonya, gambarnya sama ya bisa gerak2 juga klo url gambarnya diganti ??

      BalasHapus
    2. sep tutorialnya, mau coba-coba dulu...

      BalasHapus
    3. Anonim4/22/2010

      @dim untuk kode
      background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/animation/indonesIAFLAG.gif) no-repeat ;
      alamat image bisa dgn image animasi atau non animasi kalau tdk memakai image silakan diganti dengan kode berikut
      background:transparent url(#) no-repeat ;

      BalasHapus
    4. Anonim4/22/2010

      hello... hapi blogging... have a nice day! just visiting here....

      BalasHapus
    5. nanti saya coba deh...

      BalasHapus
    6. emang sih pake ini jadi bisa dipake naruh advertise...tapi yg bikin kesel tu tiap nge load pasti muncul...jadi gak bisa nyaman baca artikel jadinya...

      BalasHapus
    7. Anonim4/22/2010

      @rahad..
      makasih kritiknya....!
      gimana kalo dibikin muncul cuma di halaman utama ?
      saya kira itu tidak begitu menganggu,

      itu tdk aku isi iklan masalanya aku juga kurang sreg kalo ada iklan yg model gitu...!
      thanks ...!

      BalasHapus
    8. makasih yaw tips nya
      tapi saya mengunakan wp
      okelah kalau begitu
      :D

      BalasHapus
    9. makasih yaw
      langsung dicoba ehhehe
      tengkyu
      :D

      BalasHapus
    10. Info yang bagus sobat.. oh ya link dah lama tersimpan kok sob.. dg anchor tek : Kibagus - home design silahkan dicek

      BalasHapus
    11. oh ya banner juga dah lama tertancap dengan enjoy disini sob

      BalasHapus
    12. nanti saya coba ah.....sekalian utak atik blog, biar tambah ilmunya. thank's sob.

      BalasHapus
    13. wah keren nih idenya, bolehlah d coba

      BalasHapus
    14. kayak gunu baru namanya tutorial
      simpel padat dan mudah
      thanks broooooooooooooo
      salam kenal

      BalasHapus
    15. makasih ya kk atas ilmunya

      BalasHapus
    16. keren banget sampean Om bagus....q suka inspirasimu

      BalasHapus
    17. terimaksih atas ilmunya bro....

      BalasHapus
    18. wah keren bro,,minta copas y,,hehe

      BalasHapus
    19. boleh di coba nih, trima kasih, maf bru berkunjung. (sejuta trik blogger.

      BalasHapus

    Posting Komentar

    Note :
    . Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
    . Terima kasih komentarnya...
    . Semoga Bermanfaat...

    Berita terbaru

    Postingan populer dari blog ini

    Memahami Mutu Beton fc (Mpa) dan Mutu Beton K (kg/cm2)

    Mengenal bagian kusen pintu dan jendela kayu

    Menghitung Volume Besi per-m3 beton bertulang

    Menentukan ukuran Tangga dan Anak Tangga untuk bangunan bertingkat