SEO Search

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Saturday, 14 April 2012

How to Add Different Backgrounds In Blogger Pages

Posted on 16:43 by Unknown
In the last tutorial, you learnt How to Add Different Backgrounds in Blogger Posts. Now this tutorial, will show you how you can have a different background for each of your page, thus giving your pages their own unique look. 


DEMO HERE

How to Add Different Background In Blogger Posts/Pages

Step 1. Log in to your Blogger Dashboard, then go to Template > Edit HTML.



Step 2. Select "Expand Widget Templates"

Step 3. Search (CTRL + F) for this tag:


</head>

Step 4. Just above the </head> tag, paste this code:

<b:if cond='data:blog.url == &quot;http://POST-OR-PAGE-URL.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>

Note:
  • Change: http://POST-OR-PAGE-URL.html with the URL address of your blogger post or page where you want the custom background to appear.
  • Change: http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG with the direct link of your background image.

Step 5. Click on SAVE TEMPLATE and you're done.

Email ThisBlogThis!Share to XShare to Facebook
Posted in Blog Design, how to | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • How to change Blogger "Post A Comment" Message
    In this tutorial i will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, I...
  • CSS Basics. How to Apply Rounded Corners On Images #1
    This tutorial will explain how to change the outside border of any image using some simple CSS rules to make it round, but this is so easy t...
  • CSS Basics. How to Apply Rounded Corners On Images #2
    In the previous post I have mentioned that we will learn to round images using CSS, without needing to edit them one by one using a program...
  • How to Replace Older Posts and Newer Posts Links with Blogger Post Titles
    If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not ju...
  • Making a gadget visible only to the blog administrator
    And the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Sur...
  • Expandable Recent Comments Widget for Blogger/Blogspot
    This Expandable Recent Comments is a very accessible widget that can be collapsed or expanded through user interaction, so that now, we don...
  • How to Add a Widget Below First Post in Blogger
    This tutorial will show you how to make a gadget/widget to appear just below the first Blogger post. First, you must understand that the usu...
  • Google adsense optimization tips
    What is Google Ad S ense?  Google AdSense is a free program run by Google that allows you to display Google adverts on your blog/website and...
  • How to Burn Blogger RSS Feeds at Feedburner
    What is RSS? A RSS (Really Simple Syndication) feed is a XML-based format for your content. Most blogging platforms, for example, will have ...
  • How To Remove Blogger Attribution Gadget
    The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may o...

Categories

  • adsense
  • adsense optimization
  • adsense tips
  • Auto Video Template
  • avatars
  • blockquotes
  • Blog Design
  • blogger
  • blogger posts
  • color code generator
  • Comments
  • comments tricks
  • css
  • emoticons
  • Emoticons/Smileys
  • Facebook
  • feedburner
  • forum
  • Hacks
  • how to
  • how to make a blog
  • Image Effects
  • internet
  • jQuery
  • labels
  • menus
  • Navigation
  • navigation menu
  • popular posts
  • posts
  • read more
  • recent comments
  • recent posts
  • related posts
  • RSS
  • SEO
  • sitemaps
  • slideshows
  • social media
  • social media plugins
  • static pages
  • Templates
  • threaded comments
  • titles
  • tools
  • translating
  • webbligi
  • Widgets

Blog Archive

  • ►  2013 (57)
    • ►  November (4)
    • ►  October (16)
    • ►  September (13)
    • ►  June (3)
    • ►  May (4)
    • ►  April (5)
    • ►  March (12)
  • ▼  2012 (73)
    • ►  July (1)
    • ►  June (3)
    • ►  May (9)
    • ▼  April (23)
      • Google Translate Widget with Flags For Blogger
      • Simple Recent Posts Widget for Blogger/Blogspot
      • A Beautiful jQuery Drop-Down Menu For Blogger Blog...
      • How to Add Emoticons/Smileys in Blogger Comments
      • How To Add or Change Favicon on Blogger Blogspot
      • How to number comments in Blogger/BlogSpot
      • How to Add A Comment Count Bubble To Blogger Post ...
      • How to Add Different Backgrounds In Blogger Pages
      • How to Add Different Background Color or Image in ...
      • How to Create Static Pages in Blogger
      • Tips To Avoid Your Google Adsense Account From Get...
      • Ways To Increase Page Impressions and Traffic on Y...
      • How to Replace Older Posts and Newer Posts Links w...
      • How To Disable or Turn Off Lightbox View For Blogg...
      • Blogger Auto Video Template by webbilgi
      • Add a Popular Posts Gallery just above your Blogge...
      • Add Google Adsense to Blogger Header (Above the Ti...
      • How to add an image next to Blogger Post Title
      • How to remove Blogger Picture/Image Shadow and Border
      • Replace Older, Newer And Home Blogger links with a...
      • Add Static Facebook Pop Out Like Box with Smooth J...
      • Amazing Examples To Customize Blockquote Style In ...
      • A Simple Related Posts Widget For Blogger
    • ►  March (30)
    • ►  February (7)
Powered by Blogger.

About Me

Unknown
View my complete profile