Previously posted tutorial about How to create links in Blogger post, How To Add Link List gadget in Blogger, and How to Add Subscription Links gadget in Blogger, which are all related to link or hyperlink.Basically, you don’t have to master programming languages such as HTML and CSS or others in order to create a blog in blogger. But it will be better if you know a little about them because you will benefit much.
In this article, Blogger Tutorial writes about How To Create HTML Code For Hyperlink or link, so you can easily create various types of hyperlinks or links.
What is hyperlink or link?
In the Internet, hyperlink or link is a highlighted text or image that connects to another web page, either in the same website or to other website.So, a link or hyperlink can be formed from an image or text, but in this discussion, we focus on link with text.
What do you need to create a link?
The first thing you need is text or keyword to be highlighted as a link. You can take a text from a sentence or article in your post or create one separately. The second thing you need is the URL (Uniform Resource Locator) or the address of a web page to where the link would be directed. The URL can be in-blog link or the address of other blog or website.Example: the link address of this blog:
http://www.howtoinblogger.com/Example of link taken from blog post:
http://www.howtoinblogger.com/blogger-tutorials/how-to-create-post-with-read-more-in-blogger/The basic HTML code for a link:
KeywordOr for XHTML page (XML), we use the apostrophe mark ( ‘ ) instead of quotation mark ( ” ):
KeywordFor example, we create a link to this blog with the keyword blogger tutorial :
blogger tutorialThe result would be as below:
blogger tutorial
An example of link to a blog post page of this blog with the keyword How to create post with Read more on Blogger :
How to create post with Read more on BloggerThe result would be as below:
How to create post with Read more on Blogger
A link can be added with various attributes such as title, rel, target, etc. Title here is an attribute to give additional description to the link, which will appear when the link is pointed with computer mouse.
The basic code of a link with the title attribute:
KeywordExample of link with the title attribute:
blogger tutorialThe result would be as below: (point your computer mouse over the link to view the title):
blogger tutorial
The other attribute that you can add to a link is target attribute. Target Attribute can be used to determine the page to where the link is directed, a window or frame it would be when clicked. For instance, when a link is clicked, it will open a page in the same page, meaning it cover the previous page, it will open in a new tab, or in a new window.
_blank : Load in a new window
_self : Load in the same frame as it was clicked
_parent : Load in the parent frameset
_top : Load in the full body of the window framename Load in a named frame
The basic code of a link with target attribute:
KeywordExample of link with target attribute:
blogspot tutorialThe result would be as below (please click and it will open in a new tab or new window):
blogspot tutorial
Note: The target attribute is not supported in any of the major browsers, so when you validate your blog with W3C validator, your blog page has the error.
You also can add the rel attribute to a link. The rel attribute is used to notify the search engines about relationship between the target page as linked and the current page or source of the link page.
alternate : An alternate version of the document (i.e. print page, translated or mirror)
stylesheet : An external style sheet for the document
start : The first document in a selection
next : The next document in a selection
prev : The previous document in a selection
contents : A table of contents for the document
index : An index for the document
glossary : A glossary (explanation) of words used in the document
copyright : A document containing copyright information
chapter : A chapter of the document section A section of the document
subsection : A subsection of the document
appendix : An appendix for the document
help : A help document
bookmark : A related document
nofollow : nofollow is used by Google, to specify that the Google search spider should not follow that link (mostly used for paid links).
license : A License document
Tag : A tag
friend : to define that the link directed to web of friend.
The basic code of a link with rel attribute:
KeywordExample of link code with rel attribute:
Blogger templates galleryThe result would be as below (it’s affect for search engine only):
Blogger templates gallery
The above discussion is just a brief writing about link. Of course, there is still much information about it that I have written here.
The technique to place the link or hyperlink in blogger manually below is the example:
Note: to practice this tutorial, you are suggested to create a blog for trial. If you don’t know how to crate a trial blog, please this article: Create Multiple Blog In One Blogger Account.
Placement of link in blogger post :
- Please login to blogger with your ID.
- On the dashboard, click NEW POST.
- Give a title to your post.
- Switch to Edit HTML mode.
- Insert the link on the text (keyword) you want.
- Click PUBLISH POST.
- Done. See the result. The link should be inside of the published article.
- In the dashboard, click Design.
- Click Page Elements, if you are not in this page.
- Click one of Add a gadget links.
- A new window will pop us showing your various Blogger gadgets.
- Click the sign plus (+) on the gadget named HTML/Javascript.
- Paste the HTML code of the link into the available field.
- Click SAVE button.
- Done. See the result. The gadget should have has a link that you have created.
No comments:
Post a Comment