My own coding, don't re-post.

Preview :

Template Designer : Paste dekat Html/Javascript.

Blogskins :  Paste dekat bawah </style> .

<style>
.tito {
border-radius: 0px 15px 15px 0px;
width:10px;
padding:10px;
color:#fff;
height:120px;
margin-top:60px;
margin-left:255px;
background: #45ADA8;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

#note {
position:fixed;
border:1px dashed #aaa;
width:250px;
left:-265px;
top:200px;
height:250px;
padding:4px;
text-align:left;
background:#fff;
color:#444;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

#note:hover {
left:1px;}
</style>
<center><div id="note"><div class="tito">
c<br />h<br />a<br />t<br />b<br />o<br />x</div>
<div style="margin-top: -180px;">
you can put anything at here such as twitter update , status and bla bla bla.</div></div></center>