Ini merupakan salah satu permintaan dari sobat pengunjung Lora Malunk Blog, yang meminta Cara Membuat Chat Box Di Samping Blog.
Lansung saja ya menuju ke TKP.
Untuk Tutorial yang pertama adalah
1. Sobat login dulu ke akun Blogger.
2. Kemudian ke Rancangan.
3. Setelah itu sobat menambahkan Gadget, HTML/Java Scrip.
4. Masukkan / Copy Paste Code berikut ini. Kedalam HTML/Java Scrip
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbd7S_HQ7_O_pifOH1P4qCnQyRI30Bc4LKsIsZSJsAVS7WtZw6bZBKc69L-tCSv7DkbY-rRQLxtFaW_cfp7e_1QOCYfo9Dok-zrfWihG49rghFO5Wfj41qlfp9FqURQZ9Xg3RpnXxNk3h-/') 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">
<a href="http://lora-malunk.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbd7S_HQ7_O_pifOH1P4qCnQyRI30Bc4LKsIsZSJsAVS7WtZw6bZBKc69L-tCSv7DkbY-rRQLxtFaW_cfp7e_1QOCYfo9Dok-zrfWihG49rghFO5Wfj41qlfp9FqURQZ9Xg3RpnXxNk3h-/') 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 ini dengan kode buku tamu kamu --> br/>
<br/><a href="http://lora-malunk.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Catatan Akhir :
5. Sobat harus mengganti code yang ber warna merah Ganti Kode ini dengan kode ChatBox sobat dengan kode ChatBox sobat, yang sobat dapatkan dari situs terkait.
6. Sobat juga bisa mengatur posisinya, tinggal mengganti Top-nya sesuai dengan keinginan sobat.
+ komentar + 1 komentar
mantap gan infonya . aku coba ya. jangn lupa follow ya :)
Terimakasih wisnu murti atas Komentarnya di Cara Membuat Chat Box Di Samping BlogPosting Komentar
Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :
» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi
Terima Kasih .... Lora Malunk Blog