Tuesday 2 April 2013

How To Make Post-It Sticky Note In Blogger

6 comments
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:

  4. <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>

  5. Click "Save". It’s as simple as that!
Article Source: binvisions.com

6 comments :

  1. This Site is very essential for me. Because I have got many information from here.Thank You ..........
    I added Sticky gadget for my blog succesfully

    Freshers Wakins

    ReplyDelete
  2. Great post
    You rocked it, this is really helpful for me.
    Thanks for this post

    ReplyDelete
  3. So cool and so beautifull, it worked totally fine in my blog.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...