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(){
$(".cbtarrdn").hide();
});
$(function()
{$(".cbtarrup").click(function(){
$("#seebeeteehedbar").slideUp(400);
$(".cbtarrup").slideUp(400);
$(".cbtarrdn").slideDown(500);
}); });
$(function()
{$(".cbtarrdn").click(function(){
$("#seebeeteehedbar").slideDown(400);
$(".cbtarrdn").slideUp(400);
$(".cbtarrup").slideDown(500);
}); });</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".cbtarrdn").hide();
});
$(function()
{$(".cbtarrup").click(function(){
$("#seebeeteehedbar").slideUp(400);
$(".cbtarrup").slideUp(400);
$(".cbtarrdn").slideDown(500);
}); });
$(function()
{$(".cbtarrdn").click(function(){
$("#seebeeteehedbar").slideDown(400);
$(".cbtarrdn").slideUp(400);
$(".cbtarrup").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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPPvLRsrxFHjWxPmQdyjuxwggMCzcxU9Rlv1UGjh9kqb4QP9Im1x9czmuZ_3Ts2eQ64-kwgF6tgcdbiafxjQiDMhEvLIG0P9KTxNN9YlTV2nB4rSGB1IgszaGaXzdxniveucqK0vLYcBg/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTg9yP3DoUiK027EBJYXLYNCzN-KX8DnKU8Tb-TElsHIUvrlhyG1ZjEicUPRd2B8YnG8AA69X6v9hsE-qP8UFnLuxS25rf8w-0ODknddDJ47WElhPmNjzuGb_i8RfL8ILThzC669ZpSE/s1600/up50.png") no-repeat;
}
.cbtct a
{
color: #ddd;
text-decoration: none;
position: absolute;
top: 35px;
left: 2px;
font: normal 13px 'Calibri';
}
{
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPPvLRsrxFHjWxPmQdyjuxwggMCzcxU9Rlv1UGjh9kqb4QP9Im1x9czmuZ_3Ts2eQ64-kwgF6tgcdbiafxjQiDMhEvLIG0P9KTxNN9YlTV2nB4rSGB1IgszaGaXzdxniveucqK0vLYcBg/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTg9yP3DoUiK027EBJYXLYNCzN-KX8DnKU8Tb-TElsHIUvrlhyG1ZjEicUPRd2B8YnG8AA69X6v9hsE-qP8UFnLuxS25rf8w-0ODknddDJ47WElhPmNjzuGb_i8RfL8ILThzC669ZpSE/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.<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>
# 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=""..../>)
Also Read
Any queries?
Just comment or contact us .