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. Sebe...

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..!

    COMMENTS

    BLOGGER: 19
    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
    Note :

    . Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
    . Terima kasih komentarnya...!
    . Semoga bermanfaat...!

    Aluminium,4,Amdal,15,Arsitektur,63,Bahan bangunan,8,Bangunan Air,2,budaya indonesia,26,Denah Rumah,22,Galeri,25,Green house,6,Info sekilas,27,Interior,1,Irigasi,2,Jembatan,3,K3 konstruksi,4,Konservasi tanah,5,Konstruksi,48,Konstruksi Beton,15,Konstruksi kayu,38,Kuda kuda Baja,1,Kuda kuda kayu,4,Kusen,4,Lingkungan,15,Masjid,11,Mebelair,2,Menu navigasi,3,Opini,13,Pemberdayaan Masyarakat,7,Pendidikan,3,Peraturan,31,Pondasi,4,Profil Kusen,4,Property,46,RAB,28,Rumah adat,21,S E O,7,Sambungan Kayu,30,Sertifikasi,12,sipil,53,SNI,22,Software,2,Tangga,3,Tips trik blogger,27,Undang undang,12,Wisata,2,
    ltr
    item
    Home Design and Ideas: Membuat Float Image dan teks ( gambar melayang dan teks ) pada Blogger
    Membuat Float Image dan teks ( gambar melayang dan teks ) pada Blogger
    http://lh5.ggpht.com/_c-XFk4OciTE/SSdkMZI0rqI/AAAAAAAABSk/CYYDb88zYqI/AddGadget_thumb2.png?imgmax=800
    http://lh5.ggpht.com/_c-XFk4OciTE/SSdkMZI0rqI/AAAAAAAABSk/CYYDb88zYqI/s72-c/AddGadget_thumb2.png?imgmax=800
    Home Design and Ideas
    https://www.hdesignideas.com/2010/04/membuat-float-image-dan-teks-gambar.html
    https://www.hdesignideas.com/
    https://www.hdesignideas.com/
    https://www.hdesignideas.com/2010/04/membuat-float-image-dan-teks-gambar.html
    true
    2215255630784927830
    UTF-8
    Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content