How to Add a Cool Notepad with Save Button to Blogger

Here’s a nice Blogger trick from Akshat Bhanchawat of Aktechz, which shows you how to add a cool notepad with save button to your Blogger site. This will add extra functionality to your blog and at the same time make it look more presentable, and even professional to your visitors.

You can check out the demo to see if you like it.

Follow his steps below:
Go to your Blogger Dashboard > Template > Edit Template > Proceed.
Click the expand box.
Look for <Head> then paste the following under it:

<script type="text/javascript" src=""></script>
<script src="">
<style type="text/css"> .notepad{ border:1px solid gray; background:lightyellow; 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; /*w3c border radius*/box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */-moz-border-radius: 8px; /* mozilla border radius */-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690); -webkit-border-radius: 8px; /* webkit border radius */-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */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); }

  • Save.
  • After saving your template, go to Layout > Add a Gadget > HTML/Javascript widget and paste the following.
<a href="javascript:notepad.loadpad('mynotepad2')"> Click to open notepad </a>
Note: You may replace ‘Click to open notepad’ with your own instructions.
  • Save.
Note: Before editing your template, remember to create a backup first.
source -
Previous Post
Next Post