have ruined my blog reader ship by 30% but no worries. Now I am again back with lots of free time and lots of amazing widgets and seo techniques.So this is the time to rock again in the blogging community.Today I am representing a new and unique on scroll animated header.I have seen this type of header on search engine journal and i really like it so today I am here with the bombastic widget for your blogger blog and will soon release it for wordpress blog so all the bloggers can enjoy the cool technique.It is not a tricky stuff you can add it easily on your blog by just pasting some handy codes in your blog coding & you will enjoy it.
On Scroll
Advantages Of Adding Animated On Scroll Header
- It's sticky and will ride with you while you scroll down.
- It's size decreases when you scroll down and when you scroll to top it again look like a big header.
- It's build with light weight java script so no compromise on your loading speed.
- Totally cluster free and no bugs at all.Life time warranty :)
How To Add Animated On Scroll Header To Your Blog ?
1: First of all go to templates >> Edit Html >> Click in the coding area and press Ctrl+F and type in <head> and press Enter.
Just after it paste the following code.
<script src="https://sitemapgenerator.googlecode.com/files/modernizr.custom.js"></script>
2:Click in the coding area and press Ctrl+F and type in </body> and just above/before it paste the following code.
<script src="https://sitemapgenerator.googlecode.com/files/classie.js"></script>
<script src="https://sitemapgenerator.googlecode.com/files/cbpAnimatedHeader.min.js"></script>
3:Click in the coding area and press Ctrl+F and type in <body> and just after it paste the following code.
<div class="container">
<div class="cbp-af-header">
<div class="cbp-af-inner">
<h1>Animated</h1>
<nav>
<a href="#">Blogging</a>
<a href="#">Seo</a>
<a href="#">Blogger</a>
<a href="#">wordpress</a>
</nav>
</div>
</div>
- Change the Orange color h1 with h2,h3 to decrease the size according to your need.
- Change the Red color Animated word with your desired title.
- Change the blue color hash(#) sign with the url you want to be redirected when clicked.
- Change the purple color words with your desired words you want to show on the bar after the title.
4:Go to Templates >> Now click on Customize >> Click on Advanced >> Add Css and paste the following css coding and click apply to blog.
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {
color: #f0f0f0;
text-decoration: none;
}
a:hover {
color: #000;
}
.container {
position: relative;
margin-top: 15em;
}
.container > header,
.main section > div {
width: 90%;
max-width: 69em;
margin: 0 auto;
padding: 2.875em 1.875em 1.875em;
}
.container > header h1 {
font-size: 2.125em;
line-height: 1.3;
margin: 0 0 0.6em 0;
float: left;
font-weight: 400;
}
.container > header > span {
display: block;
position: relative;
z-index: 9999;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
padding: 0 0 0.6em 0.1em;
}
.container > header > span span:after {
width: 30px;
height: 30px;
left: -12px;
font-size: 50%;
top: -8px;
font-size: 75%;
position: relative;
}
.container > header > span span:hover:before {
content: attr(data-content);
text-transform: none;
text-indent: 0;
letter-spacing: 0;
font-weight: 300;
font-size: 110%;
padding: 0.8em 1em;
line-height: 1.2;
text-align: left;
left: auto;
margin-left: 4px;
position: absolute;
color: #fff;
background: #47a3da;
}
.container > header nav {
float: right;
text-align: center;
}
.container > header nav a {
display: inline-block;
position: relative;
text-align: left;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
margin: 0 0.1em;
border: 4px solid #47a3da;
}
.container > header nav a > span {
display: none;
}
.container > header nav a:hover:before {
content: attr(data-info);
color: #47a3da;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
pointer-events: none;
}
.container > header nav a:hover {
background: #47a3da;
}
.bp-icon:after {
font-family: 'bpicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-align: center;
color: #47a3da;
-webkit-font-smoothing: antialiased;
}
.container > header nav .bp-icon:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 2;
text-indent: 0;
}
.container > header nav a:hover:after {
color: #fff;
}
.bp-icon-next:after {
content: "\e000";
}
.bp-icon-drop:after {
content: "\e001";
}
.bp-icon-archive:after {
content: "\e002";
}
.bp-icon-about:after {
content: "\e003";
}
.bp-icon-prev:after {
content: "\e004";
}
.main > section:nth-child(even) {
background: #87cef8;
color: #fff;
}
.main section:first-child > div {
padding-top: 0em;
}
.main section p {
margin: 0;
padding: 1em 0;
font-size: 1.8em;
line-height: 1.5;
}
@media screen and (max-width: 55em) {
.container > header h1,
.container > header nav {
float: none;
}
.container > header > span,
.container > header h1 {
text-align: center;
}
.container > header nav {
margin: 0 auto;
}
.container > header > span {
text-indent: 30px;
}
.main section p {
padding: 2em 5%;
font-size: 1.4em;
}
}
.cbp-af-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 10000;
height: 230px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
.cbp-af-header .cbp-af-inner {
width: 90%;
max-width: 69em;
margin: 0 auto;
padding: 0 1.875em;
}
.cbp-af-header h1,
.cbp-af-header nav {
display: inline-block;
position: relative;
}
.cbp-af-header h1,
.cbp-af-header nav a {
line-height: 230px;
}
.cbp-af-header h1 {
text-transform: uppercase;
color: #333;
letter-spacing: 4px;
font-size: 4em;
margin: 0;
float: left;
}
.cbp-af-header nav {
float: right;
}
.cbp-af-header nav a {
color: #aaa;
font-weight: 700;
margin: 0 0 0 20px;
font-size: 1.4em;
}
.cbp-af-header nav a:hover {
color: #333;
}
.cbp-af-header h1,
.cbp-af-header nav a {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.cbp-af-header.cbp-af-header-shrink {
height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
line-height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1 {
font-size: 2em;
}
@media screen and (max-width: 55em) {
.cbp-af-header .cbp-af-inner {
width: 100%;
}
.cbp-af-header h1,
.cbp-af-header nav {
display: block;
margin: 0 auto;
text-align: center;
float: none;
}
.cbp-af-header h1,
.cbp-af-header nav a {
line-height: 115px;
}
.cbp-af-header nav a {
margin: 0 10px;
}
.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
line-height: 45px;
}
.cbp-af-header.cbp-af-header-shrink h1 {
font-size: 2em;
}
.cbp-af-header.cbp-af-header-shrink nav a {
font-size: 1em;
}
}
@media screen and (max-width: 32.25em) {
.cbp-af-header nav a {
font-size: 1em;
}
}
@media screen and (max-width: 24em) {
.cbp-af-header nav a,
.cbp-af-header.cbp-af-header-shrink nav a {
line-height: 1;
}
}
Note:
If you find any type of difficulty while installing this widget.So don't hesitate to comment down in the comment box so i can solve your problem.If you want to remove your old header so you can add this new one you can email our support team directly at (support@blogging-heaven.com) we will get back to you as fast as we can.If you have any better technique so this header can look more cool than don't hesitate to comment or email me so I can apply to this one.
Author's Desk > > >
There are many sticky bars, fancy menus, fancy looking headers and coming more daily in the market but this is unique in it's own kind and being different is the key to success.So I hope you all have enjoyed my efforts and this great widget also.Drop your precious comments from your precious time down here. Till then stay blessed and happy scrolling. :)
Hey, just saw your link in ComLuv and thought I should mention that your not getting the value for your links. Check out my article about Loosing links to Feedburner to learn more.
ReplyDeleteThanks I have checked the article it is great but I am ok with It I have no problem of redirection to Google. Peace
ReplyDeleteHey great information guys like your blog
ReplyDeleteWeb Designer in Bangalore
very nice info
ReplyDeleteThis is a great info. thanks. I've tried it and it worked.
ReplyDeleteI wish I could use an image as my header and be placed at center align.. then it moves to top-left corner and being smaller. Under that image, there is a search form that moves from center to top-right of the page. I hope you can help me.
thanks for this info. it's really helpful
ReplyDeletethanks for this info. it's really helpful
ReplyDeletevery nice working bro.
ReplyDeletechek it on my blog hows this look.
www.karachi-views.blogspot.com