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