Skip to main content

How to put a gadget above your blog's header

This article is about how to put an item (any type of gadget) above the Title section in a blog made with Google Blogger.



If your blog has a layout or designer template, then (almost?) all of Blogger's templates start out with a nav-bar at the top of the screen, followed by a Header section showing your blogs title & description, or a custom header image if you've uploaded one.

And even if you go into the place in the layout-designer where you can re-arrange the layout by drag-and-dropping items, you cannot drag any gadgets to above the header.

But this is easy to change, provided you are willing to accept the disadvantages of editing your blog's layout template.


How to allow changes above your blog's header

Follow these steps to make it possible for you (or any blog administrator) to add gadgets to the area about your blog's heading section:

Edit your blog's template in the usual way

2  Find this code in your template:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>
Hint:  use the template-editor search tool, to look for a key phrase like "id='Header1'

Change it to
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>
Notice that there are two changes made:
  • Setting maxwidgets to greater than 1, and
  • Setting showaddelement to Yes, instead of No


Job Done:   after you have successfully saved this change, then the next time you edit your blog layout  (Dashboard > Layout  ), then you will find that you can add or drag-and-drop up to three gadgets to the Heading section of the blog, making a total of four.

You can add even more gadgets by changing the number for maxwidgets to something else.



Related Articles

Disadvantages of editing your blog's layout template

How to set up an extra administrator for your blog

Types of Blogger template

Planning changes to your blog - in private

How the data in Blogger blogs is organised

How to edit your Blogger template

Comments

Popular posts from this blog

How to share pictures from Google Photos, using shareable-links

This article describes how to get a link to one ore more photos from your Google Photos collection, using the Shareable Link controls.   It also explains how to delete shareable links that you have made in the past Google Photos is a tool for managing picture collections. It replaces Google+ Photos, and works alongside Picasa-web-albums.   You can read more about it here . Shareable Links are a new type of linking introduced in Google Photos, which let you easily share one or more pictures at the same time.   You can email them, or use them in tools like Facebook. When someone opens a shareable link, they see a display with the date, the name and picture of the person who is logged in to Google at the time, and all the pictures that are included in the same shareable link. If you want to use an image from Google Photos in a tool which cannot use shareable links, you need to find the URL for the photo, instead. How to get the shareable link for one photo in Google Pho...

How to rename picture files in Picasa-desktop

This article is about re-naming files from within Picasa-desktop, to provide SEO benefits for your blog. Picasa's desktop software is a good tool for organizing and editing photos on your local computer.   And it is still available for you to use, even though Picasa-web-albums has been replaced by Google Albums + Google Album Archive. For pictures that are important in your blog, I still recommend preparing them in a tool like Picasa-desktop and then uploading the finished versions to Google Photos before putting them into a post, because: The desktop tool has better editing tools (cropping, zooming, auto adjustment, adding watermarks) and Picasa-web-albums does. It lets you control the size of the uploaded file It's easier to ensure sure that you still have full-size files on my local machine for printing etc, as well as smaller, more optimized, copies to use on web-pages. Picasa-desktop folders have a very nice relationship with files and directories with the Windows file s...

Putting files into Blogger's root directory

This article explains the issues, and options, for putting a file into the "root directory" of your Blogger blog. Turnips (Brassica rapa)  from Wikimedia commons Originally posted to Flickr   by thebittenword.com.   Licensed under the terms of  the cc-by-2.0. If you are using certain non-Google products to enhance your Blog, they will sometimes tell you to put a file into your root-directory .   They may even tell you to use an FTP  tool to do this. Sometimes this happens when a product also gives you code to install into your blog  , This approach is used when the code is written for websites in general rather than specifically to work with Blogger: putting useful files into a place relative to the root directory makes it a lot easier to move a website from a test-address to the live one, so is a common approach outside of Blogger. Or maybe the other tool has been designed to verify that you do own the website in this way, rather than asking...