Thursday, July 31, 2014

How to Create a Clickable Header for Blogger

Clickable headers are interactive ways to get users to the different parts of your website. Not only can these headers be aesthetically pleasing, but they can also provide you with more space for links to prevent your blog from feeling cluttered.

To learn how to create your own clickable header for Blogger, read on.

Go to your Blogger Dashboard.

Click to see a larger image.

Select "Template" from the left menu.

Click "Backup/Restore" in the top right corner, to backup your blog in case something goes awry and you end up messing with your layout code. Save the file to your computer.

Click to see a larger image.

Choose "Edit HTML."

Click to see a larger image.

Click within the code area and then hold CTRL + F. A small search box should appear to allow you to search for the code you need to tweak.

Enter the following code into the search box:

       <b:section class='header' id='header' maxwidgets='1'

Within the code, you will then want to change maxwidgets to "2," showaddelement to "yes" and locked to "false."

Save your changes, and then go to "Layout" in the left menu.

On your layout, make sure there is an extra header element to be sure the code works. On your original header, if you click on it, you should also now have the option to remove it. But don't remove it just yet.

Next, go to

Upload the image that you want to make clickable. The image will show up on the screen and then click "Continue."

Right click to create rectangles and shapes to select the areas that you want to make clickable. Then, enter the properties for that area (URL, color, etc.) If you want the areas to be transparent, you can erase all of the formatting options.

Right click on the image and select "Create Rect" for a rectangle shape. You may also choose "Create Poly" for polygon shapes, or "Create Circle" for circle shapes. Drag the shape to the first area you want to make clickable.

After you create your shape and drag it to the area you want to make clickable, enter the required information. The Map URL is where that particular clickable box should lead when clicked on. The "Title" section is for reference and the "ALT" section is where you may enter text for someone to click in case the image does not show up. You can leave the "ID" section blank.

Click to see larger images.

Click the "Events" tab to specify whether the link should open in the same page, or a new page. For the same page, leave the Target as "_self." To open in a new window, change it to "_blank." Everything else may be left blank, unless you're familiar with the attributes.

Finally, select the "Settings" tab. Unless you want your boxes colored in with borders, you may delete all of these attributes. Otherwise, you'll end up with colored boxes.

Click "Save" on the box and repeat the steps above for every clickable area on the image map.

Once you've selected and edited all of the clickable areas of your image map, right click again and select "Options."

Next, change the attributes of your image map. For now, leave the Image Source alone. Change the Base URL to the website you want to lead to if someone clicks somewhere on your image other than the clickable areas specified earlier.

Finally, save your image. Right click again and select "Get Code."

 Click on the second tab in the window, and scroll down. Copy the bottom code.

Head back to your Blogger Dashboard and select "Layout" from the left menu. From your layout, click "Add a New Gadget" to the second header area. Select "HTML/JavaScript."

Paste the code from your image map into the content area. Save the gadget.

Preview your blog to make sure that the header is working. At this point you will still have two headers. If your new header is clickable and correct, you may then remove your old header by going back to your "Layout," clicking on the old header gadget and selecting "Remove."

Note: will remove your image from their database after 24 hours. If your image is not hosted elsewhere, this will cause your header to appear blank, except for the clickable areas you selected. To host your image elsewhere, follow the directions below.

Find an image-hosting site. I prefer Photobucket. Create an account if needed, and then upload your image.

Click on your image and then copy the direct link to your image.

Go back to your Blogger Dashboard and click to edit your new header gadget.

Within the code that Image-Map provided, paste the direct link code after the "SRC=" attribute. Be sure that the direct link is placed in between the quotation marks.

Save your gadget and then view your blog.

Enjoy your clickable header!

Rate My Blog @ Top Mommy Blogs

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...