Owners Of Blogs, With Images In The Header, Report Changes In Header Appearance

During the past few days, we're seeing a few reports in Blogger Help Forum: Something Is Broken, from owners of blogs that use an image in the header, instead of or in addition to, plain text, claiming changes in the appearance of the header. The exact problem report varies - that the image has been resized, has shifted in position, has become pixelated, or has simply disappeared.

We have a rollup discussion, where we are requesting details from each person observing this problem in their blog.

1. What is the URL of the blog?
2. What exact symptom are you observing, that's a problem?
3. Does the blog use a Blogger or third party template?
4. Does the blog use a Designer or Layout template?
5. Has the blog been configured for a Dynamic template?
6. How did you setup the image, that is in use on your blog? Did you use the Layout "Configure Header" wizard, did you upload the image using the post editor "Insert image" wizard, or other?
7. If you used the "Configure Header" wizard, which Image / Placement options did you select?
   • From your computer.
   • From the web.
   • Behind title and description
   • Instead of title and description
   • Have description placed after the image
   • Shrink to fit
8. Can you find the image on your computer? If so, what is the name of the file, as uploaded? Is it a .bmp, .jpg, .png, what?
9. When you setup / uploaded the image, what browser (name and version) was used?
10. What browser (name, and version) are you using, right now, where the problem is visible?

If you can provide details, please do so as best as you are able, either here or in the rollup discussion.

In cases where the URL of the image in use can be edited, you may be able to work around your problem, by editing the precise URL. It appears that images hosted by Picasa, which are currently stored in a variety of sizes (which you may see when you use "Insert image", for instance), are now selected in a different way, when you do not explicitly select the right size for your purpose.

Look at the image at the top of the screen. If you were to look at it's URL, you would see:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2C5RmwbU8URBRB_n_HzNYhK2r3KBzHNIRCjjnOPDDcP5FSddfRh9bKZ3Qyxg10CU24Pr9Zx7j8IJzq1rlptTB_NtJpltts4jm3Hfsi3E2Ovt3QqFXnT-NavhPRoaVUQJJcQZRyjgn2_s8/s1600-r/RBS+Header+4a.gif

If that image had been uploaded using the current "Insert image" wizard (in post editor), or the "Configure Header" wizard (in "Page Elements"), it might have the URL

http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/RBS%2BHeader%2B4a.gif

If the latter URL was correct, there would be 4 aliases available:

• Small: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S160/RBS%2BHeader%2B4a.gif
• Medium: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S320/RBS%2BHeader%2B4a.gif
• Large: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S640/RBS%2BHeader%2B4a.gif
• Full Size: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S1600/RBS%2BHeader%2B4a.gif

If I had this problem with my header image, I would edit the URL, in the template, and I would replace:

http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/RBS%2BHeader%2B4a.gif

with

http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S1600/RBS%2BHeader%2B4a.gif

If your blog has this problem, you may be able to similarly edit your blog - using "Configure Header" or "Edit HTML" - and work around your problem. If you use "Edit HTML", I suggest, as usual, that you backup the template - before and after making this tweak.

>> Top

Verifying Ownership Of Your Site To Bing Webmaster

As a web master (aka blog master), besides adding posts and enhancing the template, you have a third activity - connecting your web site (blog) to other web sites and blogs. In many cases, you'll simply send the owners of the other web site (blog) a request to link to your blog.

For links to large and very active web sites, you'll use an online wizard. To prove ownership of your web site, instead of sending email, you'll add a file of specific name, or maybe specific content, into the web site. You can't add a file to your blog, though. With a Blogger blog, you have no control over files and folders - all that you do is publish posts.

One of the most important web sites that you can add your blog to, similar to Google Webmaster Tools and Yahoo Site Explorer, is the Microsoft search engine, Bing.

Similar to Google Webmaster Tools and Yahoo Site Explorer, Microsoft provides Bing Webmaster, which provides you the web site (blog) owner the ability to monitor and tune the relationship between your web site (blog) and Bing, the Microsoft Search Engine. When you add a non Blogger web site to Bing Webmaster, you add a file of specific name and content, to the root. When you add your blog, you add a record of specific content - a meta record - to the template.

This meta record, which provides your verification of ownership to Bing, may be one of the most important single lines of code in the template. Add this with care.

1. First, and always, backup the template for the blog.
2. Sign in to your HotMail / Live / Microsoft account (Yes, here, too, you have to sign in! And you will need a Microsoft accepted account!)
3. You start from Bing Webmaster Center - Home.
4. Under "Sites", you'll see the "Add Site" button. Hit the button.
5. Paste or type the URL of the blog into the "Site:" box.
6. Hit "Submit".
7. Now you'll have "Verify Ownership".
8. Click on "Option 2: Copy and paste a tag in your default webpage".
9. Copy the meta record, as presented to you.
10. You'll take the record as provided, and reformat it slightly. Here's an example of what they provide.
    

    <meta name="msvalidate.01" content="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
    

    
    Here's what I used.
    

    <meta content='XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' name='msvalidate.01'/>
    

11. In another tab or window, open the template editor window, for the blog.
12. Copy the record into the template for your blog, just below the records added for Google Webmaster Tools and / or Yahoo Site Explorer verification.
13. Save the template.
14. Back in the Bing Webmaster "Verify Ownership" window, click on the "Verify" button.
15. You'll now see your site, added to the Sites list, and the "Dashboard" for your newly added site will be displayed.
16. And again, backup the template for the blog. Save both backups.

Having verified ownership of your site, you now have access to various features of Bing Webmaster.

>> Top

Make The Blog Header Non Clickable

Everybody has their own idea how they want their blog.

Not everybody wants the blog title to link back to the main page at all, while some folks would like to have the title link back to the main page even when the main page is displayed.

The default Blogger code enables a link in the blog header, when anything but the first segment of the main page (aka "home" page) is displayed. Some people would like the link completely disabled, on all segments. Others would like the link enabled, on all segments.

Some folks don't like the way the title changes colour - in many blogs, the "links" (unvisited links) and "visited links" have colours that stand out from the text. Look below - see the purple and blue text? Those are links. If you don't like the title to colour itself, you remove the links - or replace the title with a picture - as I have done above.

In most of my blogs, I could do without the clickable title, completely, as I have my Menu Bar, which includes a "Home" link.

For some blogs, removing the link, in the blog title, is a fairly simple change.

Blogs that use text in the header (including text over a picture) contain code that's reasonably easy to tweak. Blogs that use a custom image in the header, with no text, are slightly more challenging.

This is done under the layout template editor. First, (yes, again!) back up the template. Next, "Expand Widget Templates" and look in the body, for

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
    <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>

To disable the link completely, change all of that to one simple line.

     <data:title/>

To enable the link, completely, change all of that to one alternately simple line.

     <a expr:href='data:blog.homepageUrl'><data:title/></a>

Blogs that use only an image in the header contain some more complex code to display the image. They include the link in all pages, without any checking for the home page.

      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
          <b:include name='description'/>
        </b:if>
      </div>

Here, the only choice is to remove the link, if you wish.

      <!--Show the image only-->
      <div id='header-inner'>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
          <b:include name='description'/>
        </b:if>
      </div>

Save, and test. And (yes, yet again) backup the template.

>> Top

Verifying Ownership Of Your Site To Google Webmaster Tools

As a web master (blog master), besides adding posts and enhancing the template, you have a third activity which is almost as time consuming.

You will be constantly connecting your web site (blog) to other web sites and blogs. In many cases, you'll simply send the owners of the other web site (blog) a request to link to your blog.

For links to some web sites, you'll not use email, you'll use an online wizard. To prove ownership of your web site, instead of sending email, you'll add a file of specific name, or maybe specific content, into the web site. You can't add a file to your blog, though - with blogs, you have no control over files and folders - all that you do is publish posts.

One of the most important web sites that you can add your blog to is Google Webmaster Tools.

"Webmaster Tools" - now known as "Search Console" - provides you the web site (blog) owner the ability to monitor and tune the relationship between your web site (blog) and the Google Search Engine.

Note that some time ago, Blogger added a quick, universal verification of your blogs. At the bottom of your dashboard, under "Tools and Resources", you'll find a link "Webmaster Tools". This appears to generate a file known as the "WMX Verification File".

Right now, there are some odd circumstances which may be a result of using that link. For right now, I would only verify my blogs, one at a time, adding a meta record - as shown below.

When you verify ownership of your web site to GWT, you add a file of specific name and content, to the root. When you add your blog, you can't do that, so you add a record of specific content - a meta record - to the template. Note that the automated process which reads the blog header, and verifies your ownership, appears to be sensitive to private blog settings.

This meta record, which provides your verification of ownership to Google Webmaster Tools, may be the most important single line of code in the template. Add this with care.

1. Sign in to your Google account.
2. You start from Google Webmaster Tools - Dashboard.
3. In the Click here to add a site box, enter the URL to your blog, and then hit Add Site. Make this entry identical to the URL to which the blog is published. Use the following examples, substituting appropriately your value for "myblog", "mydomain", "xxxxx", and "zzz".
   • If the blog is published to "myblog.blogspot.com", enter it as "myblog.blogspot.com".
   • The blog will never be published to "www.myblog.blogspot.com", so do not enter it as "www.myblog.blogspot.com".
   • If the blog is published to "mydomain.zzz", enter it as "mydomain.zzz".
   • If the blog is published to "www.mydomain.zzz", enter it as "www.mydomain.zzz".
   • If the blog is published to "xxxxx.mydomain.zzz", enter it as "xxxxx.mydomain.zzz".
   If you rename the blog, either changing the BlogSpot URL or republishing to a Custom Domain, remember to repeat this exercise with the updated URL.
4. This will take you to Overview.
   

   Next Step
   Verify your site. By verifying your site you can access comprehensive statistics and crawl errors about the pages in your site

5. Click the link for "Verify your site".
6. This will take you to Verify a Site.
7. In the Choose verification method... pull down list, select Add a meta tag.
8. This will generate your site verification meta tag. Highlight and Copy the text from the box.
9. In a separate window, edit the template for your blog. Add into the template, in the heading section, your site verification meta tag, that's provided by the GWT wizard. After you add the meta tag, you should have something like:
   

   <head>
       <b:include data='blog' name='all-head-content'/>
       <title><data:blog.pageTitle/></title>
       <meta name="description" content="......."></meta>
       <meta name="keywords" content="......."></meta>
       <meta name="verify-v1" content="......."></meta>
   
       <b:skin><![CDATA[/*
   

   
   Note that some detail was removed from the above example, and that the above example shows template code for designer and layout templates.
   
   You might want to observe the different ways to format a meta tag, including differences between classic and layouts formats. The XML, in a layouts template, will require a properly closed tag.
   
   • The tag will probably be presented, by the GWT wizard, as

     <meta name="verify-v1" content=".......">

   • One way to code the tag, in a layouts template, would be

     <meta name="verify-v1" content="......."></meta>

   • A second way to code the tag, in a layouts template, would be

     <meta name="verify-v1" content="......." />

10. Save Template Changes.
11. Go back to Verify a Site, and hit Verify.
12. This will take you to Overview. Part of the display will include:
    

    You've successfully verified (your site)

    and may include
    

    No pages from your site are currently included in Google's index.

    and

    You have not submitted any Sitemaps. Submit a Sitemap to help Google discover pages our crawlers might not otherwise find.

    Select the Sitemaps menu entry.

Having verified ownership of your site, you now can add a Google Sitemap, or use the other features of Google Webmaster Tools.

Configuring The Page Header

When someone starts decorating their blog, one of the first things done is to replace the plain text page header with something more stylish. That task has become gradually easier, starting with the rollout of New Blogger (2006).

With a Classical template, this was done by editing the template HTML. When New Blogger (2006) started out, this was originally done by creating an HTML page element, and putting it in place of the Page Header page element. Recently, Blogger added options in the Header GUI, which lets you create a passable custom element, in just a few minutes.

From the Page Elements GUI, click the Edit link in the page header. This gives you the "Configure Header" wizard, which has several key abilities.

• Upload a graphic file (from your computer or elsewhere or in the web).
• Select whether the uploaded graphic is to replace the text Title and Description, or simply be placed behind it, as a background element.
• Select whether the uploaded graphic is to be shrunk to 660 pixels wide.

This is not an extensive set of options, and a few bloggers will still opt to replace the header with a hand created HTML page element. For most blogs, though, this will make an excellent first step in making our blogs more attractive. Certainly, it's a start, and may motivate other decorations.

>> Top