16.03
Unknown
Cara Membuat Widget Chat Box Di Samping Kanan Blog | Assalamualaikum Wr. Wb . Pada Kesempatan ini saya akan me share-kan tutorial Cara Membuat Widget Chat Box Di Samping Kanan Blog . Ok Langsung Saja kita mulai. Berikut ini adalah cara-cara nya :
1). Login dulu ke blogger.com
2). Di dashboard kalian klik Tata Letak / Layout
3). Klik Tambahkan Gadget, lalu klik add HTML/Javascript.
4). Copas ( Copy Paste) kod dibawah 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aAzCvhtQTFJtdEp7jFIFuoaiOFx2U46H3feoE5Jy6h4q40OU77oWP-ZaEtgYIs766NaGK0mlyeXZKtu4rUXW7KThYmeMiIBZqKFJ_th9JwVXimNYKF_fkNFeWzZFqjSl1XhiB4mElZc/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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="250" height="305" src="http://www7.cbox.ws/box/?boxid=761843&boxtag=82bgvx&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-761843" style="border:#DBE2ED 1px solid;" id="cboxmain7-761843"></iframe></div>
<div><iframe frameborder="0" width="250" height="75" src="http://www7.cbox.ws/box/?boxid=761843&boxtag=82bgvx&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-761843" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform7-761843"></iframe></div>
</div>
<div style="text-align: center;">
<span style="font-size: 10px;"><span style="font-family: "Trebuchet MS",sans-serif;"></span></span></div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
by :pasid share
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
5). Klik Simpan & Lihat Hasilnya.
untuk ganti gambar Tombol Chat Box nya, ikuti cara-cara dibawah ini :
1). Cari kode background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aAzCvhtQTFJtdEp7jFIFuoaiOFx2U46H3feoE5Jy6h4q40OU77oWP-ZaEtgYIs766NaGK0mlyeXZKtu4rUXW7KThYmeMiIBZqKFJ_th9JwVXimNYKF_fkNFeWzZFqjSl1XhiB4mElZc/s1600/Bukutamu6.gif') .
2). Lalu Kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aAzCvhtQTFJtdEp7jFIFuoaiOFx2U46H3feoE5Jy6h4q40OU77oWP-ZaEtgYIs766NaGK0mlyeXZKtu4rUXW7KThYmeMiIBZqKFJ_th9JwVXimNYKF_fkNFeWzZFqjSl1XhiB4mElZc/s1600/Bukutamu6.gif , ganti dengan kode-kode dibawah ini :
Url Gambar Lainya:
 | https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtn-A0V_N8LmdO5gVQWsBMC5yTTI4i16xX7uKJwxDWuACMQwUUxtoDrItuUWv8_Adg0OhRYPQkuo1vxfn42IZPGXHQgph6050mFgWC74dmMyjm6sspe3-awuTz0dg_1yyvBEub6CXoFI/s1600/Chatbox.png |
 | https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTEDHDAds0qvQQzqgcxXlTr49pTk47eL8KNqkJSoCjzBgUBFLyr6nWKUe6olOCXpq2H45wlGUfUWHQNk4pPIyJQv_qtHshuvuLNyLKGvNyrtzsAzMXz0_cx0xEClCs5u0yPy0AUiUZNSw/s1600/Bukutamu3.png |
 | https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdKYIjDl5GUxBoVIXn2iX7dqJc_JgC6zw275uvFe5jLKu8JOGUOzth5sr4SDOFYccwmSYTB6Vj6a3W2KLkgBEJKtpodKgRpHcTrWPanw-lZvfkR-5_wXSsokuXTvZ04GRxm09IgIjiw-I/s1600/bukutamu2.gif |
 | https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7EVfzGHVUZGqMJfRIElHC8kydsbd2vtISkMDnPbeRZ5yfGpd1jSiVSME1nTX6HREnQhf9P0EFaGdvRyXUiG8INl1ru4E7VLmllpMhj7RcKb9QfyBIWPWH6IEt1MVxf9horlrVVqUYweY/s1600/bukutamu5.png |
 | https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB1ZqXBqpwT7wIaHPtFMA2MT4RBVg6oGGHVhgkyIbRAK3ZuLGMWzjuHsbhqscP6jzBQ_Lh7mxlfk_Ohc9Olw9xjiI0zuQaf3oz4apdIZtyRyTv1J12Z2aWQoMGsXDLunjbdpo4aFKRrp4/s1600/2131wkl.png |
 | https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqo8CVhMib0yXJKeIG3fVpk2DYI5YDYiz-wj1Z0D89TS5z1ddgnmikE_WX_HbPlW2ulEgb0xDQq7AJ-ZGYT-6cyD1885ks9h3Un6WqVJhoqQE27JyV5jf1PzBNak8_qZVOCBLeGl5rBhs/s1600/bukutamu4.png |
 | https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkk7ru-KXeJTnzmk3coy_XFN4RO6HNY7BacCPSkT5c-ExKwUHtuJM3pX0dex2sO2DyalPYQ1o_V9jMAaWWvoD7aE4fd9x3ihHabwyCsaTxpkhWE1jdKiR6bW9FqnREqBc6Z57sZaOdTS0/s1600/BukuTamu1.png |
Sobat tinggal pilih mana yang sobat suka. Jika selesai lihat hasilnya, semoga info ini bermanfaat dan mudah-mudahan berhasil.
Popular Posts
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtn-A0V_N8LmdO5gVQWsBMC5yTTI4i16xX7uKJwxDWuACMQwUUxtoDrItuUWv8_Adg0OhRYPQkuo1vxfn42IZPGXHQgph6050mFgWC74dmMyjm6sspe3-awuTz0dg_1yyvBEub6CXoFI/s1600/Chatbox.png |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTEDHDAds0qvQQzqgcxXlTr49pTk47eL8KNqkJSoCjzBgUBFLyr6nWKUe6olOCXpq2H45wlGUfUWHQNk4pPIyJQv_qtHshuvuLNyLKGvNyrtzsAzMXz0_cx0xEClCs5u0yPy0AUiUZNSw/s1600/Bukutamu3.png |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdKYIjDl5GUxBoVIXn2iX7dqJc_JgC6zw275uvFe5jLKu8JOGUOzth5sr4SDOFYccwmSYTB6Vj6a3W2KLkgBEJKtpodKgRpHcTrWPanw-lZvfkR-5_wXSsokuXTvZ04GRxm09IgIjiw-I/s1600/bukutamu2.gif |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7EVfzGHVUZGqMJfRIElHC8kydsbd2vtISkMDnPbeRZ5yfGpd1jSiVSME1nTX6HREnQhf9P0EFaGdvRyXUiG8INl1ru4E7VLmllpMhj7RcKb9QfyBIWPWH6IEt1MVxf9horlrVVqUYweY/s1600/bukutamu5.png |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB1ZqXBqpwT7wIaHPtFMA2MT4RBVg6oGGHVhgkyIbRAK3ZuLGMWzjuHsbhqscP6jzBQ_Lh7mxlfk_Ohc9Olw9xjiI0zuQaf3oz4apdIZtyRyTv1J12Z2aWQoMGsXDLunjbdpo4aFKRrp4/s1600/2131wkl.png |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqo8CVhMib0yXJKeIG3fVpk2DYI5YDYiz-wj1Z0D89TS5z1ddgnmikE_WX_HbPlW2ulEgb0xDQq7AJ-ZGYT-6cyD1885ks9h3Un6WqVJhoqQE27JyV5jf1PzBNak8_qZVOCBLeGl5rBhs/s1600/bukutamu4.png |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkk7ru-KXeJTnzmk3coy_XFN4RO6HNY7BacCPSkT5c-ExKwUHtuJM3pX0dex2sO2DyalPYQ1o_V9jMAaWWvoD7aE4fd9x3ihHabwyCsaTxpkhWE1jdKiR6bW9FqnREqBc6Z57sZaOdTS0/s1600/BukuTamu1.png |
kalian tinggal pilih mana yang kalian suka.
3). Klik Simpan & Lihat Hasilnya
Catatan :Kode Yang Berwarna Merah ganti dengan kode Chatbox yang punya kalian
Sekian dulu dari saya, semoga info ini bermanfaat dan mudah-mudahan berhasil.
Wassalamualaikum Wr.WB
source : http://sasaha33.blogspot.com/
Posted in: Tips and Trik
0 komentar:
Poskan Komentar