Using Blogger in a Web Page

Blogger can be used as the body for your personal website by ‘cleaning’ it up a bit; this requires some HTML/CSS knowledge and a little experimenting.

The way I did it is by creating a page with two frames; a small frame at the top (90rows) and a larger one at the bottom (* or remainder). The top frame is a menu bar for navigating around, while the bottom is a link to the Blogger page (i.e. broo2.blogspot.com)

Some modifications need to be made to the ‘Template’ Tab of the in Blogger settings:

1. Remove the ‘Blogger Navigation Bar’ by inserting the following after the <style type="text/css"> entry:

#b-navbar {

2. Remove the title bar by removing the <h3 class="post-title"> to the closing </h3>- which starts a little under the <Blogger> heading in the <body> of the HTML.

3. Change the width of the text from width:660px to width:100% under #content and #footer (if you use a footer). I also changed the #main from 410px to 79% and the #sidebar from 220px to 20% to allow them to resize as needed for different browser windows.

4. The last (and probably hardest) will be to make the text/background/formatting of the title and the Blogger frames match. I found it easiest to take the Blogger style sheet and edit it (taking out the Blogger specific entries) for use with my web page.

There are lots of other settings you can tweak- like font size, spacing, etc. I found some good CSS info at W3 Schools; also a good color wheel at Well Styled.

Hopefully this wasn’t too technical for the newbie; if it was, please respond to this post and I will answer to the best of my ability.

No comments:

Post a Comment