How to Customize the Blogger Page Header

Friday, June 5, 2015

If you notice, my blog just had some template tweaking. I'm still learning the template HTML and CSS codes. But I will share to you some easy blog design tutorial so you can tweak your blog design too.

First in the row is how to customize the blogger page header.

This is the blog page header of my blog before customizing.

And this what my blog page header looks like after customizing.

What are the changes I made:

1. Change the font family, size and letter case.
2. Change the space/margin between the pages.
3. Add bottom and top border.
4. Center the page tab.

First login to your Blogger. Then go to Dashboard>Template>Customize>Advanced>Add CSS.

To change font family, size and letter case, and to change space/margin between the pages, paste the the following custom CSS code.

.tabs-inner .PageList li a {font-family: 'century gothic' !important;
font-size: 14px; padding-left:10px; padding-right:10px; text-transform: uppercase !important;
padding: 15px;

To center the page tab and to add bottom and top border, paste the the following custom CSS code.

.PageList {text-align:center !important; border-bottom: 1px solid #ffb9b9;
padding-bottom: 5px; border-top: 1px solid #ffb9b9;
padding-bottom: 5px; }

If you want to add background to the tabs, paste this custom CSS.

.tabs-inner .PageList {background: #faf2f2;}

The page header tab will look like this.

To remove the border top and bottom, simply remove the highlighted code from the code above.

.PageList {text-align:center !important; border-bottom: 1px solid #ffb9b9;
padding-bottom: 5px; border-top: 1px solid #ffb9b9;
padding-bottom: 5px; }

The page header will now look like this.

You can edit or change those in red depending on the page header design you want. Make sure to click Apply to Blog button to make the changes.

That's it. I'll share more blog designing tutorials as I continue learning the html and CSS codes.