LNC73D48Wg201dLjeNZNf-jmBts BroUbanBlog: Blogger Tutorial: Different Backgrounds for Different Pages

Friday 17 February 2012

Blogger Tutorial: Different Backgrounds for Different Pages

Info : Blog Tutorial

Now that you can easily add multiple pages to your Blogger or Blogspot blog, you might have wondered if you can have a different background for each page, thus giving your pages their own unique look. Good news! You can! And this tutorial will show you how to do it in just one easy step. This tutorial was shared with me by Carolyn M. @ Pat Loves Carolyn. Thanks so much for the cool tip, Carolyn!! :)


Blogger Tutorial: Different Background for Different Pages

See this tutorial in action on my Blogger Test Blog. Click on the Home and Recipes links up in the top navigation bar and see how they have different backgrounds! :)
Ready to try it yourself? First you’ll need pages on your blog. Here’s a super quick tutorial to get you all set up. It also includes tons of page ideas to get you started! :)
Next you’ll need a background. Here are my top 4 favorite free background sites:


Or you can make your own personalized background using my tutorial right here! :)
From your Blogger Dashboard, click on Design, then Edit HTML. Look in that box of code and scroll down until you see </head>
(Quick Tip: Click CTRL-F to search for </head> to easily find it in all that code)
Just above that, copy and paste this:

<b:if cond='data:blog.url == &quot;http://YOURBLOG.blogspot.com/p/PAGE.html&quot;'>
<style>
body {
background-image: url(http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>

Two things to change:
Change this to your page’s link – the link to your new blog page where you want the custom background to appear. This is the address up at the top of the screen in the address bar.

Change this to the link to your background image. If you are using Photobucket to host your background, it’s the Direct Link.
Click SAVE TEMPLATE and that’s it!! You’re done!!

Blogger Tutorial: Different Backgrounds for Different Pages



Thanks for looking! :)

Photobucket

0 comments:

Post a Comment

Free Automatic Backlinks Online