/ / Cara Membuat Widget Chat Box Di Samping Kanan Untuk Blogger

Cara Membuat Widget Chat Box Di Samping Kanan Untuk Blogger

21.47

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6cXho3BAB4xzcmHbJ9b8Qj62P8ndx2djSy4axl5YTnpASzCtqLb5zPPtH3PTnvcfXMv54Byf7Ihe1btbaD-AkC3BwMYhks-my5vdYn8IfLQ1RGcMnsYTSYoZF9rC3fIe2b9-OM1hDXM/s320/logo_cbox.jpg Pada Kesempatan ini saya akan me share-kan tutorial Cara Membuat Widget Chat Box Di Samping Kanan Untuk Pengguna Bloger . 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/AVvXsEgF7ywLDHGL7b7LQtGWD8GGnE8aDTNWs7wVuTTDlzWCwWR9onQlxgh0m9Kr1bmnaxXGwC_1wfiTz3FlwZCfo9AIUh0JsJo7F5IQQLrI6nmvlJi3B-oO7W2Z3pft7ZyMZsU1GvkLcAMEams/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&amp;boxtag=82bgvx&amp;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&amp;boxtag=82bgvx&amp;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()">
SumberUangQu
</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/AVvXsEgF7ywLDHGL7b7LQtGWD8GGnE8aDTNWs7wVuTTDlzWCwWR9onQlxgh0m9Kr1bmnaxXGwC_1wfiTz3FlwZCfo9AIUh0JsJo7F5IQQLrI6nmvlJi3B-oO7W2Z3pft7ZyMZsU1GvkLcAMEams/s1600/Bukutamu6.gif') .

2). Lalu Kode  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF7ywLDHGL7b7LQtGWD8GGnE8aDTNWs7wVuTTDlzWCwWR9onQlxgh0m9Kr1bmnaxXGwC_1wfiTz3FlwZCfo9AIUh0JsJo7F5IQQLrI6nmvlJi3B-oO7W2Z3pft7ZyMZsU1GvkLcAMEams/s1600/Bukutamu6.gif , ganti dengan kode-kode dibawah ini :
Url Gambar Lainya:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_tcPEfM7krecE3EXA0sPg7p3QEVY8HRfShrSziWN3fpEVJVduwV586PYJ2ONoccp0JJ9MbYXI8cltCCJRdRKg7UZHGFCz-F0OwIWQqH3BlqYT-Wxy0AJpaTdKLS8EK17tfPXCd32AEeA/s1600/Chatbox.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV4fJJE4V2bq32Pm3Xd56tMAT-1bf8Te-2l15R7o-jZ8Be9ayGxTHHKNPfjc953cjmBPJmV8btqUX8aixp8PA4BmmbtbCCf9u290V4Vfp5pQVvjStTMBGzpKUTzOncfNwDNjZmvNUYM1I/s1600/Bukutamu3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQDAUA7Z8gDo3ECpu0z9zpNVqyFWz4TezMPHWgxtGs5bYzJwSngslnKVsbNRUBcnCjNTIvymOFK1GNLkHT7SZPfk4QxcrIWmHyIC9B3cgQ1-4X0Fnql1qoRR9uUkQO5FDwYATlqynylY/s1600/bukutamu2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoXS6mkRRmo8CEjh4peEStx68p8SMTGVNusP48EGB_kxLrjjfkUnvk6MI_Lj_7iOVxqztQNFywRC9ejSeK7fSgbPnfq2WLrqbMa68uYK7aYnmn3DRKKxlpFobdZWURwiZq0pk9qw-VRw4/s1600/bukutamu5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8tEd25aCVWId37Ja4bZaLqDg4LXoGuvX9wbyrngzLK-S9oMdVAP9Rw76GwFKbLax3OXypnkH496S-sKryj2th7ubBLoTv_J6JVkh6W1lKHmvc2LbH8ysjDjg-M5AW8bYQHcR9uPoIz0c/s1600/2131wkl.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnm1buFyERjmdp2pnbGTqQFEX7buhdwj_lwvCcfP5cHKvAYdQ0G8WbBK7jVbPeHuUSSA0AGl-FccQWZI2LRvmVZkfjEA3qNFrVu1YrJsoKFHhvD66PP-FgI5rVAOOg77XZaYuxy8CY7Q/s1600/bukutamu4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm949-8ll1CLgGEw_xllEl06wlXrOJzxJa-6odGmr9phgs9uhFdkKwu1o2yDnn8xw6Oq8NhzdA4DGOwkv8h84Yz8BGdmOWxK4jZAoaEz8YR1omBFp29_MOOfr3mVFeGqgL5fnV7MES1lo/s1600/BukuTamu1.png

Sobat tinggal pilih mana yang sobat suka. Jika selesai lihat hasilnya, semoga info ini bermanfaat dan mudah-mudahan berhasil.
 0  0 Digg0
Komentar →

0 komentar:


Poskan Komentar

◄ Posting Baru Posting Lama ►
- See more at: http://regibrader-free.blogspot.com/2013/02/cara-memasang-widget-chat-box-yang_18.html#sthash.KsMJKhoE.dpuf
Url Gambar Lainya:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_tcPEfM7krecE3EXA0sPg7p3QEVY8HRfShrSziWN3fpEVJVduwV586PYJ2ONoccp0JJ9MbYXI8cltCCJRdRKg7UZHGFCz-F0OwIWQqH3BlqYT-Wxy0AJpaTdKLS8EK17tfPXCd32AEeA/s1600/Chatbox.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV4fJJE4V2bq32Pm3Xd56tMAT-1bf8Te-2l15R7o-jZ8Be9ayGxTHHKNPfjc953cjmBPJmV8btqUX8aixp8PA4BmmbtbCCf9u290V4Vfp5pQVvjStTMBGzpKUTzOncfNwDNjZmvNUYM1I/s1600/Bukutamu3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQDAUA7Z8gDo3ECpu0z9zpNVqyFWz4TezMPHWgxtGs5bYzJwSngslnKVsbNRUBcnCjNTIvymOFK1GNLkHT7SZPfk4QxcrIWmHyIC9B3cgQ1-4X0Fnql1qoRR9uUkQO5FDwYATlqynylY/s1600/bukutamu2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoXS6mkRRmo8CEjh4peEStx68p8SMTGVNusP48EGB_kxLrjjfkUnvk6MI_Lj_7iOVxqztQNFywRC9ejSeK7fSgbPnfq2WLrqbMa68uYK7aYnmn3DRKKxlpFobdZWURwiZq0pk9qw-VRw4/s1600/bukutamu5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8tEd25aCVWId37Ja4bZaLqDg4LXoGuvX9wbyrngzLK-S9oMdVAP9Rw76GwFKbLax3OXypnkH496S-sKryj2th7ubBLoTv_J6JVkh6W1lKHmvc2LbH8ysjDjg-M5AW8bYQHcR9uPoIz0c/s1600/2131wkl.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnm1buFyERjmdp2pnbGTqQFEX7buhdwj_lwvCcfP5cHKvAYdQ0G8WbBK7jVbPeHuUSSA0AGl-FccQWZI2LRvmVZkfjEA3qNFrVu1YrJsoKFHhvD66PP-FgI5rVAOOg77XZaYuxy8CY7Q/s1600/bukutamu4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm949-8ll1CLgGEw_xllEl06wlXrOJzxJa-6odGmr9phgs9uhFdkKwu1o2yDnn8xw6Oq8NhzdA4DGOwkv8h84Yz8BGdmOWxK4jZAoaEz8YR1omBFp29_MOOfr3mVFeGqgL5fnV7MES1lo/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
Share on Google Plus

About SumberUangQu

0 komentar:

Posting Komentar

PERATURAN BERKOMENTAR
1. Gunakanlah bahasa yang sopan saat berkomentar.
2. Dilarang Memasang link hidup pada saat berkomentar.
3. Dilarang SPAM !!!
4. Untuk menyisipkan catatan, gunakan [catatan].. CATATAN KAMU ...[/catatan]
5. Untuk menyisipkan gambar, gunakan [img]URL GAMBAR KAMU[/img]

Langganan: Posting Komentar ( Atom )