Filed under: Cloud Computing July 14, 2009

I blogged previously about Adding Blogger Into A Website.  Part of the discussion was how to incorporate a common header and navigation bar between a website and Blogger.  I recently tested the alternative of embedding the header and navbar HTML/CSS code from my website into Blogger’s template file.

Click my Blogger site to see the results.

As you can see, it does technically work.  I was not able to use a widget but had to entered the code directly into the template.

(Be sure to make a backup before changing your template.) For the title, it should be a simple matter of adjusting the CSS entries to match my website so I didn’t even try.  More complex title bars (e.g. rounded corners) may require more work.

For the navbar,  I got the code by using view-source in the browser and copying the navbar HTML/CSS code from the website.  The code goes in the DIV section of the Blogger template.  Everyone’s template is a bit different, but there should be a section that starts with something like:

<div id=’header-wrapper’> <b:section class=’header’….

Put the navbar code in a DIV block below this DIV section.  The CSS entries should be placed in the CSS section.  I have attached my template if you want to see exactly how it was done. Blogger Template with Navbar

As you can also see, the header is not an exact match to my website.  It is a lot of work to make two different CSS stylesheets match.  Also, the Blogger navbar at the very top of all Blogger sites cannot be removed.  For these and other reasons, I have switched to WordPress which offers blog and website functionality (and its own challenges).  However, this test does show it is possible to make your Blogger blog look like it is part of your website.

No related content found.

Leave a Reply

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

Copyright © 2009-2015 Hayata Takeshita