Cara Membuat Cbox Otomatis Terbuka

Mungkin bagi para blogger sudah mengerti apa itu chatbox. Chatbox adalah kotak pesan yang dapat berfungsi sebagai media silaturahmi, komunikasi, bahkan traffic exchange juga bisa. Tergantung bagaimana orang itu mengelolanya. 4-jie pernah bahas tentang Cara Memasang Float Pada Chatbox kali ini kita akan buat efek yang berbeda dari tutorial sebelumnya. Chatbox dapat terbuka secara otomatis tanpa harus diklik, cukup dekatkan cursor mu ke tulisan/gambar chatbox dan secara otomatis chatbox akan terbuka.

1. Login ke dashboard blogger
2. Pilih Rancangan --> Tambah Gadget
3. Tambah Gadget HTML/Javascript dan masukkan kode berikut ini didalamnya

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i634.photobucket.com/albums/uu66/oktri_2009/o0c2d.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijwYQp12d4XoCSIBJ0BVHxL24WnelyeCoO3gvLxObntodzCoU4uiahMIZdardJAzSuFPnzdSjXj2aLLTIeHl7YpS-7M7MSgFEbI-HXUcwAxbyDRv1txpgkHvFn5_pqqbuv4hlwh03b-8RM/) no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
<--- Letakan Script Buku tamu Disini --->
<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>

</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>
4. Simpan

Selamat mencoba and keep blogging :D

Cara Memasang Float ChatBox Di Blog

Cara Memasang Float ChatBox Di Blog - Mungkin tutorial ini sudah banyak dibahas di blog lain. Namun, tutorial kali ini memang sedikit berbeda dengan tutorial memasang float chatbox pada umumnya. Kalau biasanya, float chatbox nya menampilkan efek slide (kiri - kanan) kali ini sedikit berbeda. Efek yang ditampilkan autohide alias muncul dengan efek tersembunyi. Untuk demo mungkin gag ada, karena keterbatasan ruang. Jadi, silahkan dicoba deh, dijamin gag bakalan nyeseeeel.....

1. Login ke blogger.com
2. Pilih Rancangan --> Design --> Tambah Gadget --> HTML/ Javascript
3. Salin kode berikut ini didalamnya :

<style type="text/css">
.gb_fixed{position:fixed;
top:60px;
right:-4px;
z-index:+10;
-moz-border-radius:3px;
border-radius:3px
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {display:none;
border:1.5px solid #cccccc;
-border-radius:5px;
background:#000000;
padding:10px;
padding-top:0px;
-moz-border-radius:5px;
border-radius:5px;
}
</style>

<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="http://lh4.ggpht.com/_oFXd4wU3lK8/TSQrWfZqfnI/AAAAAAAAADQ/OzM7TygiCdM/Close.png" title="Click to Close"/></a></div>


LETAKAN KODE HTML CHATBOX ANDA

<div>
<center><blink><a href=http://4-jie.blogspot.com/2011/08/cara-memasang-float-chatbox-di-blog.html' target='_blank'>Get This Widget</a></blink>
</center></div>
<center>
</center></td></tr>
</table>
</div>
<script src="http://yourjavascript.com/21261405011/cbox-bitexp.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img style="border:0; cursor:pointer" src="http://lh4.ggpht.com/_oFXd4wU3lK8/TTe7ZFV0vII/AAAAAAAAAD4/ZFesT6A_s2c/Chatbox.png" alt="Widget By:4-JIE" />
</a></div>

4. Save

Keterangan !

Pada tulisan LETAKAN KODE HTML CHATBOX ANDA silahkan tukar dengan kode chatbox kamu masing-masing

Membuat CBOX Melayang

Setelah beberapa hari gag mosting apapun, kali ini 4-jie akan posting tentang trik membuat cbox melayang. Trik ini hanya bisa dipakai buat kamu yang memakai layanan cbox, so buat kamu yang pakai cbox beruntung, sebab dengan trik floating shoutbox ini maka ruang untuk blog kamu akan lebih luas. Untuk contoh mari dilihat terlebih dahulu :



untuk membuatnya ikuti langkah berikut ini :

• Login ke www.cbox.ws
• Jika sudah masuk pada halaman cbox, klik Publish
• Scrool sedikit kebawah, perhatikan pada step2
• Pada Step 2 Choose a variation : inline (default), silahkan kamu ganti dengan Floating
• Secara otomatis akan muncul kode dibawah nya,
  
• Salin kode tadi pada blog dengan cara klik tambah gadget
• Simpan

semoga bermanfaat 4-jie :D

Trik (Style) Penulisan Pesan di CBox

Sewaktu blogwalking ga sengaja liat salah seorang sahabat blogger memiliki efek yang berbeda pada tulisannya di Cbox. Alhasil saya pun penasaran, kok tulisannya bisa berwarna merah pulak tuh. Padahal di Cbox ga ada fasilitas tambahan layaknya ms.word yang dapat mengganti warna fontnya. saya pun cari tau tuh kemana pun. kodenya dapat dan berhasil di pake. berikut kodenya :

1. Cara membuat text miring [italic]
Tambahkan [i] di depan text dan [/i] di belakang text
contoh: [i]Italic[/i] maka hasilnya adalah "Italic"

2. Cara membuat text tebal [Bold]
Tambahkan [b] di depan text dan [/b] di belakang text
contoh: [b]Bold[/b] maka hasilnya adalah "Bold"

3. Cara membuat text bergaris bawah [Underline]
Tambahkan [u] di depan text dan [/u] di belakang text
contoh: [u]Underline[/u] maka hasilnya adalah "Underline"

4. Cara membuat text bergaris tengah [Strike]
Tambahkan [s] di depan text dan [/s] di belakang text
contoh: [s]Strike[/s] maka hasilnya adalah "Strike"

5. Cara membuat text Berjalan
Tambahkan [scroll] di depan text dan [/scroll] di belakang text
contoh: [scroll]Tulisan Bergerak Dong[/scroll]


6. Cara membuat link dengan nama sendiri
Ketikkan [url=alamat url]Tulisan Anda[/url]
contoh: [url=http://ketik-info.blogspot.com/]F A 7 R I [/url]maka hasilnya adalah "F A 7 R I"

7. Cara membuat text Berwarna
Misalnya membuat warna biru tambahkan [color=blue]di depan text dan [/color] dibelakang text. Tersedia dalam beberapa warna misalnya
blue, green, yellow, silver, red, black, pink, purple dan masih banyak lagi
Contoh: [color=blue] FA7RI [/color] maka hasil-nya adalah FA7RI

Sekian Trik (Style) Penulisan Pesan di CBox saya posting, semoga dapat berguna bagi semua nya :)