How To Make Post-It Sticky Note In Blogger

A Post-it note (or Sticky Note) is a piece of paper stationery with a re-adherable strip of adhesive on the back, designed for temporarily attaching notes to documents and other surfaces. Although now available in a wide range of colors, shapes, and sizes, Post-it notes are most commonly a 3-inch (76 mm) square, canary yellow in color. A unique low-tack adhesive allows the notes to be easily attached and removed without leaving marks or residue. In this tutorial you’ll learn how to make a realistic looking sticky note using just HTML and CSS that is easy to create and cross-browser compatible.

You may also to like read: How To Create A Sticky Post On Blogger

1. Login to your Blogger Dashboard and go to "Layout".


2. Click on "Add a Gadget" > "HTML/JavaScript".


3. Copy and paste the following code:



<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>

<style type="text/css">
.sticky {
 /* General */
 margin: 0;
 /* Padding: Top/Bottom Left/Right */
 padding: 8px 24px;
 /* Width: Adjust to your purpose */
 width: 380px;
 /* Uncomment the following line if you'd like to maintain a square  shape */
 /* height: 380px; */
 /* Font: After importing font, put font's name in single quotes */
 font-family: 'Nothing You Could Do', Arial;
 font-size: 1.4em;
 /* Border */
 border:1px #E8Ds47 solid;
 /* Shadow */
 -moz-box-shadow:0px 0px 6px 1px #333333;
 -webkit-box-shadow:0px 0px 6px 1px #333333;
 box-shadow:0px 0px 6px 1px #333333;
 /* Background */
 background: #fefdca; /* Old browsers */
 background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Opera11.10+ */
 background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* IE10+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0 ); /* IE6-9 */
 background: linear-gradient(top, #fefdca 0%,#f7f381 100%); /* W3C; A catch-all for everything else */
}

.sticky p {
 /* Text-Align: align the heading to the center */
 text-align: center;
}

.sticky ol {
 /* Margin: Distance from top of list to heading */
 margin: 12px;
}

.bxt-moresubs {
background: none repeat scroll 0 0 #EBEBEB;
border-style: solid;
border-width: 1px;
border-color: #fff #ccc #ccc;
padding: 3px 8px 3px 3px;
text-align: right;
font-size: 7px;
letter-spacing: 1px;
}

.bxt-moresubs a {
display: inline-block;
font-weight: bold;
color: #1E598E;
text-decoration: none;
text-shadow: 1px 1px 1px #fff;
}
</style>

<p style="display:none;"><a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>

<div class="sticky">
    <p>
    <strong>Today's to-do list</strong>
    <br />
    <small>Monday, September 19th</small>
    </p>
    <ol>
        <li>Write a blog post</li>
        <li>Go to the bank</li>
        <li>Study for exams</li>
        <li>Renew web hosting account and domain name</li>
        <li>Learn something new</li>
        <li>Update project log</li>
    </ol>
</div>

<div class="bxt-moresubs">
<a href="http://bloggerxtutorials.blogspot.com/">Get This Widget</a>
</div>



4. Click "Save". It’s as simple as that!

Article Source: binvisions.com