News & Updates

Blogger Trick

You can add sticky notification bar in blogger blogs by showing the bar either at the top of header or just below the footer. A sticky bar can is now used widely by all blogs and sites(mashable for instance) for notifying visitors of important updates, offers, coupons and latest news. You can even add your RSS link there and ask you visitors to subscribe to your blog.
I have added drop shadow effects to it using CSS3. The widget is compatible with all browsers.
You can see the demo above in my blog too.




Steps To Add Bar To Blogger : 

  •    Go To Blogger > Design > Edit HTML   
  •    Backup your template  
  •   Search for this,  ]]></b:skin>  
  •   Just above it paste the CSS code below,



    #karan-stickybar{
    background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizae7ppu5xppcFyaZq-D2EbeSBm13ZSwAmTCJJPMI2ZZAN-OXSsc7i2LjOcAH1LmLngWBp1Cfm36lpL7WQypSFd0IOwfEUxvG5cpKzYq-vruige-dG0DWeKx9gakI97rGdQBakuWFiaEw/s400/stickybar.png') repeat-x;
    width:100%;
    margin:0 auto;
    text-align:center;
    padding:0px 0;
    border-bottom: 1px solid #888888;
      -moz-box-shadow: #666666 0px 1px 3px;
      -webkit-box-shadow: #666666 0px 1px 3px;
      box-shadow: #666666 0px 1px 3px;
      z-index: 999;
    height: 28px; position:fixed;
    line-height: 1.85em;
    vertical-align: baseline;
    letter-spacing: 1px;
    }
    #karan-stickybar a{
    text-decoration:none;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    font-family: arial,"Helvetica",sans-serif;
    line-height: 24px;
    }
    #karan-stickybar a:hover{
    text-decoration:underline;
    }
    #karan-stickybar p {margin:0; list-style:none;}
    #karan-stickybar img {vertical-align: middle;
          margin-right: 6px;}
         
    To change the background colour of the bar then simply change this #0080ff
      
    •   Now search for , <body> 
    •  Just below it paste the following code


    <div id='karan-stickybar'>
    <a href='#'>ADD TEXT HERE</a>
    </div>
    Now replace # with your text link (can be your RSS link, important post link , facebook link etc.) and ADD TEXT HERE with anything you wish to write.
    •  Save your template & you are done...!!
    Subscribe to: Posts (Atom)