Chatbox Bunny Float
Hai semuanya ! Kali ini aku ingin membuat tutorial untuk all template ^.^
For Blogskins and Classic Template:
Taruh di bawah kode <html> atau </style>
For Designer Template:
Taruh di Tata Letak > Tambahkan Gadget > Add HTML/JavaScript
<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"> YOUT CBOX CODE HERE !!</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>
Klik Simpan ^.^
Src:
Faradina
Note: Width : 150px
Label: TUTORIAL
Posting Komentar