05 March 2013

How to Have Different Backgrounds for Each Page


How awesome is this design week? First a special thanks to Amy and The Charming Blog for celebrating blog design! This is such a fantastic week filled with fantastic designers and I am so lucky to be a part of it!

Now on to the meat and potatoes! I am here to show you how to spice up your blog with different backgrounds for different pages.



I will be using a free blogger template (you can download it here) to demonstrate how you can spice up your blog with just a few simple lines of code...DON'T LET IT SCARE YOU!

From your Blogger Dashboard, click on Template, 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:
1. http://YOURBLOG.blogspot.com/p/PAGE.html
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.
2. http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG
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!!



So for my test blog I would change my links to look like the following:

<b:if cond='data:blog.url == &quot;http://spantag-freebie.blogspot.com/p/about-me.html&quot;'>
<style>
body {
background-image: url(http://www.spantagdesigns.com/wp-content/uploads/2013/02/linen.jpeg);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>


Note: As always, be careful- one tiny little wrong space, quotation mark, or typo in the code can cause the whole thing not to work, so if it’s not working for you, double and triple check your work for typos.
If you got it working on your blog, leave me a link! I’d love to see it!


Having Issues? Send me an email and I might be able to talk you through it :) spantagdesigns@gmail.com



No comments:

Post a Comment

I love receiving feedback, so thank you! =)
Your support means the world to me.

Have a charming day ;)
xo, amy