SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Cara Membuat Elemen Melayang di Tempat

Selamat pagi kawan semua, setelah seharian menunggu Blogger Normal kembali dari adanya Maintenance yang mengakibatkan data, file dan lain sebagainya banyak yang hilang termasuk juga adanya perubahan tata letak pada template, kekecewaan dan kegembiraan silih berganti dengan keadaan ini :r  [Kalau mau marah, pada siapa wong rumah alias Domain kita numpang....ha ha ha] :@ 

Sebenarnya apa yang akan saya share-kan dengan kawan sekarang ini adalah Pernak-pernik dan Kreasi  sudah lama ingin saya sampaikan karena ada seorang kawan kita dulu bertanya [habis saya orangnya pelupa alias pikun :) ], sampai pada 2hari yang lalu baru ingat dan tertunda lagi karena itu masalah Maintenance/Perbaikan Blogger, :z yang akhirnya tadi pagi kawan kita menanyakan bagaimana cara membuat Yahoo Masseger selalu di tempat yang saya beri nama Elemen Melayang di Tempat karena letaknya selalu di tempat itu dan tidak berubah :#

Menurut Modelnya ada bermacam-macam, :O maksud saya ada yang bisa di close sekali, dua kali dan tidak bisa di close sama sekali, silahkan kawan menentukan pilihan dengan menyesesuaikan kepentingan dan keperluan kawan, maksudnya kalau ukurannya besar apalagi untuk Iklan pakai yang ada close, sedangkan untuk yang permanent dan selalu dipojok misalnya Back To Top bisa tanpa close :d 

Cara membuat Elemen melayang :

  • Masuk ke Blogger Acount dengan ID kawan
  • Pada Design template / Perancang template Klik Edit HTML
  • Copas kode berikut sebelum ]]></b:skin>
 #trik_TBB {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }
  • Selanjutnya copas kode berikut sebelum </body>
<div id='trik_TBB'> 
<div id='topcontrol' style='position: fixed; bottom: 2px; left: 5px; cursor: pointer; opacity: 1; ' title='Scroll To Top'><a href='#header' onclick='backtotop();  return false'><img border='0' src='http://3.bp.blogspot.com/-XLeYom6kXjY/Tc4PlYouDcI/AAAAAAAABa4/GUirphsIXXc/s1600/up_button.jpg'/></a></div></div>
 Khusus untuk Back To Top dll tidak bisa di Close 

Silahkan  kawan menyesesuaikan huruf - huruf yang berwarna diatas mengenai letak dan dengan image kawan kode ini tidak bisa di close.  :(
Sedangkan untuk membuat Elemen Melayang dengan model lainnya adalah sebagai berikut.
  • Saya asumsikan kawan sudah pada Design Template / Perancang Template
  • Klik Tambah Gadget terus Klik tanda + pada HTML/JavaScript
  • Copas kode berikut kedalamnya
  • Simpan template kawan
Elemen Melayang dengan Close Klik 2 kali

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
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>
LETAKKAN IMAGE / KODE IKLAN DAN LAINNYA DISINI

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

Elemen Melayang dengan Close Klik 1 kali
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
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-100;
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 1x]:.
</a>
</div>
<center>
TARUH IMAGE ATAU IKLAN KAWAN DISINI

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

Sedangkan untuk yang tanpa Close ini hasil dari Kreasi :
  • Saya asumsikan kawan sudah pada Design Template / Perancang Template
  • Klik Tambah Gadget terus Klik tanda + pada HTML/JavaScript
  • Copas kode berikut kedalamnya
  • Simpan template kawan

<div style="position: fixed; BOTTOM: 5px; LEFT:5px; cursor: pointer; opacity: 1; " title="banner">
<a href="http://www.co.cc/?id=186900" target="_blank"><img src="http://get-banner.lookup.co.cc/banner_img/cocc250_250b.gif" border="0" alt="CO.CC:Free Domain" width="125" height="125" /></a></a></div>
 Khusus untuk Back To Top dll tidak bisa di Close  
Sedangkan contoh diatas adalah Banner co.cc yang saya kecilkan, karena tak bisa di-Close agar tidak mengganggu Blog.
Penempatannya pada gadget bisa disatukan dengan gadget yang lainnya, karena template Blog modelnya berbeda-beda, kalau dipasang di gadget sendiri kemungkinan gadget akan tampil kosong. :z

14 komentar pada “Cara Membuat Elemen Melayang di Tempat”

  1. woh tiga-tiganya dibeberkan secara gamblang & jelas :@

    BalasHapus
  2. trims mas Beben sudah berkunjung dan komentar :d

    BalasHapus
  3. thnx infonya sob,sangat bermanfaat

    BalasHapus
  4. @UBC Votes
    trims kawan UBC Votes, ya mudah-mudahan bisa bermanfaat hehe :O

    BalasHapus
  5. Nice post sob,mudah dipahami ternyata.

    BalasHapus
  6. Waaah... :#
    Ilmu2 dari Mas Putu benar2 bermanfaat semuanya.
    Info yang sangat bagus Mas.
    Terima kasih banyak. :d

    BalasHapus
  7. @One Full Boxtrims kawan sudah komentar dan jangan khawatir :z saya pasti balik berkunjung

    BalasHapus
  8. @Slazh raY vaini mas RaY ada-ada saja pujiannya, kita sama-sama belajar heheh :#

    BalasHapus
  9. mau tanya mas...

    kusus yang buat iklan, saya lihat kok gak ada bedanya ya...

    trus kalo iklan biar tampil 1 kali gimana ??? kalo buka halaman lain ga muncul iklan melayang lagi..jadi muncul satu kali aja...

    sebelumnya makasih

    BalasHapus
  10. @Pian Uhuy mungkin maksud kawan biar tampil di Home page saja, sedangkan pada Fullpage agar tidak muncul, :r

    caranya ketahui dulu gadget [HTML] yang dipakai tambahkan kode berikut di bawah ]]></b:skin>
    <style type='text/css'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    #HTML?{display:none}
    </b:if>
    </style>

    BalasHapus
  11. Bukan mas...gini..

    pengunjung kan bisa datang mulai dari halaman manapun. gak harus home page...nah halaman pertama itu(bukan home page) iklan melayang muncul. nah iklan mungkin di klik/ di close...trus pengunjung membuka halaman lainnya, nah halaman k2e 2 dan seterusnya iklan gak muncul lagi...
    tapi jika pengunjung besok2nya datang ke blog lagi..halaman pertama iklan melayang muncul lagi...

    gimana caranya ???
    terima kasih sebelumnya

    BalasHapus
  12. @Pian Uhuy wah sangat susah itu kawan, tapi kalau setiap pengunjung hanya boleh 1x klik saja [khusus diWP saja] ada caranya dipostingan Kang Rohman :z

    BalasHapus
  13. bisa minta linknya kang rohman yang mas maksud ???

    kan susah ??? susah bukan berarti gak bisa kan...hehe
    nanti kalo udah bisa kirim ke e-mail ya...hhe
    uachoeng18@yahoo.com

    makasih mas...

    BalasHapus
  14. @Pian Uhuy ya susah dan rasanya di Blogspot tak mungkin, maklumlah saya saya masih newbie :z

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger