Flying Twitter Bird Widget By Making Different Latest Tricks SEO, SMO, SMM, SEM, ORM & PPC Expert in Chandigarh - Vivek Sharma div#ContactForm1 { display: none !important; }

Latest Tricks

How to make an Animated header without Flash in Blogger



The CSS we will use

To form an animation effect on hover, we have used the new CSS3 properties for better experience, CSS3 is a new version of CSS, with CSS3 it's not easy to create more attractive pages and designs and so as the header.

Actually there's two mode, one is that you can only set the effect for pages other than home-page. I will provide CSS for both the modes. You may only apply one CSS code block, adding all modes will cause errors.

No header Effect on Home Page This CSS will make your header animated and designed only on post pages,pages, index pages etc. Your header will be default on Home Page

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.Header h1 a
{
border-color:black !important;   
text-decorationnone;
font-size70px;
font-family: consolas;
background-color: aliceblue ;
border-stylesolid;
border-top-stylenone;
border-bottom-stylenone;
padding20px 25px 20px 25px;
border-radius: 15px;
border-width16px;
border-bottom-right-radius: 76px;
border-top-left-radius: 76px;
colorblack !important;
transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s;
-webkit-transition:all 1s,border-color 1s ease-in-out;
-ms-transition:all 1s,border-color 1s ease-in-out;
-moz-transition:all 1s,border-color 1s ease-in-out;
-o-transition:all 1s,border-color 1s ease-in-out;
}
  
.Header h1 a:hover
{
colorwhite !important;
border-stylesolid;
border-top-stylenone;
border-bottom-stylenone;
border-width16px;
padding20px 25px 20px 25px;
border-radius: 15px;
border-bottom-left-radius: 76px;
border-top-right-radius: 76px;
background-color: Gainsboro !important;
border-color: Grey !important;
}


If you are feeling to lazy to paste such big CSS, then you might use the hosted CSS file to get the CSS styles. To do that you have to paste an HTML tag inside your <head> tag, for blogger user Go to Blogger Dashboard > Template > Edit HTML > Proceed > Using CTRL+F search for </head> in the template and paste this link tag just above it.
 
?
1
<link rel='stylsheet' href='http://dl.dropbox.com/u/80435960/header-linkeffect.css' type='text/css'/>
And Save. It should look like this. 

 

Effect on header on all pages and home page - If you have tried the last CSS, then you have seen that it only works on post-pages and other pages other than homepage, this CSS is universal and applies the effect on homepage also. Let's overview the CSS.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/************************************************
Design taken from http://stramaxon.blogspot.com
Designed by : Deepak Kamat
************************************************/
.Header h1 a
{
border-color:black !important;   
text-decorationnone;
font-size70px;
font-family: consolas;
background-color: aliceblue ;
border-stylesolid;
border-top-stylenone;
border-bottom-stylenone;
padding20px 25px 20px 25px;
border-radius: 15px;
border-width16px;
border-bottom-right-radius: 76px;
border-top-left-radius: 76px;
colorblack !important;
transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s;
-webkit-transition:all 1s,border-color 1s ease-in-out;
-ms-transition:all 1s,border-color 1s ease-in-out;
-moz-transition:all 1s,border-color 1s ease-in-out;
-o-transition:all 1s,border-color 1s ease-in-out;
}
  
.Header h1 a:hover
{
colorwhite !important;
border-stylesolid;
border-top-stylenone;
border-bottom-stylenone;
border-width16px;
padding20px 25px 20px 25px;
border-radius: 15px;
border-bottom-left-radius: 76px;
border-top-right-radius: 76px;
background-color: Gainsboro !important;
border-color: Grey !important;
}
/***********************************
Both Link and Non-link
***********************************/
.Header h1
{
cursor:default;   
border-color:black !important;   
text-decorationnone;
font-size70px;
font-family: consolas;
background-color: aliceblue ;
border-stylesolid;
border-top-stylenone;
border-bottom-stylenone;
padding20px 25px 20px 25px;
border-radius: 15px;
border-width16px;
border-bottom-right-radius: 76px;
border-top-left-radius: 76px;
colorblack !important;
transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s;
-webkit-transition:all 1s,border-color 1s ease-in-out;
-ms-transition:all 1s,border-color 1s ease-in-out;
-moz-transition:all 1s,border-color 1s ease-in-out;
-o-transition:all 1s,border-color 1s ease-in-out;
}
  
.Header h1:hover
{
colorwhite !important;
border-stylesolid;
border-top-stylenone;
border-bottom-stylenone;
border-width16px;
padding20px 25px 20px 25px;
border-radius: 15px;
border-bottom-left-radius: 76px;
border-top-right-radius: 76px;
background-color: Gainsboro !important;
border-color: Grey !important;
}
How do i add this CSS in Blogger ?

If you think the CSS is very complicated and you don't just want to mess things up then you may try this. Adding this link tag inside your template's <head> then it will load the given CSS. This is an one line link tag.
For blogger user Go to Blogger Dashboard > Template > Edit HTML > Proceed > Using CTRL+F search for </head> in the template and paste this link tag just above it.


?
1
<link rel='stylsheet' href='http://dl.dropbox.com/u/80435960/header-effect.css' type='text/css'/> 

So now you know how to make a cool looking header like mine, hope you will share the post.