Header / Welcome bar for your blogger blog

Header / Welcome Bar

# Header bar is for something showing for new arrivals or menu or anything new.
# Welcome bar is for welcome your reader with some beautiful quote or anything else.
# It’s very useful to interact your viewers.
# Colorful and simple so users like to watch.

How it’ll look like   
Header bar / Welcome bar Click to Enlarge
Live preview : http://bit.ly/dcegrpadiv.
How to add it?

# Go to your blog dashboard and click on template tab.
# Click on Backup/Restore and click on Download full template.
# After download , Close it and click on Edit HTML .
# After , Search ( Ctrl + F ) for </head> above it paste below code.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){
  $(&quot;.cbtarrdn&quot;).hide();
});
$(function()
  {$(&quot;.cbtarrup&quot;).click(function(){
  $(&quot;#seebeeteehedbar&quot;).slideUp(400);
  $(&quot;.cbtarrup&quot;).slideUp(400);
  $(&quot;.cbtarrdn&quot;).slideDown(500);
}); });
      $(function()
        {$(&quot;.cbtarrdn&quot;).click(function(){
  $(&quot;#seebeeteehedbar&quot;).slideDown(400);
  $(&quot;.cbtarrdn&quot;).slideUp(400);
  $(&quot;.cbtarrup&quot;).slideDown(500);
}); });</script>

# Then , Search for <b:skin> and Expand it and Search for </b:skin> and above it paste below code.

#seebeeteehedbar
{
  padding: 13px 0;
  width: 100%;
  height: 25px;
  background: rgb(12,23,34);
  background-image: linear-gradient(top,rgb(0,0,0),transparent,rgba(255,255,255,.3));
  background-image: -moz-linear-gradient(top,rgb(0,0,0),transparent,rgba(255,255,255,.3));
  background-image: -webkit-linear-gradient(top,rgb(0,0,0),transparent,rgba(255,255,255,.3));
  background-image: -o-linear-gradient(top,rgb(0,0,0),transparent,rgba(255,255,255,.3));
  background-image: -ms-linear-gradient(top,rgb(0,0,0),transparent,rgba(255,255,255,.3));
  top: 0;
  left: 0;
  position: fixed;
  color: #ddd;
  text-align: center;
  font: bold 23px ‘Calibri’;
  box-shadow: 0 3px 2px #222;
  -moz-box-shadow: 0 3px 2px #222;
  -webkit-box-shadow: 0 3px 2px #222;
  -ms-box-shadow: 0 3px 2px #222;
  -o-box-shadow: 0 3px 2px #222;
}
.cbtarrdn
{
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 5px;
  width: 40px;
  height: 43px;
  background: rgb(12,23,34) url(“http://4.bp.blogspot.com/-3dp6P-DlDMM/UWfhcR_0WWI/AAAAAAAAAlI/s0tT3oK_cnk/s1600/down50.png”) no-repeat;
  background-size: 40px 40px;
  border: 4px solid grey;
  border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;
  -webkit-border-radius: 0 0 20px 20px;
  -ms-border-radius: 0 0 20px 20px;
  -o-border-radius: 0 0 20px 20px;
  box-shadow: 0 2px 2px #000;
  -moz-box-shadow: 0 2px 2px #000;
  -webkit-box-shadow: 0 2px 2px #000;
  -o-box-shadow: 0 2px 2px #000;
  -ms-box-shadow: 0 2px 2px #000;
}
.cbtarrup
{
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 5px;
  width: 50px;
  height: 50px;
  background: url(“http://1.bp.blogspot.com/-a1ffFXcfm0U/UWfhcmS17OI/AAAAAAAAAlQ/X9_bCGDSFZs/s1600/up50.png”) no-repeat;
}
.cbtct a
{
  color: #ddd;
  text-decoration: none;
  position: absolute;
  top: 35px;
  left: 2px;
  font: normal 13px ‘Calibri’;
}

# Then , Search for </header> and paste below code above it.

<div id=”seebeeteehedbar”>
  <div>Header bar for your blog / website.</div>
  <div class=”cbtarrup”>
  </div>
  <div class=”cbtct”><a href=”http://seebeetee.com” target=”_blank”>+Get it</a></div>
</div>
<div class=”cbtarrdn”></div>

# Now , You’ve done.
# You can also change colors which is highlighted with yellow color and don’t forget to change the text which is highlighted with red and with yellow text color. 
# Just Save template and enjoy.

Note : We are giving you this free , I don’t want anything but please don’t remove +Get it .

# And if you’ve already installed jquery so no need to install twice means don’t copy which is highlighted with blue background and yellow color. (<script type=””…./>) 

Any queries?

Just comment or contact us .

Share This Now:

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *