$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Tutorial Add Widget ChatBox Melayang di Blog Dengan Efek Show / Hide

Tutorial Pasang Widget ChatBox Melayang di Kanan / Kiri Blog Dengan Efek Show / Hide Content

chatbox widget
Hi Blogger, Kali ini saya mau memberikan tutorial nih bagaiaman caranya Memasang widget Chatbox Melayang di kanan, kiri , atas, bawah pada Blog dengan Efek Show / Hidecontoh Nya pada Blog saya
Sebelum kita memulai tutorial ini pastikan kamu sudah mendaftar di http://www.cbox.ws/ .
untuk tutorial mendaftar di Chatbox / Chat Blog saya rasa tidak perlu dan saya anggap kamu sudah mendaftar yah πŸ˜€
     Okay kita lanjut ajah yah , pertama silahkan kamu atur terlebih dahulu ukuran panjang dan lebar chatbox kamu sebelum kamu memasang nya di blog

- Klik Tab Look & Feel > Layout Option
chatbox widget
- Atur sesuai keinginan ajah yah 😜

Setelah mengatur ukuran Chatbox kamu sekarang kamu design dulu dah warna (font,Background,Border) pada Chatbox kamu.

untuk memilih tema kamu klik style preset , untuk merubah warna dan Fonts kamu pilih Color & Font.

Atau untuk lebih mudah nya kamu bisa mengedit Lewat CSS agar lebih mudah dalam pengeditan πŸ˜€
Klik Edit CSS untuk mengedit lewat CSS.

ini contoh CSS Chatbox di blog saya
[post_ads]
[
html,body{
scrollbar-face-color:#424242;
scrollbar-shadow-color:#424242;
scrollbar-highlight-color:#424242;
scrollbar-3dlight-color:#424242;
scrollbar-darkshadow-color:#424242;
scrollbar-track-color:#363636;
scrollbar-arrow-color:#2484F1;
scrollbar-base-color:#363636;
}
td{
font-family:Arial, sans-serif;
font-size:8pt;
color:#E5E5E5;
}
.mnbdy{
background-color:#363636;
overflow:auto;
padding:2px;
margin:0px;
}
.fmbdy{
background-color:#424242;
/*tambahkan Background URL jika ingin membuat gambar jadi background Chatbox
Backrgound:url(URL_GAMBAR) no-repeat 1PX 2PX;*/ 
/* value 1 dan 2 untuk mengatur posisi gambar*/
padding:2px;
margin:0px;
}
A:link{
text-decoration:none;
color:#2484F1;
}
A:visited{
text-decoration:none;
color:#2484F1;
}
A:active{
text-decoration:underline;
color:#12549A;
}
A:hover{
text-decoration:underline;
color:#12549A;
}
.hbtbl{
table-layout:fixed;
word-wrap:break-word;
overflow:hidden;
}
.stxt{
background-color:#363636;
color:#E5E5E5;
}
.stxt2{
background-color:#424242;
color:#A6A6A6;
}
.dtxt{
color:#666666;
font-size:7pt;
text-align:right;
}
.dtxt2{
color:#323232;
font-size:7pt;
text-align:right;
}
.pn_std{
}
.pn_reg{
}
.pn_mod{
}
.pn_adm{
}
.cfrm{
margin-bottom:0px;
}
.frmtb{
padding-left:3px;
padding-right:3px;
font-family:Arial, sans-serif;
font-size:8pt;
background-color:#424242;
border:#3D3D3D 1px solid;
color:#E5E5E5;
margin: 1px 2px 1px 2px;
}
.frmbtn{
font-family:Arial, sans-serif;
font-size:8pt;
background-color:#363636;
border:#3D3D3D 1px solid;
color:#A6A6A6;
font-weight:bold;
padding-left:3px;
padding-right:3px;
vertical-align:top;
margin: 2px 2px 2px 2px;
}
.lnk{
color:#2484F1;
}
.pic{
width:45px;
height:45px;
margin-left:-2px;
margin-right:0px;
padding-right:2px;
float:left;
}

]
  • [message]
    • ##fa-exclamation-triangle## Perhatian
      • save CSS nya bukan di Template yah melainkan di chatbox πŸ˜‰
Silahkan atur dan modifikasi CSS Chatbox sesuai selera
nah jika tampilan Chatbox sudah sesuai Selera sekarang kita tinggal memasang Nya ke dalam blog cara nya cukup mudah 😊
klik Tab Publishing 

chatbox widget

Dari gambar di atas sudah terlihat jelasπŸ˜€ tinggal kamu pilih aja Floating Button  trus Copas Dah Kode HTML nya trus pasang deh 😊 gampang kan πŸ˜€nah bagaimana cara untuk mengatur posisi Button  nya berada di kanan , kiri , bawah atau atas blog ?
cara nya simple kita hanya merubah Style pada kode HTML tersebut 😊
[post_ads_2]
[

/* ini untuk tombol Chatbox*/
<div id="cboxbutton" 

style="position: fixed; bottom: 8px; right: 16px; width: 200px; padding: 3px; text-align: center; cursor: pointer; background-color: #EDF3F7; border:#C3D7E5 1px solid;border-radius: 3px; font-family: Tahoma, sans-serif; font-size: 14px;" /*kita rubah "bottom" "Right" sesuai keinginan bisa "left" "top"*/

 onclick="togglecbox()"><b>Open Cbox</b></div>
/*ini untuk chatbox nya*/

<div id="cboxdiv" 

style="display: none; position: fixed; bottom: 48px; right: 16px; width: 200px; background: #EDF3F7; padding: 3px; line-height: 0;border:#C3D7E5 1px solid;border-radius: 3px;"
/*silahkan atur posisi chat box munculnya dimana*/
></div>
]
Sekian dulu tutorial dari saya πŸ˜€

semoga cara memasang widget Chatbox melayang di kanan / kiri blog dengan efek Show Hide ini bermanfaat yah

Update:
Bagaimana dengan Widget selain Chatbox ? misal seperti Shoutbox, Shoutmix dan lain lain
untuk Tutorial Menambahkan widget Show / Hide Chatbox Shoutbox Shoutmix YourShoutbox Dkk kamu bisa berkunjung ke artikel ini :  Tutorial Membuat Show / Hide Widget Shoutbox / Shoutmix di Blog dengan Efek slide 

COMMENTS

BLOGGER: 15
Loading...
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Tutorial Add Widget ChatBox Melayang di Blog Dengan Efek Show / Hide
Tutorial Add Widget ChatBox Melayang di Blog Dengan Efek Show / Hide
Tutorial Pasang Widget ChatBox Melayang di Kanan / Kiri Blog Dengan Efek Show / Hide Content
https://3.bp.blogspot.com/-WtBJKD-cdGE/U1zp82nww8I/AAAAAAAABZ8/G79nE-aQfvs/s1600/capture-20140427-182656.png
https://3.bp.blogspot.com/-WtBJKD-cdGE/U1zp82nww8I/AAAAAAAABZ8/G79nE-aQfvs/s72-c/capture-20140427-182656.png
BLOG X KOMO
http://www.xkomo.com/2014/04/tutorial-pasang-widget-chatbox-melayang-kirikanan-blog.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2014/04/tutorial-pasang-widget-chatbox-melayang-kirikanan-blog.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy