It is getting common practice now a days to use Image maps in blog header navigation and to create different Blogger Gadgets. But, In my opinion using Image map to create header navigation might give bad result, if it is not implemented correctly. Here, In this tutorial I am going to explain you how to use an Image map to create navigation header for your Blog. Click here for demo.
To create image map, first we need to create and customized an image and then create hyperlink area on image. Follow the below steps in order to create blog header image map for your blog.
Creating a Banner Image using PicMonkey
You can use Photoshop or any other softwares or online programs to create a banner. Here, I will be using an online program www.picmonkey.com to create a banner.
Step 1. Go to www.picmonkey.com, Click on Design and then Custom.
Step 2. Enter a custom size of banner you want to create and click on Make it!.
If you don’t want to create your banner from scratch and want to edit your existing blog banner then upload your image file of banner by clicking on Open->My computer.
Step 3. Customized your banner by using Basic Edits functionality. Here, In below image banner I have used three links and social icon which I will make them clickable using Image maps.
In the above image, I will make the text (highlighted with red arrow) hyperlink using image maps.
Creating Image map using Image-Maps.com
Step 1. Go to http://www.image-maps.com and upload your file by clicking on Browse for File.
Step 2. Click on Start Mapping and then click on click to continue.
Step 3. Point your mouse pointer on the text for which you want to create hyperlink and then Right-click on image to bring up the menu. Select menu option as per your text or image. Here, I am selecting rectangle.
Step 4. Adjust the rectangle size in such a way that it covers your text. Enter Map URL, Title and other attributes and then click on save.
Here, Map URL is the link you want to open when clicked on task. ALT is alternative text and Data Maphilight is an attribute to highlight your map text.
Steps 5. Repeat step 3 and step 4 for other text which you want to convert it into clickable hyperlink.
Step 6. Right-click on the image and click on Get Code.
Step 7. Click on Html Code tab to get the code.
Note: If you want your image to hosted on image-maps.com you must need to register on image-maps.com. If you don’t want to host your image on image-maps.com then you need to upload your image and change the image url from the above code. Follow the below steps to host your image and change the code.
1. Upload the image to your server and get the url.
2. Replace the highlighted part of code with your image url. For example I will replace the highlighted code with my image url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_U_E819ksteMnPljTV2r8nMURqCJiLNLzfl3RrTUJisRv2WizdPmjJZ9X2FTRDLj1JLb4SHwPQESm8ibw-6nBLUv0AXW6j_3FrTQ3T2mmrrflI0cxCwEkrphnummesWoivxuXdIGF8DoZ/h22/eKnowmax_navbar.png
After replacing the image url
Step 8. Copy the code by holding Ctrl+C and place it anywhere in between the <body> tag.
Hope you enjoyed this tutorial. If you like this tutorial please do share it with your friends and family on Facebook and Twitter and if you have any queries regarding this post do let me know in comments section.
You May Like:
How to create custom contact us page using Google Form.
How to host your HTML, CSS and JavaScript on Google Drive.
How to create Custom navigation menu for your Blog.
170+ High PR Website Directory to submit your sites for free
great post.
ReplyDeleteBest Attitude Status
You can tribute your last condolence message to your loved ones with the help of our blog.
ReplyDeleteGood food and strong healthy body is very important in our life because it would helps us to boost our energy.But For making strong body you need to go gym in kolkata where you find professional train who can trained you in proper way.
ReplyDelete