Hi bloggy readers,
Blog header is the first element in our blog when Googlebot starts crawling into our blog. By reading the title and description (meta tag) on the blog header, can finally help your blog get a targeted traffic from search engines. Blog header, literally, means the head of element. In blogger or any web term, it's usually called as a blog header or web header. Header is the head of template that being positioned on the top position of web page, where mostly, bloggers use it to place the header logo for their blogs.
Okay, now take a look at the picture below and let me describe it to you more thoroughly!
As you can see in that picture above, the position of blog header in our blog is at the top of the blog template.
Where is blog header in your template code?
1. Log in to Blogger
To begin this tutorial, now go to Blogger.com and Log in to your Blogger account.
2. Go to Edit HTML
In the Dashboard page, pick one of your blog and go to the Layout/Design page. In the Page Element, switch the sub-tab to Edit HTML.
3. Find the code
Now, by pressing Ctrl + F at the same time, you will enter the search mode. Now find the CSS that controls the header element on your blog.
Usually, if you are currently using one of the standard templates from Blogger, such as Rounders and Minima, the blog header layout will be defined in the CSS below:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Yeah, that is the position of the blog header element in the template code of your blog. In that area, we can do some customizations in order to edit the appearance of blog header in our blog, such as changing the logo, adjusting the width or height of the blog header, customizing the background color or text color of header, or anything. Anyway, i already explained about how to customize the blog header element in my other post, so you can explore this blog to find out more.-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Next, we i want to show you the code that defines the occurrence of your blog header in the HTML based web page.
Now scroll down to the bottom of your blog template, and look at the code:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mini Slide Show Widget Testing Blog (Header)' type='Header'/>
</b:section>
</div>
As you can see at the code above, the red code section above indicates the blog header element on your blog will be displayed in the HTML-based web page. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mini Slide Show Widget Testing Blog (Header)' type='Header'/>
</b:section>
</div>
Okay, that's it about blog header that i can share to you in this article. Let's see if i can dig more about this kind of topic in the future. So, i'll see you around.
I am out.
Share This Article to Other People Across the World !
Thanks!
Get the fresh update from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
Labels:
Blog Header
0 comments:
Post a Comment