Cara membuat Cbox tersembunyi di blog

Cara membuat Cbox tersembunyi di blog

Mempercantik tampilan blog kita adalah salah satu hal yang harus dilakukan agar pengunjung blog betah baca - baca di blog kita. Nah, tutorial satu ini adalah tutorial untuk membuat chat box namun tersembunyi di sebelah kanan blog kita. Tapi sebelum membuat cboxnya tersembunyi ikuti dulu langkah - langkahnya disini. Jika sudah, ikuti langkah - langkah berikut:

1. Loginpada blogger
2. Tata Letak
3. Tambah Gadget
4. HTML/Javascript
5. Pasang kode di bawah ini
<style type="text/css"> 
    #gb { 
    position:fixed; 
    top:50px; 
    z-index:+1000; 
    } 
     
    * html  
    #gb { 
    position:relative; 
    } 
     
    .gbtab { 
    height:100px; 
    width:30px; 
    float:left; 
    cursor:pointer; 
    background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat; 
    } 
     
    .gbcontent { 
    float:left; 
    border:2px solid #A5BD51; 
    background:#F5F5F5; 
    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.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"> 
     
   -------Kode Cbox / Shoutmix / Lainnya---------
     
    </div> 
    </div> 
     
    <script type="text/javascript"> 
    var gb = document.getElementById("gb"); 
    gb.style.right = (30-gb.offsetWidth).toString() + "px"; 
    </script>
6. Simpan dengan tanpa judul

Selesai Deh...

Ket:
  • Ganti Tulisan yang berwarna merah dengan kode Cbox sobat
  • Sobat juga bisa menggunakan kode Shoutmix pada tutor ini
  • Untuk mengubah gambar tabnya, ganti tulisan berwarna biru
Cara membuat Cbox tersembunyi di blog
Writter: Reggy Zian Purnama
DMCA.com Orang pandai tau tata krama. Dilarang copy paste artikel tanpa seizin penulis!

19 comments Skip to comments

di ajarin bkin guest book kaya pnya km jga dunk ..
keren tuhh . .
newbie ne.. hihi

@rianzii: silahkan klik Disini gan..
disitu sudah ada caranya.. :D

boz cara mengganti tulisan buku tamunya gimana?

ganti tulisan berwarna biru dengan kode gambar yang ingin dijadikan sebagai tulisan buku tamu

kode chat boxnya, kalau belum daftar coba lihat disini http://blognya-reggy.blogspot.com/2011/10/cara-memasang-cbox-di-blogspot.html

Mantap om, ane mau tanya bisa ga tu Cboxnya di mouseover ga usah diklik?
mkasih om...

gan, cara ngubah tulisan buku tamu ama cara chatnya gimana, terima kasih sebelumnya

gan like dunx FP ane dengan cara mengetik name ane dan like halamannya please^^ trim's:)

BUTUH ANGKA RITUAL/JITU 2D 3D 4D SGP/HKG YG DI JAMIN MENANG 100% TEMBUS HBG KI JAYA DI 085=342=064=735 JIKA INGIN MENGUBAH NASIB thank's roomnya

http://www.maslukis.com/2016/05/tanya-jawab-tentang-bebasbayar.html

Berkomentarlah dengan baik dan sopan. Dilarang oot dari artikel diatas. Komentar yang menyertakan link aktif maupun statis termasuk promosi akan langsung kami hapus.
Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon