Adding/Customizing Pages

Welcome back for day three of Blog Design 101!
Today we’re talking about blog pages: how to make them, how to add a blogger navigation bar, and how to add different backgrounds to each page. {Custom navigation bars tomorrow}

Adding Pages: {Luckily, this is one of the easiest blog design tricks}
1. Go to “design.” Click on “Posting,” then “Edit Pages,” then “New Page.” Your screen should look like this:
 
2. Title your page and add content. Then click “Publish Page.”
3. You will be prompted to add a “Pages Gadget.” Your screen will look like this:

 
This gadget allows readers to toggle back/forth through the pages in your blog.  If you want your blogger navigation bar beneath your header, choose “blog tabs.” If you want the blogger navigation bar in your sidebar, choose “Blog Sidebar.” If you want to create your own custom navigation bar, choose “no gadget.”
**Before choosing “no gadget” and embarking on the relatively time intensive path of creating a custom navigation bar, I’d suggest trying one of the blogger versions first. Depending on the template you have, the blogger navigation bar might fit your needs. You can also customize the blogger navigation bar, see below.
Add a different background to each page:
 1. First your need a background image. You can create your own (awesome tutorial here) or grab a free one (google “free blog backgrounds“). If you create your own, upload it to imageshack.com (free) and copy the direct link.

2.. Add your page address and the background image’s direct link into the highlighted section of the following code:

<b:if cond='data:blog.url == &quot;http://heidisampleblog.blogspot.com/p/new-page.html&quot;'>
<style>
body {
background-image: url(http://i133.photobucket.com/albums/q64/alliebrownie/355.jpg);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>

3. Click on “Design,” then “Edit HTML,”  then “Expand Widget Templates.”{Remember it’s a good rule of thumb to save your old HTML before editing it – Click “Download Full Template.”}
4. Search for </head> and insert the code (created in step 2) immediately before this.
5. Unfortunately you cannot preview different page backgrounds {This is why you should save your old html code before altering it.} Click “save template.” Go and admire your new page backgrounds! 
My sample home page:
   

My new page:


Remember to tell your friends! 

Comments

  1. Steffi says:

    Another nice addition to your design series, you write it up so well that everyone can understand it.

    The only extra things there would be is different ways with backgrounds.

    If you wanted your background to only show once then you use background-repeat:no-repeat;. I have this on my blog where I have text in the top corner which is a background image and I don't want it to show more further down the page.

    On my blog also my background position is top left, so I use background-position: left top;. You can position your background using left, center, right for along the width of the page. And top, center, bottom to position it along the height of the page.

    Maybe you have a background you only want showing at the top of your page, so you set it to background-repeat:no-repear;. But now the bottom of your page is just white and you want it blue! add into the code background-color:blue; You can use most standard colours by name (blue, red, green, black etc) but sometimes you may need a particlar colour. so instead of blue you need to put #000099 which is a deep blue. You can find out the # of a colour in the blogger design template, or google "colour hex" to find online sites to help you.

    For more background help google "css background" and the first link should be w3schools.com and they can help you in remembering what each bit of code will do!

  2. Melinda says:

    Sooo – is the 'new pages' for things like, say, "My story", "FAQ", "Sponsors", and things like that? Things that usually appear at the top of ones page in a bar (faq, sponsors, my story) then you click on them and it takes you to a special page JUST for that topic? Thanks!

  3. Heidi says:

    Thanks Steffi!

    Melinda,
    Yes, that is exactly what new pages are for. Thanks!

    -Heidi

  4. Cole's Corner says:

    Yea! I can't wait to try this!

    I just made some pages the other day… but I didn't know how to make them cute!

    thanks so much!

  5. Small business Lead Generation says:

    Really Amazing , beautiful design for Blog. The blog designes were really smashing hit!I loved your work!

  6. lnternet Marketing Course Tips says:

    Great tips! Perfect for those who wants to have marvelous designs. Thanks :)

  7. UGG says:

    I drop a leave a response whenever I like a post on a blog or if I have something to contribute to the conversation.
    Usually it is caused by the sincerness communicated in
    the article I looked at. And on this post Adding/Customizing Pages.

    I was moved enough to drop a thought :-P I actually do
    have a couple of questions for you if you do
    not mind. Could it be just me or does it look like like a few of the comments look as if they are written by brain dead
    folks? :-P And, if you are posting at other social sites, I’d like to follow you. Would you make a list every one of all your shared sites like your linkedin profile, Facebook page or twitter feed?

Speak Your Mind

*