Chatbox Bunny Float

   Hello, peeps!

Aku sebenernya udah lama dapet tutorial ini, tapi baru sekarang kepikiran untuk nge repostnya. Thanks ya untuk Faradina! Mumumumuuuu~ Click me for live preview. Repost, retutor, recontribute? Give my url blog!

• Dashboard > Template > Cari kode <style type="text/css">
• Kemudian paste kan kode ini tepat diatas kode tadi.

<style type="text/css">

#nav {
display: block;
text-align: center;
letter-spacing: 2px;
font-family: courier new;
font-size: 12px;
color: #333333;
background-color: #ffffff;
padding: 3px;
cursor: pointer;
}
</style>




<table cellspacing="0" cellpadding="0" style="position: fixed; top: 0%; right: 0%;">
<tr>
<td style="width: 30px; background-color: transparent;"> </td>
<td style="background-color: #ffb6b6; width: 40px; height: 100px; -webkit-border-radius: 100px 100px 0px 0px; -moz-border-radius: 100px 100px 0px 0px;"> </td>
<td style="width: 50px; background-color: transparent;"> </td>
<td style="background-color: #ffb6b6; width: 40px; height: 100px; -webkit-border-radius: 100px 100px 0px 0px; -moz-border-radius: 100px 100px 0px 0px;"> </td>
<td style="width: 30px; background-color: transparent;"> </td>
</tr>
<tr>
<td style="background-color: #ffb6b6; height: 40px; -webkit-border-radius: 40px 0px 0px 0px; -moz-border-radius: 40px 0px 0px 0px;"> </td>
<td style="background-color: #ffb6b6; height: 40px; text-align: center; font-family: georgia; font-size: 100px; line-height: 15%; color: #624e44;">.</td>
<td style="width: 50px; background-color: #ffb6b6;"> </td>
<td style="background-color: #ffb6b6; height: 40px; text-align: center; font-family: georgia; font-size: 100px; line-height: 15%; color: #624e44;">.</td>
<td style="background-color: #ffb6b6; height: 40px; -webkit-border-radius: 0px 40px 0px 0px; -moz-border-radius: 0px 40px 0px 0px;"> </td>
</tr>
<tr>
<td style="background-color: #ffb6b6; height: 40px;"> </td>
<td style="background-color: #ffb6b6; height: 40px; text-align: left; font-family: courier new; font-size: 10px; line-height: 10%; color: #fd5d5d;">///</td>
<td style="width: 50px; background-color: #ffb6b6; text-align: center; font-size: 50px; line-height: 10%; font-family: tahoma; color: #624e44;"> ^ </td>
<td style="background-color: #ffb6b6; height: 40px; text-align: right; font-family: courier new; font-size: 10px; line-height: 10%; color: #fd5d5d;">///</td>
<td style="background-color: #ffb6b6; height: 40px;"> </td>
</tr>
<tr>
<td style="background-color: #ffb6b6; height: 30px;"> </td>
<td colspan="3" style="background-color: #ffb6b6;"><span style="height: 30px; margin-bottom: -2px; display: block; background-color: #ffffff; -webkit-border-radius: 20px 20px 0px 0px; -moz-border-radius: 20px 20px 0px 0px; color: #ffffff; text-align: center;"> .</span></td>
<td style="background-color: #ffb6b6; height: 30px;"> </td>
</tr>
<!-- NAVIGATIONS -->
<tr>
<td style="background-color: #ffb6b6; height: 20px;"> </td>
<td colspan="3" style="background-color: #ffb6b6;"><span id="nav" onmouseover="this.style.background='#d6c3ae'" onmouseout="this.style.background='#ffffff'" onclick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML"><img src="http://media.tumblr.com/033a69ce994349a250c8fd9a87347d57/tumblr_inline_mfnj5dqLGY1qdlkyg.gif" style="width:17px;" /><img src="http://media.tumblr.com/e4e10358c8de11e2588dd47e697cc0c4/tumblr_inline_mfnj5aPvIO1qdlkyg.gif" style="width:17px;" /><img src="http://media.tumblr.com/f2440b6fee8ac831f70b390a6ae53f56/tumblr_inline_mfnj71oS7x1qdlkyg.gif" style="width:17px;" /><img src="http://media.tumblr.com/b88fa9a0747cb5bb99d038f81c646c6a/tumblr_inline_mfnj92bYFh1qdlkyg.gif" style="width:17px;" /><img src="http://media.tumblr.com/tumblr_m89tkfQpHZ1qdlkyg.gif" /></span></td>
<td style="background-color: #ffb6b6; height: 20px;"> </td>
</tr>
<tr>
<td style="background-color: #ffb6b6; height: 20px;"> </td>
<td colspan="3" style="background-color: #ffb6b6;"><span id="nav" onmouseover="this.style.background='#d6c3ae'" onmouseout="this.style.background='#ffffff'" onclick="document.getElementById('main').innerHTML=document.getElementById('affiliates').innerHTML"><!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="150" height="100" src="http://www4.cbox.ws/box/?boxid=4156425&amp;boxtag=hnazhq&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4156425" style="border:#FFFFFF 1px solid;" id="cboxmain4-4156425"></iframe></div>
<div><iframe frameborder="0" width="150" height="89" src="http://www4.cbox.ws/box/?boxid=4156425&amp;boxtag=hnazhq&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4156425" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4156425"></iframe></div></center></div>
</div>
<!-- END CBOX --></span></td>
<td style="background-color: #ffb6b6; height: 20px;"> </td>
</tr>
<tr>
<!-- END OF NAVIGATIONS -->
<tr>
<td style="background-color: #ffb6b6; height: 30px;"> </td>
<td colspan="3" style="background-color: #ffb6b6;"><span style="height: 30px; display: block; background-color: #ffffff; -webkit-border-radius: 0px 0px 20px 20px; -moz-border-radius: 0px 0px 20px 20px; color: #ffb6b6; font-family: tahoma; font-size: 20px; text-align: center;"> x </span></td>
<td style="background-color: #ffb6b6; height: 30px;"> </td>
</tr>
<tr>
<td style="background-color: #ffb6b6; height: 40px; -webkit-border-radius: 0px 0px 0px 40px; -moz-border-radius: 0px 0px 0px 40px;"> </td>
<td colspan="3" style="background-color: #ffb6b6; height: 40px;"> </td>
<td style="background-color: #ffb6b6; height: 40px; -webkit-border-radius: 0px 0px 40px 0px; -moz-border-radius: 0px 0px 40px 0px;"> </td>
<tr>
</tr></tr></tr></table>
<div id="main"></div>

• Ganti kode yang berwarna merah dengan kode chatbox mu sendiri.
• Ubah width cbox kamu menjadi 150. Di dalam kode cbox kamu itu ada dua kode height, kode height pertama kamu ganti jadi 100, dan yang kedua biarkan saja 89.
• Sebelum disave, preview dulu.
• Jika tidak ada yang error, barulah disave!

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest