Ye Olde Blogger had clickable headers which enabled viewers to return to the main page simply by clicking on the headers on any of the post pages. The New Blogger seems to have done away with this function by substituting navigation links at the bottom of each post. However the clickable header can be implemented in......two different ways in the New Blogger. You can have a title which is clickable or an image/picture in the header which is clickable and returns you to the home page.

CLICKABLE TITLE

To enable a title to be clickable first you will have to delete the title and description widget in the header and then add a Blog Title and Description in a Html/Javascript widget. First we will add an extra Page Element to the header as shown in How to add Picture to header. Log in to Blogger Beta---->In Dashboard choose your blog and click on Layout------>This takes you to the Add and Arrange Page Elements page------->Click on 'Edit Html' Tab to open the Edit Template page. Let Expand widget templates box be unchecked. In Edit template field scroll down till you come to the code for the header which is :

In the above code change maxwidgets="1" to maxwidgets="3"Also change showaddelement="no" to showaddelement="yes"Save Template.

Now click Page Elements tab. The Add and arrange Page Elements page opens.Here you can now see that header section has a Add Element link. Click it to open the choices page. Choose Html/Javascript option. In the contents section paste the following code :

To customize it further change the font-size, color and font to whatever you want. Then save the widget.

REMOVE TITLE WIDGET

To remove the title widget go back to Page Elements and click on Edit link in the Title box. In the popup window which appears click 'Remove'. If there is no Edit link in Title box then go to edit Html subtab and scroll down in Edit Template text box till you come to :

In above code change locked='true' to locked='false' and save template. Go to page Elements subtab and now there will be an Edit link in the Title box and a Remove link after clicking on Edit. Click on the Edit link and then on the Remove link.

CLICKABLE PICTURE IN HEADER

To add a clickable picture in header repeat the step to add a page element in header as described in first paragraph and then click ob Add Page Element link in header. Choose Picture type.

16
comments:

Thank you for this tip. It worked wonderfully. Now, however, I cannot figure out how to remove the second title underneath the capitalized title on my blog. I cannot find out where it is coming from, on my dashboard and on the page elements page. Any help with this? Can you take a look? Http://ourchildrensamerica.blogspot.com (I hope this is the correct address) :(

Hello. I have a question and tried to find the most appropriate place to post it. I am changing templates and am having trouble getting everything to change back to the way it was. There is now a search bar in my header (not the nav bar). how can i remove it? I have another problem, but will search your blog for an answer first. Thanks! dougandmariecaldwellfamily.blogspot.com

Thanks for the tutorial. I made a clickable image title now using the HTML/Javascript box for better SEO results. However, it is positioned a little to far off center for my liking. How can I shift it over a little?

I have an old blogger blog and have made some changes to the header to add my own image, etc. But I, for some reason, can not click on the title for it take me back to my blog. Do you have any idea what I need to do to fix this? I did a no display for the description, removing it from the header, but the title has not been hidden and should still work as a link, right?

For those using a background image to their blog with a title, a much simpler and better way is to find this:<div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/>and replace the <b:include name='title'/>with<a expr:href='data:blog.homepageUrl' style='display: block'><b:include name='title'/></a>

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,