Pure CSS Hello Bar Clone for Blogger

Adding the Widget

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code in the box

Live Demo 

 

• <style type="text/css">
  /* Hello Bar Clone For Blogger by AllBloggerTricks.com */
  #abt-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
  #abt-hots{background-color:#EB593C;border-bottom:2px solid #FFF;height:30px;left:0;position:fixed;top:0;width:100%;box-shadow:3px 3px 3px 3px;z-index:10000}
  #abt-hotsdata{color:#FFF;font-family:serif;font-size:15px;padding:5px}
  #abt-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
  #abt-hotsshow{background-color:#EB593C;border-bottom:3px solid #000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-left:3px solid #000;border-right:3px solid #000;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:5px;top:0;width:30px}
  .abt-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #CC5200;height:0;width:0}
  .abt-hotsblock{background-color:#CC5200;height:10px;width:8px}
  .abt-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
  </style>
  <div id="abt-hotsmain" >
  <center id="abt-hotsshow" onmouseup="document.getElementById('abt-hots').style.display='block'"><div class="abt-hotsblock"></div><div class="abt-hotsdownarrow"></div></center>
  <div id="abt-hots" >
  <center id="abt-hotshide" onmouseup="document.getElementById('abt-hots').style.display='none'"><div class="abt-hotsuparrow"></div><div class="abt-hotsblock"></div></center>
  <center id="abt-hotsdata" >
  Hello My Friends..!
  </center>
  </div>
  </div> 

 

Settings for the widget

Change Hello My Friends..! with your desired text/link and remember that you should add it in HTML format. You may also add buttons and other things as per your convenience.
Now save the widget and finally save the template.