cara membuat cbox keren melayang di pinggir - Tutorial Membuat web ucoz - Book - Software - SMKN 1 Gambut
Rabu, 2016-12-07, 23:16:57
Welcome Guest | RSS

ŠӍҚЙ 1 ǤǺӍBƯҬ™
Software, Artikel, Forum, Photo, Social Network, Education, Iklan, Video, Berita, Blog.
E-Mail

Site menu
Section categories
Iklan
Iklan

Software

Main » Ad Board » Book » Tutorial Membuat web ucoz

cara membuat cbox keren melayang di pinggir
Sharing | 2012-09-15, 14:54:49
ya, banyak sudah yang pakai chat box merk CBOX, mungkin mau setiap ke blog lain kita temui. Nach bagaimana caranya membuat cbox keren melayang di sebelah kanan blog, buat aq sih ni lumayan untuk mempercepat loading blog, berikut caranya.

Silahkan siapkan kode cbox anda yang telah anda buat
Login dulu ke akun blogger kamu, klik rancangan dan tambah gatget HTML/Javascript , dan copas kode script dibawah ini






Praktek :

  • Login dulu ke blogger.
  • Pilih Rancangan kemudian klik edit HTML
  • Centang Expand Template Widget
  • Lalu cari kode widget yg akan di tampilkan pada halaman tertentu.

Bagaimana cara mencari kode widget tersebut ? kita hanya membutuhkan judul dari widget tersebut yang kita set di elemen atau kita klik edit untuk mengetahui Widget tersebut terus kasik judul. Tekan Ctrl F kemudian tuliskan judul Widget tersebut, Contoh kita mencari widget Archive


Code
<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:90px;

width:29px;

float:left;

cursor:pointer;

background:url('http://i997.photobucket.com/albums/af96/fauzan_zifa/Untitled-1-11.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:#FFFFF;

padding:2px;

}

</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.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

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

<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
Copas kode cbox yang telah kamu buat disini
<!-- END CBOX -->

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Kemudian copas kode anda di tulisan yang berwarna biru pada kode script diatas, hasilnya kira-kira seperti ini.
Code
<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:90px;

width:29px;

float:left;

cursor:pointer;

background:url('http://i997.photobucket.com/albums/af96/fauzan_zifa/Untitled-1-11.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:#FFFFF;

padding:2px;

}

</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.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

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

<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="230" src="http://www7.cbox.ws/box/?boxid=41535&amp;boxtag=6v8whj&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-415435" style="border:#000000 1px solid;" id="cboxmain7-415435"></iframe></div>
<div><iframe frameborder="0" width="200" height="70" src="http://www7.cbox.ws/box/?boxid=415435&amp;boxtag=6v8whj&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-415435" style="border:#000000 1px solid;border-top:0px" id="cboxform7-415435"></iframe></div>
</div>
<!-- END CBOX -->

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Tulisan yang warna merah itu gambar tombol popup cboxnya, silahkan anda edit sesuai yang anda inginkan. seperti apa hasilnya..? ni dibawah
Cbox ketika tertutup
Cbox ketika terbuka




Bila Terjadi kesalahan atau link Download sudah Mati, anda Bisa Hub :
: sicklon@gmail.com : Sicklon Kz : @Sicklon_kz Atau Komentar, untuk Merepair Secepatnya
Added by: sicklon |
Views: 1390 | Placed till: 2012-10-15 | Rating: 0.0/0 | |
Total comments: 0
Only registered users can add comments.
[ Registration | Login ]
Libur Puasa 2012

Pencarian :

Iklan
Wasiat Guru Sekumpul
1. Menghormati Ulama.
2. Baik Sangka Terhadap Muslimin.
3. Murah diri.
4. Manis Harta.
5. Manis Muka.
6. Jangan Menyakiti Orang.
7. Memaafkan Kesalahan Orang.
8. Jangan Bermusuh-musuhan.
9. Jangan Thoma.
10. Berpegang Kepada Allah Ta’ala kabul segala hajat.
11. Yakin Keselamatan itu ada pada yang benar.
12. Jangan merasa baik dari pada orang lain.
13. Tiap-tiap orang iri, dengki atau adu asah jangan dilayani serahkan saja pada Allah Ta’ala.
Statistics

Total online: 1
Guests: 1
Users: 0
Iklan
TibiaME - Kz

Copyright MyCorp SMK Negeri 1 Gambut © 2011 - 2016



/font>