An image map is a single image, which has a number of clickable, and each area is related to a different target page.
One of the most popular applications of image map is to use the site or blog title. Having the title of the image map does not need a separate top-level menu or the Pages gadget to navigate, because readers can move directly to the title of your blog!
Here's an example image map, click on the test:
In this tutorial we show you how to create an image map with ease without any coding knowledge is required, and how to use the Blogger blog header.
I) Preparation of model
Blogger by default to prevent you from removing the top widget or add other widget in the header section. This has got to change otherwise you can not put your map header section. The following steps allow you to add an image map, and then remove the original title:
Select Model> Edit HTML> Continue.
Back up your template.
DO NOT check the Expand Widget Templates check box on top right of the HTML window.
Find the following lines in HTML code:
1
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
2
<b:widget id='Header1' locked='true' title='YOUR_BLOG_TITLE (Header)' type='Header'/>
Change maxwidgets 2, showaddelement is yes, and locked false., Like so:
1
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
2
<b:widget id='Header1' locked='false' title='YOUR_BLOG_TITLE (Header)' type='Header'/>
The above changes will create a new Add a Gadget link header section of your page layout. It also increases the Remove button to specify the cover sheet.
Ii) creating an image map
The easiest way to chart your own image is by using an online tool available www.image-maps.com.
Create your image. Make sure you have the right size, because you can not change it once the image is mapped.
Download your Blogger post editor and get the URL of the image.
Go www.image-maps.com and the image and enter the URL "From URL" field and press the "Start Mapping Your Image" button.
Click "continue to the next step." The image appears on the left side, and mapping tools in the sidebar on the right.
Start mapping links on the desired image formats-one link at a time until all the links are mapped. Follow the instructions given in the sidebar, it's easy.
See the image below and find the mapped links appear below the image. You want to turn them off, clear the Display Text Links check box under the Advance Tool Box in the sidebar.
Select the button to get the code. Code you want is currently the HTML code tab. Right-click inside the code box, select all and copy.
The next step is to add code to your blog.
III) Adding and testing of the image map
Go to the Layout page, click the Add a Gadget link in the header section and select the HTML / Javascript gadget.
Leave the subject blank. Connect your image map code to the Content field, and press Save.
View the blog. You should see the two titles: the image map and the original title below.
Test the image map. Make sure links work as intended.
Iv) in the original title
When you are satisfied with the results, return to Layout, click Edit the title widget, and then click the Remove button.
That's it, now you have an image map for the title. Enjoy!
One of the most popular applications of image map is to use the site or blog title. Having the title of the image map does not need a separate top-level menu or the Pages gadget to navigate, because readers can move directly to the title of your blog!
Here's an example image map, click on the test:
In this tutorial we show you how to create an image map with ease without any coding knowledge is required, and how to use the Blogger blog header.
I) Preparation of model
Blogger by default to prevent you from removing the top widget or add other widget in the header section. This has got to change otherwise you can not put your map header section. The following steps allow you to add an image map, and then remove the original title:
Select Model> Edit HTML> Continue.
Back up your template.
DO NOT check the Expand Widget Templates check box on top right of the HTML window.
Find the following lines in HTML code:
1
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
2
<b:widget id='Header1' locked='true' title='YOUR_BLOG_TITLE (Header)' type='Header'/>
Change maxwidgets 2, showaddelement is yes, and locked false., Like so:
1
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
2
<b:widget id='Header1' locked='false' title='YOUR_BLOG_TITLE (Header)' type='Header'/>
The above changes will create a new Add a Gadget link header section of your page layout. It also increases the Remove button to specify the cover sheet.
Ii) creating an image map
The easiest way to chart your own image is by using an online tool available www.image-maps.com.
Create your image. Make sure you have the right size, because you can not change it once the image is mapped.
Download your Blogger post editor and get the URL of the image.
Go www.image-maps.com and the image and enter the URL "From URL" field and press the "Start Mapping Your Image" button.
Click "continue to the next step." The image appears on the left side, and mapping tools in the sidebar on the right.
Start mapping links on the desired image formats-one link at a time until all the links are mapped. Follow the instructions given in the sidebar, it's easy.
See the image below and find the mapped links appear below the image. You want to turn them off, clear the Display Text Links check box under the Advance Tool Box in the sidebar.
Select the button to get the code. Code you want is currently the HTML code tab. Right-click inside the code box, select all and copy.
The next step is to add code to your blog.
III) Adding and testing of the image map
Go to the Layout page, click the Add a Gadget link in the header section and select the HTML / Javascript gadget.
Leave the subject blank. Connect your image map code to the Content field, and press Save.
View the blog. You should see the two titles: the image map and the original title below.
Test the image map. Make sure links work as intended.
Iv) in the original title
When you are satisfied with the results, return to Layout, click Edit the title widget, and then click the Remove button.
That's it, now you have an image map for the title. Enjoy!
I am a professional Graphic designer and web site designer.I always try to make my byers Happy with my work and my activities. See My portfolio.....
Any feedback, questions or ideas are always welcome. In case you are posting Code ,then first escape it using Postify and then paste it in the comments
0 comments: