How to create a customizable header for the Dynamic Views template in Blogger

2011-12-31T16:04:00.000-08:00

Whew, that title was a mouthful!

Okay, so first on the agenda is my plea for forgiveness that I do not have a customizable header of my own as proof that I do, indeed, know how to accomplish this task. Hopefully, by the time you've found this you'll see one above. If not, queue pleading ;)

With that said, I do still have proof:

Pretty, right?! That is a screenshot of my personal blog which also utilizes the Dynamic View template.

Second item on the agenda is a clarification of sorts. As you can see above, it is certainly possible to showcase a custom header on your blogger site while collectively using Dynamic Views; however, you cannot change the size of the header, nor can you use a custom header in conjunction with a preset background. Your custom header and your background are one-in-the-same.

Last on the agenda: the tutorial.

Back in October 2011 Blogger Buzz supplied a post notifying users that they can add a custom header. It reads, "Using the Template Designer, you can now modify your background, fonts, or colors, and add a custom header image like we did on Blogger Buzz (just make sure it’s 65 pixels high)." - click on the link if you wish to view the article - Unfortunately, they did little else to help teach us how to do this. They did, however, provide us with a very important hint: just make sure it's 65 pixels high. The second hint they give us can be found in your Blogger Template Designer's Background feature. When you attempt uploading your own background there is a note stating 'For a full background use images 1800x1600 or greater.'

Ah ha! First, you will need to create a banner (or 'header'). So, open Photoshop and create a 'new' project (CTRL N). Use those hints to determine your banner/header size. Width: 1800 pixels; Height 65 pixels.

Click 'OK' and your template will become available for you to customize. You can do whatever you please with it - have fun!

Once you have finished and saved it, log on to your Blogger dashboard. From the dashboard you'll enter the Blogger Template Designer. In the Blogger Template Designer's main screen find and click on 'Background.' From there you'll click on the little triangle next to the 'Background Image' display. Choose 'Upload Image' at the top. Choose your file, upload, and click 'Done.'

Initially your header will appear in 'tile' format and will look very unbecoming. This needs to be changed :) Be sure the alignment is set to the top left and set the tile option to 'Don't tile.'

One last little tweek and your page should be looking spiffy. Is your Blog's title showing up and getting in the way of your nice, new header? Indeed. Simply go to your advanced settings (your still in the Blogger Template Designer, right?). In your advanced options click on 'Blog Title.' Here you will want to change the color of the title to transparent. This can be achieved by choosing that option in the color drop down menu or by typing 'transparent' into the word box.

I really hope this tutorial helped you! Post a comment and show me your new 'Dynamic' blog header :)

The Professional Novice

How to create a customizable header for the Dynamic Views template in Blogger