Pasang NotePad di blog

<style>
.notepad{
border:1px solid gray;
background:#CC9966;
box-shadow: 0 0 12px #818181;
-webkit-box-shadow: 0 0 12px #818181;
-moz-box-shadow: 0 0 12px #818181;
width:280px;
padding:7px 10px;
position:absolute;
cursor:pointer;
}

.notepad h3{
margin:5px 0;
}

.notepad .close{
float:right;
font-weight:bold;
text-align:center;
display:block;

}

.notepad form{
margin:0;
padding:0;
}

.notepad form fieldset{
margin-top:1em;
}

.notepad form legend{
font-weight:bold;
}

.notepad form input[type=text]{
width:98%;
}

.notepad form textarea{
width:98%;
height:150px;
}

.notepad form a.control{
text-decoration: none;
padding: 2px 20px;
text-align:center;
margin:5px 0;
display:block;
margin-top:5px;
font:bold 13px Verdana;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: green;
border-radius: 8px;
box-shadow: 3px 3px 4px rgba(0,0,0,.5);
-moz-border-radius: 8px;
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
-webkit-border-radius: 8px;
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
}

.notepad form a.delete{
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}

.notepad:before{ /*top left tape effect*/
content: '';
position:absolute;
width: 120px;
height: 25px;
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform:translate(-70px,0)
skew(10deg,10deg)
rotate(-50deg);
-moz-transform:translate(-70px,0)
skew(10deg,10deg)
rotate(-50deg);
-o-transform:translate(-70px,0)
skew(10deg,10deg)
rotate(-50deg);
-ms-transform:translate(-70px,0)
skew(10deg,10deg)
rotate(-50deg);
transform:translate(-70px,0)
skew(10deg,10deg)
rotate(-50deg);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script>

<script src="http://wwwkikiyococc.googlecode.com/files/html5notepad.js">
/* Original script from www.dynamicdrive.com */

/* Modifikasi By www.kikiyo.co.cc */
</script>
<script>
jQuery(function($){
notepad.loadpad('mynotepad1')
</script>

<a href="javascript:notepad.loadpad('mynotepad2')"><input type="button" value="Notepad" />
</a>