Anchor Links and Mail To Links

Anchor Links are used to jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for......

Anchor Links are mainly used in making FAQ (Frequently Asked Questions)type pages. Such pages contain a list of FAQs at the top and detailed answers to each question at the bottom. Clicking on each question makes the page shift directly to the question and its answer at the bottom.

The question at the top has its link made by the following code :

<a href="#Q4">FAQ 4. How to login to Dashboard at Blogger?</a>

This code will make the following Link :

FAQ 4. How to login to Dashboard at Blogger?

The target is coded with following code:

<a name="Q4">FAQ 4. How to login to Dashboard at Blogger?</a>

Clicking on this link will jump you to the Question and Answer at the bottom of this page.

ANCHOR LINK TO SPECIFIC WORD ON ANOTHER PAGE

To make an anchor Link which connects/jumps to a specific location on another page use this code :

<a href="http://betabloggerfordummies.blogspot.com/2007/01/making-image-link.html#MAKING THE LINK">
Jump to MAKING AN IMAGE LINK</a>

The above code will produce the following link :

Jump to MAKING AN IMAGE LINK

NOTE : I have already coded in

<a name="MAKING AN IMAGE LINK">MAKING AN IMAGE LINK</a>

on that target page and saved it.

OPENING LINKS IN SEPARATE WINDOW

To make your links open in a separate window use this code :

<a href="http://betabloggerfordummies.blogspot.com"
target="_blank">Visit Dummies Guide to Google Blogger (Beta)</a>

This will produce the following link :

Visit Dummies Guide to Google Blogger (Beta)

Try clicking on the above link to see if it opens in a new window. If you want your links in the New Blogger to open in a new window you can paste the code for each link as above in a Html/Javascript Page Element and save.

To do this in a Link List Widget go to Template------->Edit Html------>First Backup Template

Then put a check in Expand Widgets Template text box and scroll down in Edit Template text box till you come to the Link List Widget code :

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank' ><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Insert the code in black in the above code. Save Template. This will open all the links in this section in a new window.

MAKING A MAILTO LINK

To make a mail to link use this code in your post or Html/Javascript Page Element :

<a href="mailto:xyz@gmail.com?subject=Hello%20again">
Send Mail</a>

Change xyz@gmail.com to your email address. This will show on your page like this :


Send Mail

Your Email Address maybepicked up by spam bots so make a graphical link at this site :

http://email.about.com/od/stationeryandmorefun/gr/e_mail_icon_gen.htm

http://services.nexodyne.com/email

Upload gif to Googlepages and copy theurl
Paste it in blog layout in a html/javascript element

<img width="96" src="URL of UPLOADED GIF" height="64"/>

See How it appears :



The Target Link produced is :

FAQ 4. How to login to Dashboard at Blogger?
Answer : To login to theDashboard goto http://www2.blogger.com/home and type inyour Username and Password and hit Enter.

Technorati Tags:anchor link, mailto link, faq page