Home » » Cara Membuat Dan Memasang Widget ChatBox Atau Buku Tamu Melayang Di Blog

Cara Membuat Dan Memasang Widget ChatBox Atau Buku Tamu Melayang Di Blog

Ditulis oleh Dicky Fajriansyah pada Kamis, 11 April 2013 | 20.11


Hai Sobat Dicky's | Pada kesempatan kali ini Dicky's akan share Tips Blog yang berjudul Cara Membuat Dan Memasang Widget ChatBox atau Buku Tamu Melayang Di Blog | Chatbox atau Buku Tamu merupakan widget yang berguna untuk mengobrol dengan sesama Blogger, meninggalkan jejak pesan ketika blog kita dikunjungi orang. Bagi sobat yang memasang Widget Chatbox ini Dicky's anggap sobat Pecinta Damai...!!!.

Screenshots :



Berikut Cara Membuat Dan Memasang Widget ChatBox Atau Buku Tamu Melayang Di Blog :


  • Login ke akun CBOX sobat
  • Klik Publish!


  • Copy kode yang berada di kotak debgan cara klik Copy to clipboard terus tombol keyboard CTRL+C


  • Selanjutnya Login ke Blogger, atau klik disini


  • Klik Tata Letak.


  • Klik Tambahkan Gadget



  • Pilih HTML/JavaScript


  • Pastekan/Letakkan kode CBOX tadi ke kolom HTML/JavaScript

  • Klik Siimpan dan Lihat hasilnya.


Atau Sobat bisa menggunakan kode dibawah ini :


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

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()">
 </div>
<div class="gbcontent">
<center>
Letakkan Kode CBOX sobat disini
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://dickyz-blog.blogspot.com/2013/04/cara-membuat-dan-memasang-widget.html"> widget! </a></span>
</div>
</center>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>



Note :
Text yang berwarna MERAH ganti dengan kode CBOX sobat.

Baca :
Posting kali ini adalah posting paling panjang daripada posting Dicky's Blog sebelumnya. hehehe


Sekian Tips Blog yang Dicky's share kali ini.
Semoga Bermanfaat dan Selamat Mencoba.....
Dilarang menduplikasi dan menyerbarluaskan artikel tanpa menyertakan sumbernya. Jika melanggar, berarti telah melanggar UUD 1945 No. 19 Tahun 2002 Tentang Hak Cipta dan akan dijatuhi denda.
thumbnail Title: Cara Membuat Dan Memasang Widget ChatBox Atau Buku Tamu Melayang Di Blog
Posted by:Dicky Fajriansyah
Published :2013-04-11T20:11:00-07:00
Rating: 5
Reviewer: 100 Reviews
Cara Membuat Dan Memasang Widget ChatBox Atau Buku Tamu Melayang Di Blog

0 komentar:

Posting Komentar