Header

Cara Membuat Buku Tamu Melayang Di Blog

Posted by : Admin On 09 January 2013 42 comments

Buku tamu ato kalo gw bilang lebih tepatnya chat box banyak di pake di blog. Fungsinya tentu buat ngemudahin pengunjung chat sama pengunjung laennya ato sama yang punya blog. Juga bisa buat absen pengunjung setia blog loe gan. Kalo buku tamu di pasang di sidebar bakal ngabisin tempat gan, jadi bagusnya loe pasang buku tamu melayang di blog.


Buku tamu melayang yang keliatan cuma tabnya doank jadi kalo di klik baru muncul chat boxnya gan. Loe ada niat pasang buku tamu melayang di blog gan? Kalo ada gw bakal share cara membuat buku tamu melayang di blog buat loe gan.

Silahkan langsung disimak gan, gak pake edit HTML tinggal nambahin widget di blog aja gampang banget.



Cara Membuat Buku Tamu Melayang Di Blog



  • Yang pertama loe harus punya kode chat box gan, cara dapetinya gampang loe tinggal registrasi di situs yang nyediain chat box gratisan. Loe bisa daftar di chatWING ato CBOX gan. Kalo mau di situs laen juga boleh sesuai selera loe aja gan. Tapi gw rekomen di chatWING karena tampilannya keren, bisa login pake FB ato Twitter dan loadingnya super cepet gan.
  • Kalo udah dapet kode chat boxnya, sekarang loe masuk Blogger terus pilih Layout dan klik Add a Gadget lalu tambahin HTML/Javascript. Lalu tinggal di copy kode di bawah ini gan dan pastein di kotak kosong HTML/Javascript tadi tapi jangan di save dulu gan.


<style type="text/css">
#scgb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #scgb{position:relative;}
.scgbtab{
height:100px;
width:10px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBt0oWsqgeOuJn6UCeIkncN_3CJdyStHr_hph7RPNDi6zUnKKRKlas3DIlv6Gm75Ij8AKv2MH3H3xMOJrNVL9QDCx3adl-bCJkcUrDramnboVYt2OK1aXn5B7v1V9GMAqcbjUVAZAHWeJb/s1600/chat+pink.png') no-repeat;
}
.scgbcontent{
float:left;
border:2px solid #FF00CC;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var scgb = document.getElementById("scgb");
var w = scgb.offsetWidth;
scgb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
scgb.opened = !scgb.opened;
}
function moveGB(x0, xf){
var scgb = document.getElementById("scgb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
scgb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="scgb">
<div class="scgbtab" onclick="showHideGB()"> </div>
<div class="scgbcontent">

Paste Kode Chat Boxnya Disini Gan

<div style="text-align:right">
<a href="http://seociyus.blogspot.com/2013/01/cara-membuat-buku-tamu-melayang-di-blog.html" target="_blank">[get this widget]</a> <a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var scgb = document.getElementById("scgb");
scgb.style.right = (30-scgb.offsetWidth).toString() + "px";
</script>


  • Sekarang tinggal ngedit gan. Pertama pastein kode chat box loe di tempat yang udah ditentuin gan. Terus buat top:100px; itu buat ngatur posisinya, semakin gede nialinya semakin kebawah chat boxnya gan.
  • Lalu buat background:url itu buat ganti tabnya gan silahkan diganti mau pake warna apa. Ni gw sediain banyak pilihan biar loe puas soalnya kebanyakan tutorial di blog laen pake tab warna hijau bosen ya gak gan.



1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP03l3ABm7esJP4JIyxXl1AKk1Fz8ol1AUdB1pwlOIt6TaRrKx_ukcgOThB3Uvka7og3uh6fiadk7rVReXnPLoKJ-C9rTQxjREeqHGgBCLRWsIe_213aEgYct4S9hOt-BiJAPsh6UT-I1J/s1600/chat+merah.png


2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwPrfuOzIHtY5-y8HVe94tfIZaEcJ15k-6VF0lDgdLy9bdrDYGypVlMNZAf3mFYjvqpcqWMo1HjCZYqIJp6uFSu63dejRm2nKBmBjPXm3UQHOgCn8dFruHNzY5HH8cA97EHbrLs1R9u_eY/s1600/chat+kuning.png


3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4ubooKFBaWnfdfjRQzcTZvC8bgdOnVaOXGL4tIYKSgaHxH4l0DzyuJWqbPk6cAxt8hEUyx0QdYwClyz5Zjy5D-0yoO_dUajCvYxZyb0LNNyeuxrCDGjR9rAY9ztk7bQr9ugOMd7Cvcx-/s1600/chat+merah+muda.png


4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisH-Rzf5tlnt9UGsrpuRNoRx8f36y0m70mFOX9y8t4AS3LhvXua2Q1Ti-wAFLZbbgkXV8m2l9yVsdkcutBWlrIG_d9yJ5CoR-NFkTQrBIeRzKuNLe5H9JiTA7wI1ip9SCdYobJanSK0h8C/s1600/chat+orange.png


5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBt0oWsqgeOuJn6UCeIkncN_3CJdyStHr_hph7RPNDi6zUnKKRKlas3DIlv6Gm75Ij8AKv2MH3H3xMOJrNVL9QDCx3adl-bCJkcUrDramnboVYt2OK1aXn5B7v1V9GMAqcbjUVAZAHWeJb/s1600/chat+pink.png


6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObDkNEiEiJ5DzrXmIUsEcMJL_MOiJVho4aqkF7XNcnFN-9Zjp9gMz6kvjnvELQgjJYndhKkPw6zImqzRcgFyxq2sJ6ND8IZcosixMGSQ0aeRxtJi7eHyMa7nK48rqAJxnxoX9zQqYlWxR/s1600/chat+ungu.png


7. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4j9_YZ1z10wxmBJkjv1rTInW9Lua1NNt6Gh3oQrXPqPKXU-r7hm7DIPCyjObLcWnuwVCDrMXjyJpcwoV0LeTy_MNWrVyrSw1i9s9YZOVuhHqgJeVdJXvtwjv3qdjpIKN1MrbMFWezMdiC/s1600/chat+biru.png




1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhqX9tBtqs-E_6pzr0a-xwisvjtQujj-KCZLuIJxCsMdZTf-9T0DzPjmMvEKr4K7uOQNhNAhNnGU-70WwCP7JAaP0hYPO5UTbZAs6T2PfaTIicYfZXCZTuUdM5nDtXaMAGogoAYrHyuLoB/s1600/buku+tamu+orange.png


2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEPOY4hzdy-2VNxwBX4DfT1B205hhJqATFZU8M008WpSAcRgaKRW5LvDla2keFXp6FPrOKespekJnEwr_LIHbPpjQaiwuyRXr8ZaQpTGlmCuxUFEbP-PmpyLYt8V-CSaaVvEXNs2FKcNz/s1600/buku+tamu+kuning.png


3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibaT99LdapOwgHLp0lv_FS9YoJhTuXHhe4SiDB3l0L4qwPJoUuF7DpSsNOkJDAd4acjOeeP-zjB-VJg9USK_NSVMzvF3t7fK51L-kYqAH2qNg1DMYixb8wcjsvCXZE5PJSvjiXaji0nD0-/s1600/buku+tamu+merah+muda.png


4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDpF59cd4-38A1wha0UI8KeSna7Pf-JL7z1LhJycRoc4aCsdWYQN43DP61z3NHvXOY1GLWgLUruB1dP7GjJ0Q7ejvk6mbWq-BPBjFTwqZUQYYVyHHxRqTZ_RBa8UpJO7wiC3EDZ4aVLfn/s1600/buku+tamu+merah.png


5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuBLzjnSoDOf-tC-wN-IFuZI-BMe19T5Rkst0bd6sIhXE-oedNna7j7cXhupsPMeAm60Ph0boQNfB159Z_rhEPhLDS7jDbqeCd3LAo_FxAj7AdPkQRzIxYTY8kim1silkoRR-o-SBNvCbV/s1600/buku+tamu+ungu.png


6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCvpkKnEWh3Gm0AC1HtkUfQ5uCFGyJtoONSJuvReWnN8Gcw-bv2ADCW7Sy63FLi-rncl32n2uahdDsiwX_qKvZ9K0vWUw8vdN0kE1MpJaSEq6-6rQ0_lJoGxUm-v6l2sjYrHssWw8Ms7-K/s1600/buku+tamu+pink.png


7.  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr4ZUFe0YxDDUC5jb9eQB1kl0KnCNzTEXJRsFZxJoXIy2S6dcDq2lS1Afa3vplxPoIbiPSdzEY7FBsNt9nl1jYu-ClfeGA3D-mIgCGCenQJ4Y5TfZIlZ7nMoJ893iq22JyzeyjUZqCPRK3/s1600/buku+tamu+biru.png


Kalo udah diganti tabnya tinggal di Save aja gan, beres sekarang blog loe udah ada buku tamu melayang atau chat boxnya gan. Buat border sama background content loe tinggal ganti aja warnanya biar sesuai sama warna tab dan chat boxnya, buat kode warnanya loe cari di kode warna HTML gan.


Sekian dulu yang bisa gw share semoga bermanfaat buat loe yang mau pasang buku tamu melayang di blog. Jangan lupa juga absen dengan ninggalin komentar dibawah gan.

» Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.

URL :

HTML link kode :

» Luangin waktu 5 detik donk gan buat share postingan ini.

Mau Dapet Updates Gan!

Ikuti SEO Ciyus

42 comments:

  1. Thanks sharingnya, gan!
    Salam kenal...kalau sempat mampir sekalian gabung dengan teman2 lain yang sudah submit di Direktori Weblog Indonesia :)
    Tq.

    ReplyDelete
    Replies
    1. Thanks juga udah komen gan.

      Salam kenal balik, direktori weblognya keren.

      Untuk saat ini gw blm bisa gabung, sorry ya gan jangan gedeg. :)

      Delete
  2. Makasih uda share tipsnya cara membuat buku tamu melayang. mantap bro.. :d

    ReplyDelete
  3. kodenya yg mana ntu gan ? ane kurang faham :) hehehe

    ReplyDelete
  4. Thanks info Cara Membuat Buku Tamu bermanfaat sekali,...

    ReplyDelete
  5. cara dapat kode chat box dimana gan

    ReplyDelete
    Replies
    1. daftar dulu di chatWING atau CBOX itu kan ada linknya di atas gan,.

      masih bnyak juga website yg nyediain chtbox grtisan, search aj d google gan,. :l

      smoga brmnfaat,.

      Delete
  6. Thanks gan info nya ..
    Mampir gan kalo ada waktu :d

    ReplyDelete
  7. bos maaf ane awam banget neeh. kode seperti apa, bisa di share disini atau apakah akan dikirimvia email :x

    ReplyDelete
  8. ko g muncul y di blog ku gambar kayak gambar diatas yg ada tulisan buku tamu :-( bingung

    ReplyDelete
  9. ko g bs y....mkn aku yg bego hu hu hu hu...g bs melayang layang :-( knp y?

    ReplyDelete
  10. Halo saya Mau Nanya Kode nya Apa Y Sya dah daftar Tapi belom dpat

    ReplyDelete
  11. thanks infonya. masih pemula, ini yang saya cari, kalau sempat mampir ke blog ane ya. http://sevenchristian.blogspot.com. Salam kenal

    ReplyDelete
  12. bagus gan, ane copy kode warnanya ya! hehe ane masih pemula, kalau ada waktu mampir ke blog ane ya! :)
    ahmadfauzanalamsyah.blogspot.com

    ReplyDelete
  13. termiaksih sangat2 membantu
    kunbal rekan2 sangat ditunggu hahah
    k chemicals-sandi.blogspot.com

    ReplyDelete
  14. TERIMA KAISIH : TUTORIALNYA DAN SALAM KENAL YA,,,,,
    http://www.pogeapi.com/

    ReplyDelete
  15. kodenya yg kyak g mna sih gan? bisa kasi contoh nggak ?

    ReplyDelete
  16. Keren tutorialnya gan. saya akan coba tutorialnya oh iya gan posting juga dong Cara Membuat Buku Tamu Tersembunyi Pada Blogger biar lebih keren gitu gan....kan terlihat keren lo bisa sembunyi. ok terimakasih. jangan lupa posting ya.

    ReplyDelete
  17. nengok ah..mampir di blog baru ane gan http://adansubuh9.blogspot.com

    ReplyDelete
  18. Ijin Copas untuk ane share tks Gan

    ReplyDelete
  19. nice infonya
    mampr ke blog ane ya gan
    http://kepinpedia.blogspot.com

    ReplyDelete
  20. Keren gan artikelnya, saya harap agan bias lebih berkreasi lagi dengna artikel barunya. Oh iya gan klo bias jangan membuat artikel tutorial semua, kalo bias bikin artikel tips seperti artikel Panduan Cara Cepat Hamil, Buku Panduan Cara Cepat Hamil, Panduan Lengkap Cara Cepat Hamil, Cara Cepat Hamil, Buku Cara Cepat Hamil, Buku Cepat Hamil, Tips Cepat Hamil, Solusi Agar Cepat Mengandung dan tips – tips lainnya gan…biasanya artikel tips itu banyak yang cari dan bias meningkatkan pengunjung dari blog agan.
    Terimakasih.
    Semoga komentar saya bermanfaan khususnya buat admin dan pembaca setiap dari artikel ini.

    ReplyDelete
  21. bagus nih....thanks gan
    kunjung balik ya http://menjagakesehatandiri.blogspot.com/

    ReplyDelete
  22. kodenya dimana sih? setelah log in panel nya???

    ReplyDelete
  23. Saya suka tampilan materi anda.trim' smua tutorialnya

    Rukun
    Bisnisonline-terpopuler.com/?id=rkn

    ReplyDelete
  24. Trim's semua tutorialnya..gan

    Rukun
    bisnisonline-terpercaya.com/?id=rkn

    ReplyDelete
  25. Sudah aku coba pasang scriptnya dan langsung berhasil, thanks ya..!!

    ReplyDelete
  26. mantabs gan. blogs full flash template klik disini http://20-20-2020.blogspot.com/

    ReplyDelete
  27. thanks kunjungan balik kami memberikan informasi kebun murbei episode 1 silahkan disimak http://perklik-yu.blogspot.com

    ReplyDelete
  28. Tutorialnya jelas banget Gan... Trima kasih atas ilmunya

    ReplyDelete
  29. Artikel yang menarik. tas wanita http://tassepatupaloma.blogspot.com/search/label/Tas

    ReplyDelete
  30. mantap lengkap penjelasan berikut icon buku tamunya

    ReplyDelete

Yang komen spam dan komen asal ga punya otak bego

Terima Kasih

Admin SEO Ciyus

Berikutnya Sebelumnya