Designing Blogger Header To Beautify Your Blog

The header is the top element in a blog or website which usually contains the identity or title of a site.

In chapter 4 how bab create your own blogger template this time we will try to customize or design the header.

No need to worry about customizing or designing the header that we will make, it’s just as simple as changing the font, size, and adding padding.

Designing Blogger Headers

Specifying the Selector

Define the selector first (all learning CSS, guys)

We can use inspect elements in the browser to define selectors which we will later use to add properties in CSS.

Because the element we are going to design is the title on the header, our header title block then right click, then select inspect element or press F12 on the keyboard

blog header customization

blogspot title design

We can see, our title is in the H1 tag, but if we only use the H1 tag in CSS it will affect other H1 elements. For that we will add another selector in front of H1.

Let’s look at the structure again in the inspect element, we can see that our H1 title is in the tag <body>
<div class="outerWrapper">
<div class="header section" id='header' name="Header"><div class="widget Header" data-version='2' id='Header1'>
<div class="header-widget">

blog header title design

So, we don’t need to write all the tags, just look for 1 which is unique (not the same as other elements). Here I use the header class because the class name is only used in the header element. So the selector is obtained as follows:


.header h1{
CSS
}

You can also use id=”header”. The selector is as follows


#header h1{
CSS
}

Adding Padding

The first thing we’re going to do is add padding.

Padding itself serves to increase the distance or free space on the element.
Add the selector we specified above ]]></b:skin>
Then add the padding property


.header h1{
padding: 20px 0;
}

Why 20px 0?

The meaning of this value is to provide a top and bottom distance of 20px and a left and right of 0px (no distance).

Save the template and refresh the blog to see the results.

Changing Writing Style

Next is to change the header title font.

We can add properties to change the writing style of our header title.

Usually what I change in the header is the font type, size, and font weight

Look for the CSS code that we just created earlier


.header h1{
padding: 20px 0;
}

Add some properties to change the writing style to something like this


.header h1{
 padding: 20px 0;
 font-family: ‘Noto Sans’, sans-serif
 font-size: 1.5em;
 font-weight: 400;
}

For those who are still confused about how to change the font, you can read the article The Easiest Way to Change Blogger Fonts

Save the theme and refresh the blog.
The result is more or less like the following.

blogger header design result

Source code results on CHAPTER 4 Designing the Blogger Header this time you can download to learn via the following button

So far, you have completed Chapter 4 in The Complete Tutorial to Create Your Own Blog Template for Beginners.

Leave a Reply

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

Get Free Online Cooking Classes
Are you looking for resources on how to cook online that will help you in the culinary arts?
Yes, Please