Pasang Chatbox Tersembunyi di Blog

 Pasang Chatbox Tersembunyi di Blog

    Waaa, Ketemu lagi dengan Ane dalam artikel yang mengenai Pasang Chatbox Tersembunyi di Blog. Sebelmunya, Ane akan bertanya tentang kabar anda, Apakah kabar anda baik-baik saja dan sehat ???, Ane berharap anda semua sehat, aminnnnn.

    Pada umumnya, Chatbox atau dikenal dengan Buku Tamu sangatlah berguna untuk website atau blog anda, Mengapa bisa begitu ?? iyalahh, hehe ^_^. Sebab dengan adanya Chatbox para tamu yang berkunjung ke website atau blog anda, dapat meninggalkan pesan atau jejak kepada anda. Jadi, pasang chatbox adalah langkah kedua dari kotak komentar. Chatbox sendiri dapat mempermudah tamu untuk meninggalkan pesan maupun hanya berkenalan tanpa meninggalkan pesan di kotak komentar.

    Mari simak sejenak tutorial pemasangan chatbox tersembunyi di blog. Pertama Ane akan mempaparkan Memasang Chatbox Tersembunyi di Sebalah Kiri Blog terlebih dahulu.

1. Masuk ke akun blog.
2. Dashboard -> Layout -> Add Gadget - HTML/JavaScript.
3. Copy code yang ada dibawah ini, Lalu letakan di HTML/JavaScript yang telah anda buka. Selanjutnya Save.

<!-- left hidden chatbox by http://speedy-indonesia-08.blogspot.com START -->

 <style> #hcl { position:fixed; top:135px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslKByBRqlAdQbtKNt6buHDweG7MWdGVfTX3qYuZKaad4TIsyjzNmsuBgMybCy1TLM2VSV2gd_EuBSfLN8xbIY2QNvgKoZYYyM2pFALK_WzCKNBGEY5NnxSWz6rRvLdHaWF3Dd4uXQw-g7/s1600/buku-4.png') no-repeat; } .hclcontent { float:left; border:4px solid #5F9EA0; background:#F5F5F5; padding:3px; } .hc-credit {font-size:9px}

 .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent">

<------Ganti tulisan ini dengan widget buku tamu anda------>

<div style="text-align: right; font-size: 10px;">

              Widget by

              <a href="http://anemhd.blogspot.com/2013/05/pasang-chatbox-tersembunyi.html">

                  Ane MHD

              </a>

          </div>

<br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->  </span> <span style="float:right"> <a href="javascript:showHidehcl()">  </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div>   <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script> <!-- left hidden chatbox by http://speedy-indonesia-08.blogspot.com END --></div>

NB : Merah : Ganti dengan code chatbox/buku tamu anda

Mudah kan caranya, pasti mudahlah bro, hehe ^_^. Selanjutnya, Ane akan mempaparkan cara memasang Chatbox Tersembunyi di Sebelah Kanan Blog. Simak bro !! ^_^

1. Masuk ke akun blog.

2. Dashboard -> Layout -> Add Gadget - HTML/JavaScript.

3. Copy code yang ada dibawah ini, Lalu letakan di HTML/JavaScript yang telah anda buka. Selanjutnya Save.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK-mOeRTHSKT2znu4TuneM2vt3qh18n0zeyO2iImHB8L59vpwvorekj3zmUCPtbGxwQM9caYeh36JsqZce5YogRSrWOp7LIR4VxIVNoa4-y_YWw_9YWokCXnm1gQjyiOkf-j1WDMvGbqs/s1600/Bukutamu6.gif') 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">

<------Ganti tulisan ini dengan widget buku tamu anda------>

<div style="text-align: right; font-size: 10px;">

              Widget by

              <a href="http://anemhd.blogspot.com/2013/05/pasang-chatbox-tersembunyi.html">

                  Ane MHD

              </a>

          </div>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

NB : Merah : Ganti dengan code chatbox/buku tamu anda

Bagaimana bro, gampang n simpel kan ?? ^_^. Yaaahhh bro, waktu Ane udah habis. Sekian dulu dalam artikel yang membahas tentang Pasang Chatbox Tersembunyi. Jikalau ada salah-salah perkataan dalam pembahasan diatas, Ane memohon maaf sebesar-besarnya.
Sekian dan Terima kasih

Pasang Chatbox Tersembunyi di Blog