I decided to create a practice blog to...well...practice on. Turns out to be one of my better moves. Initially I thought I would be clever and simply paste my old template into the new 'Edit HTML' area. Turns out not to be one of my better moves. The red error messages flew at me fast and furious. Not to be defeated, I changed my strategy. I retreated back to their template, Minima.

I found the new template code to be different and contained things I have no idea what they are or do. Even after reading the instruction manual. *sigh* I'm sure an understanding will come at some point in time. At least I hope so. Until then I will do what I can which relies heavily on trial and error. The good part about my method, is I learn as I go. My new plan was to take this template and make it look like my orginal one with the added widgets and labels that I want to incorporate into my blog. The best of two worlds. Plan of attack...start at the top and work my way down. The header it was.

I wanted to replace the header with mine as I have it in my orginal blog. So, without further ado, this is what I did:

Victory was mine! I was able to replace the header with my own, remove the border and make the Blogger title 'invisible'. Now, I'm not claiming my method is proper coding. I realize that those of you with much more knowledge in these areas will look at what I have done and shudder. But, it worked for me.I'm already thinking about what to tackle next!

12 Comments:

Hi Annie, good to see a fellow-blogger exploring this unknown territory. I guess your approach to replacing your title is quite good. It looks good at your testblog, so it works like it should.

I have a few suggestions for the coding:

You could remove the border-statement from your header-wrapper, instead of setting it to 0px; If there are no other calls to the $bordercolor-variable, you can remove this variable from the css; this will remove it from the fonts&colors layout editor as well.

You have made the title invisible by setting its color to white and its size to 0 (is that correct?).You could instead insert the codedisplay: none; in the css-part of header h1.

Hope it helps.

Suggestions for your next move: 2 sidebars to the left and a main area to the right. I have made a tutorial about adding a second sidebar here.It is easy to implement, and you can add your html-code snippets, your blogrolls, and so on, to the sidebars using the page elements editor. So easy to maintain as well.

Thanks for the amazing tips! I was somewhat perturbed to find out that the code looked so different in BETA considering how long it has taken me to figure out in regular Blogger.

Anyways, I have followed your excellent steps in my new blog, but I just can't persuade the banner to appear - I am SO CLOSE, I can feel it - I wonder if you wouldn't mind taking a quick look for me to see if you can spot any elementary mistakes?

The max width is 700px, but your image is 860px. So, change one or the other. If that doesn't work, copy and send me your template. (For some reason in blogger beta, I can't copy the source into the template and save it anymore to work on other templates...unless they send me the code from the 'edit HTML' section.)

Post a Comment

Due to,happily, a steadily increasing readership, I'm not able to answer or solve all comments/problems. I do keep track of them and answer what I can as time allows. This is my attempt to balance home and blog.

To add a link in this comment, copy and paste this code in the comment window: <a href="URL">seen on post</a> Change URL and seen on post. For instance, to have a link to BlogU, the code would look like this: <a href="http://bloggeruniversity.blogspot.com">BlogU</a> To use the DOFOLLOW attribute on this blog, please remember to use the NAME/URL option when commenting rather than linking to your profile page for more exposure!