How To #2

How to add your banner to your blog:

I'm going to give you a secret now and most of you will just love me for it! It's a little thing I like to call "view source". This allows you to see the code for almost any website. We'll start with my blog since you're here and I'll walk you through the steps. Now, changing codes around when you have no idea what you're doing can be tough and dangerous. You can seriously mess up EVERYTHING. I wish I did, but I totally don't have enough time to fix things for everyone once they're messed up. My advice to you is to copy the code in your template tab onto a word processing program as it is so you can restore everything if it gets all jacked up. And so, it starts...

1. open up your blogger menu and click on the "Template" tab to open up the code that is currently related to your blog.

2. go to my blog in another window and right click (this can be done on any webpage that has a set-up you like) lets just pretend for the sake of the screen shots that it's mine. You'll see an option for "view source", click it.





3. now when you compare your code to mine, you'll be able to see the differences. WARNING: Don't get all crazy and start copying my code into your blog...most of it won't translate and you'll end up being more confused! Lets just deal with the banner at the top for today.

4. You'll need to save your banner picture onto a web hosting program like village photos, etc. That site should have instructions on how to save it and access it. Once you've got it uploaded to the web, go to the page where it is stored and copy the web address. *Hint* It might make it a little easier to access (since you'll have to a couple times) if you save it as a bookmark on your browser's side bar.


5. Now go back to your templates tab and start scrolling through your code until you come to the header section. This is where we'll be adding the url for your banner.






6. Remember when you made your banner I told you to save it at 800 pixels wide? Go back to that picture and find out the exact dimensions. You can do this by finding the picture on your hard drive and looking at the information that comes up when you click on it only once. you'll probably want to write this down for quick reference on the next step.



7. Now in your template section, you'll want to make the header look exactly like mine only insert your width, height and location. You can just copy and paste this portion and change the information to fit your banner size and location.

8. As you're going along changing settings to your code, you can click the preview button at the bottom to get an idea of what it will look like. You'll notice at this point that your old title still comes up on top of your banner. Many people like this. You can just change the background this way. If you don't, you'll need to follow the next few steps...

9. To remove the title from your header, save the changes that you've done so far and click the settings tab at the top of the blog preferences.

10. Erase the description so that it doesn't show up over your banner.







11. Now go back to your template section and we'll make a few more changes here.

12. You'll need to erase much of the information at the top of your blog. See screen shot for exact portions.







13. After that stuff is erased, you'll want to scroll down to your header section again where we added your banner location and size. Once you find it erase everything after that, before the "content" section. See screen shot for exact portions.





14. Now scroll down through your blog coding and take out anything that says "blog-title" so that it won't show up over your banner.

15. Now preview how your blog looks and make sure it looks right, if not do a little more tinkering by comparing your code to that of the blog you want it to look like. Every blog is different and so I can't tell you exactly what yours will need to look like, but this can get you pretty close. After it looks just right, save it and republish your blog. If you have questions, I can try to address them, but mostly you'll just have to experiment to learn how to make it look like you need it to. That's how I learned.

I hope this has been informative and helpful for you. If it confused you more, I apologize.