Clickable Headers for New Blogger.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...... Technorati Tags:blog header, blogger hacks, picture in header
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.
Like this article? Subscribe to the RSS feed!
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
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) :(
oops; can you take my url out if I violated your directions?
Jennifer,
Not sure I get your meaning! :-)
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"
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
Never mind. It took me a few minutes and a few tries, but I've figured it out. Thanks anyway though!
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?
Pushhyarag,
What do you want to do?
Show title and description above title image or infront of it or below it?
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.
Pushhyarag,
Have a look at Add Background Picture to Header in CSS.
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
Wade Laycook,
Seems OK in Firefox browser.
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?
Robyn,
Check that you have this code in the template :
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
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
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.
Who is talking about the above post?