Header Image

How to Make Header Image Non Clickable

Your blog requires a Blog Title or a Blog header Image. This Title or Image is created to represent your blog whenever any one opens it for browsing or reading. This is short of a brand for your blog. Slowly slowly when your blog gets older and popular, people will recognize your blog by its Title or Header Image. Even Color, Font or Style of the blog will be known to people and later on you can not just afford to change it. So Title of the Blog or Header Image of the Blog must be chosen wisely with utmost care and durability in mind. Now coming back to the subject, What if the title of the blog or Header Image is Clickable in your blog. YES it remains clickable by default. I do not understand the logic behind keeping the title or header image clickable by the blogger application. May be some people like it. Some people like it to return back to the same page or to their Home page as per the link configuration, but for me its just an agonizing factor more so because I always prefer to keep a Home button in my blogs. So how to get rid of it?

Header Image

Removing the link from the Blog Title and making it Non-Clickable is a much more easy task. But when you are going to do the same with the Header images, it is little bit more tricky. So in the following paras, I will deliberate upon how to make these items Non-Clickable.

Note: It is always advisable to take a backup copy whenever you attempt to make changes to your Template data.

Go to Blogger > Templates > HTML.
Press Ctrl+F and look for <data:title/> or data:blog.url from the search option.
Look for the following code in your template.

    <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 make the Blog Title Non-Clickable, Change the above code to a single line as follows:-


To make the Header Images Non-Clickable do the following.
Look for the following code in the Template by typing <a expr:href=’data:blog.homepageUrl’ style=’display: block’> OR <!– Show the Image Only–> 

      <!–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>

Now delete the following code from the above series of codes.

       <a expr:href=’data:blog.homepageUrl’ style=’display: block’>

Save the template and Check to find that your Blog Title or Blog Header Image has been made Non-Clickable.

Enjoy Blogging 🙂 

You might also like More from author

1 Comment

  1. affiliate marketing notes says

    I was suggested this website by my cousin. I’m not sure whether this
    post is written by him as nobody else know such detailed about my difficulty.
    You’re wonderful! Thanks!

Comments are closed.