Clickable Headers for New Blogger. ~ The Blog Doctor.
Loading...

Clickable Headers for New Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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 :

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="false" title="The Widgets of Beta Blogger. (Header)" type="Header">
</b:widget>
</b:section></div>

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 :

<a href="URL OF YOUR BLOG" target="_blank"><font size="7" face="Georgia, Arial" color="maroon">TITLE OF BLOG</font> </a>

Replace the CAPS with the appropriate values for your blog. This will look like this :

TITLE OF BLOG

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 :

<b:widget id="Header1" locked="true" title="The Widgets of Beta Blogger. (Header)" type="Header">

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.
SEARCH ENGINE OPTIMIZATION For better SEO Choose Html/Javascript Page Element. Then in the content box paste the code for the link to your uploaded picture : <a title="YOUR BLOG TITLE" href="BLOG URL" target="_blank" ><img src="URL OF YOUR BANNER AT GOOGLEPAGES" alt="YOUR BLOG TITLE"></a> and Save.
Click add to blog. In the content page that opens paste the URL of the picture you have saved at Googlepages in the URL text box. Save changes. View Blog. Enjoy. Also see How to insert a Banner Link to your blog in your posts.

Technorati Tags:, ,

16 comments:

Jennifer Cummins said...

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) :(

Jennifer Cummins said...

oops; can you take my url out if I violated your directions?

vin said...

Jennifer,

Not sure I get your meaning! :-)

vin said...

Jennifer,

You have put in an extra HTML widget on top of the usual title widget. If you want to remove the title widget see method shown in :

How to add picture to header"

D or M, but probably M said...

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

D or M, but probably M said...

Never mind. It took me a few minutes and a few tries, but I've figured it out. Thanks anyway though!

Pushhyarag said...

Vin,

I'm delighted I could implement it perfectly. Now, I had title description as well in the deleted widget over the Header image. How & where can I put that now?

Vin said...

Pushhyarag,

What do you want to do?

Show title and description above title image or infront of it or below it?

Pushhyarag said...

Vin,

In my original Header widget of Beta Blogger, I had the Image behind title & description. I will be happy to have the same arrangement(If it is the same as in front of it)in the clickable header.

Vin said...

Pushhyarag,

Have a look at Add Background Picture to Header in CSS.

Wade Laycook said...

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?

Thanks,
Wade

Vin said...

Wade Laycook,

Seems OK in Firefox browser.

Robyn said...

Hi Vin,

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?

Vin said...

Robyn,

Check that you have this code in the template :

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>

The Royal Family said...

So I cant find the max widget or show add element in the HTML. I have a pic as my header from a blog makeover.... dont know if that makes a difference.

I think I can try again if I could figure out how to add the element to the header section in the layout screen. Thanks, Brandy THE BUZZ

Highton-Ridley said...

Hi Vin,

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>

(added code shown in bold)

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

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,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.