How to Make Banner Images for Websites Non Clickable

Your blogger site requires a Blog Title or Banner Images for Websites.

If you move your cursor over these Banner Images for Websites, you will notice that they are clickable.

The Blogger Header Title or the Banner Images should never be clickable. So How to make your Blog Title or Banner Images for Websites non-clickable?

The Title of a Blog or the Banner (Header) Images are created to represent your blog, whenever any one opens it for browsing or reading.

This is sort of a brand for your blog. Slowly when your blog gets older and popular, people will recognize your blog by its Title or the Banner Images for Websites.

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 the Header Image of the Blog must be chosen very 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 is 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?

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 a little bit more tricky. So in the following paras, I will deliberate upon how to make Banner Images for Websites 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:-

<data:title/>

To make the Banner Images for Websites 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 🙂

header image header images