Here’s how you go about putting anything you like in your Blogger Minima header section…Before we start be aware of the following:
- We are about to circumvent the standard Blogger Minima header management system so you will no longer be able to change your blog logo or blog description using the Blogger Layout editor – you’ll have to do it manually instead.
- You will need somewhere to host your image files (Picasa Web Albums is fine for this).
- You will need some form of image-editing software to create your logo/banner images – I use Adobe Fireworks.
Step 1 – Backup your template and any logo images you have!
I can’t stress how important this is! You’re going to make some mistakes when customising your Blogger template in this way – it’s an inevitability. Be smart and backup all your image files and your full Blogger template so you can always return to square one.
Step 2 – It might be wise to create a test blog
With Blogger it’s very easy to create a test blog which is a copy of your live blog. You can then make this test blog private and use it to get your new layout working without disrupting your readers too much.
Image layout of my #header-wrapper
For the purposes of this tutorial I’ll tell you exactly how I created the header section for this blog - The Beginner's Blogging Guide.
In the interests of fast page load times it’s smart to split your logo/banner up into multiple smaller images.
I created three separate images for the header section of this blog using Adobe Fireworks, they are –
begin_logo.png (the logo which is 4Kb in size)
begin_title.png (the title text which is 6Kb in size)
beginner_header_repeat.png (the gradient background which repeats horizontally and is less than 1Kb in size)
You can literally create any type of images for your header, just try to keep the file sizes small and make a note of the image dimensions. You will need these measurements to place the images in the next step.
If you don’t own Adobe Fireworks, you might like to try using a free image editing program like IrfanView or Paint.NET.
Once you have finished your images – upload them to your host and make a note of their URLs.
Step 4 – Create your divisional elements
The div layout of my #header-wrapper
For this blog I created two new divisional containers (divs) – “#logo” and “#title.” I also modified the existing #header-wrapper div.
You will need to go into the Blogger Layout/Edit HTML to create your divs. You will also need the exact measurements (i.e. height and width) of your logo/banner image files in order to adjust your div containers so the images fit inside and are correctly laid out.
For this blog I added the following divs to my template (Note: these are examples only and will not work for other blogs using different sized images)
My example header divs –
#header-wrapper {
height: 125px;
background-color: #586894;
background-image: url(your image URL goes here../images/beginner_header_repeat.png);
background-repeat: repeat-x;
width:1000px;
margin:0px;
}
#logo {
width: 137px;
height: 103px;
padding-top: 11px;
padding-left: 60px;
float: left;
}
#title {
width: 656px;
height: 78px;
padding-top: 25px;
padding-right: 35px;
float: right;
}
The main things to notice here are the repeating gradient background image of #header-wrapper, and the widths and padding in #logo and #title for image placement.
Use your image editing program to work out the widths and padding for your divs, then add them to your Blogger template.
Once you’ve finished save your template.
Step 5 – Remove your old logo images and blog description text
Go into the Blogger Layout/Page Elements menu and remove your existing logo image and set the header to display the default title and description text.
Now go into your Blogger template – Layout/Edit HTML and make the following changes to the #header-inner div –
#header-inner {
height: 0px;
visibility: hidden;
display: none;
}
This will effectively hide the blog title and description text, allowing you to display your own custom banner/logo.
Save you template.
Step 6 – Add your custom banner/logo html to your Blogger template
Once again, go into your Blogger template – Layout/Edit HTML and make sure you have the “Expand Widget Templates” box ticked.
Scroll down until you find:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your blog title (Header)'type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>
Now add your custom html directly after the <b:includable id='main'>
For this blog I added (Note: this is an example only and will not work for other blogs):
<div id='logo'>
<img alt='The Beginner's Blogging Guide logo image' border='0' height='103' src='your image URL goes here../images/begin_logo.png' width='137'/>
</div>
<div id='title'>
<a href='http://www.thebeginnersbloggingguide.com' target='_self'><img alt='The Beginner's Blogging Guide title text' border='0' height='78' src='your image URL goes here.../images/begin_title.png' width='656'/></a>
</div>
Once you’ve added your custom html save your template and take a look at the finished result.
Using these techniques it’s possible to put absolutely anything into your Blogger header!
In my next post I’ll tell you how you can add a Flash banner to your Blogger blog.
Nice post. Thanks
ReplyDelete