How to add a sticky note in blogger

Today I am going to teach you how to add a Sticky note to your blog. You can use it for your blog note or for some other things to add this to blogger follow the steps given below

LIVE DEMO

Sticky notes

How to add this to blogger

Go to layout>add a gadget>Html/javascript
Paste the following code

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Sticky notes</title> <meta name="viewport" content="width=device-width"> <style type="text/css"> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
::-moz-selection { background: #C6FF91; text-shadow: none;}
::selection { background: #C6FF91; text-shadow: none;}
.clearfix:before,.clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}body { margin:0; padding:0; }
.wrapper { margin: 60px auto 0 auto; }
/* Note styles */.note-wrap { width: 235px; min-height: 235px; padding: 35px; margin: 0 22px 44px 22px; position: relative; font-size: 24px; vertical-align: top; display: inline-block; font-family: Englebert, Arial; color:#4b453c; background: #F7E999; line-height: 34px; text-align: center; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); &:before { display: block; content: ""; background: rgba(227, 200, 114, 0.40); width: 130px; height: 28px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-radius: 6px/18px 0; position: absolute; top: -13px; left: 50px; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } & a { color:#6b824f; text-decoration: none; font-size: 20px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; &:hover { color:#D83A25; } }}
.note-yellow { background: #F7E999; -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg);}.note-blue { background: #b9dcf4; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg);}.note-pink { background: #FFBDA3; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg); -ms-transform: rotate(1deg); transform: rotate(1deg);}.note-green { background: #CAF4B9; -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg);} </style></head><body> <div class="wrapper clearfix"> <aside class="note-wrap note-yellow"> <p>Driving along on the plastic dream, Heart beats fast like a tiny machine</p> <a href="http://youtu.be/vFYaFT0q6Uw">The Mighty Boosh</a> </aside> <aside class="note-wrap note-blue"> <p>So we back in the mine, got our pick axe swinging from side to side</p> <a href="http://youtu.be/cPJUBQd-PNM">CaptainSparklez</a>
</div></body></html>

Save it

Style 2

Live demo

The amazing thing about this paper note is, that the background is created with linear-gradient and always fits on the content and it's padding/font-size. You can also use as much text as you want.

No images have been harmed. Based on Lea Verou's code presented at W3Conf (Video).

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0ByVwHYI6ywlfTEJVVWFpQktXMUE">
<div class="wrapper">
<div class="paper">
<p>The amazing thing about this <b>paper note</b> is, that the background is created with linear-gradient and always fits on the content and it's padding/font-size. You can also use as much text as you want.<br />
<br />
No images have been harmed. Based on Lea Verou's code presented at W3Conf (<a href="http://youtu.be/3ikye7Qc7Ak?t=17m26s">Video</a>).</p>
</div>
</div>

Save it

You are all done

You May Also Like