Notepad adalah sebuah program yang digunakan untuk membuat file text, biasanya sering kita jumpai pada aplikasi komputer,
Dalam kesempatan kali ini saya akan berbagi ilmu tentang cara menampilkan notepad di blog, sebagai contoh.
Silahkan klik tombol dibawah ini :
Dalam notepad tersebut anda dapat menyimpan potongan teks yang anda ingin simpan..
Anda juga dapat Memindahkan/Drag notepad tersebut sesuai dengan lokasi keinginan anda.
Jika berminat anda dapat menambahkan ini di gadget blog anda..
Copy Paste script kode dibawah ini :
<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>
