How to create a blog using the link to the CSS may be trivial rusty in the blogging world. But it was very much a beginner friends who ask in the comments or on the facebook group about how to make the link ....
So this time I will share how to create a link on the blog. We start from the simple first ya ....
How To Make A Link In Articles In Blogspot
To create a link in the article on Blogspot you need to do is highlight the text you want to change to relative links and do the procedure below ....
- Click on the LINK icon row icon editor
- Enter the URL of his open desire. Choose whether you want to open a link in a new window or not. Choose whether you want to also be a nofollow link or not .... Now click OK and you're done. (That does not give you Nofollow is positive for SEO point of destination to the page.)
How To Make Link With simple HTML ....
Now we learn how to install link if not in the article. To link your HTML code simple enough to install the template or theme relatives.
Now we learn how to install link if not in the article. To link your HTML code simple enough to install the template or theme relatives.
HTML form the basis of a link
Below is a form of HTML from a link which involve a carrier, the href property and an anchor text ....
<a href="http://www.example.com/"> Trial Site </ a>
Observe the rules are essentially:
Below is a form of HTML from a link which involve a carrier, the href property and an anchor text ....
<a href="http://www.example.com/"> Trial Site </ a>
Observe the rules are essentially:
- You live http://www.example.com/ replace with your desired URL
- You live transform the Trial Site is the anchor text with words that you want
.... then you will get the HTML structure of the link you need.
How to Install HTML Link
After you create the link, structure, then it's time to install the link. For blogspot users, you can install it in various ways:
After you create the link, structure, then it's time to install the link. For blogspot users, you can install it in various ways:
Installing the widget link using HTML / JAVASCRIPT
- Now you just go to the menu layout on his blog dashboard
- Click on the Add gadget that you want to put the link
- Pop up will appear, please scroll down and select HTML / JAVASCRIPT
- Enter html code from the last link in the gadget editor and click SAVE.
- Adjust the position of the gadget in the place you want
Installing Link In Template Structure
To do this then you should be experienced enough to edit the template. If you should not do back up the template, so that there is an alternative to recovery if you commit a fatal error ....
You need to do here is change the date quotation on HTML into single quotes.
<a href='http://www.example.com/'> Trial Site </ a>
Then go to the menu and click the EDIT TEMPLATE HTML. Place the HTML code last edited at the place you want in the <body> ...
Making Display Settings To Link With CSS
If you do not have the template CSS settings for link, then the link will be displayed by default browser settings being used by the visitors. But if you are interested to make arrangements to view your links, then arrange for in the CSS ....
CSS code base from link
Must first be clarified before any platform of your website ..., because there are several methods to install CSS on your site. But whatever methods are CSS should be kept in a part of your template <head> ....
It should be noted that the operators to determine the value of a link is a. So form the basis of CSS is a link
a {
property value regulator link
}
For example, you want to make a red link, then enter a value as follows:
a {
color: # ff0000;
}
There are a lot of properties that you can inject into brackets {....} flanking a setting above .... some of which are as listed below ....
Property set display link
Basically is the link text as well, so we can make arrangements for taking all the CSS text settings .... Consider some of the following properties:
- font-family (eg Set font: Arial, Times New Roman, etc.)
- font-size (large Set of letters)
- font-weight (Set the thickness of the letters)
- color (Set the font color using the color code)
- text-decoration (Set the text variations, such as deciding what to wear ... the bottom line or not)
- letter-spacing (distance between letters Set)
- text-shadow (Set shadow on the letter)
Practice Makes Link Management
Now I will try to make an appearance with CSS code link below:
a {
font-family: Times New Roman;
font-size: 24px;
font-weight: bold;
color: red;
text-decoration: underline;
letter-spacing: 2px;
text-shadow: 0px 0px 5px yellow;
}
The result will look like this:
Creating Pseudo - Class on the LinksMaybe a lot of friends who are confused as to why there has not been visited link color as red , while blue highlighted ; when visited by gray , and after a visit is black , or other color variations ....All that could occur due to variations in pseudo - class that we provide. There are four pseudo - classes that you can use to create 4 different variations , namely :
a: link
a : hover
a: active
a: visitedAll you have to do is enter the property you want to change from the basic form of link after link subject to specific treatment .... Basic link in this case represented by the pseudo - class a: link ....See the following example :
a: link {
font -family : Times New Roman ;
font - size: 24px ;
font - weight: bold ;
color: red ;
text-decoration : underline ;
letter-spacing : 2px ;
text-shadow : 0px 0px 5px yellow ;
}
a: hover {
color: blue ;
}
a: active {
color: gray ;
}
a : visited {
color: black ;
}From the example above friends can see that I just want variety in terms of color . If I want to have variations in size , color and shadow , underline , etc. , then I just add it changes what I want ....
Setting the display link only in certain areas of the page
This can be done if the area is bounded by a class or id, and you have to know what class / id of the area .... For example:
<div class="right sidebar ">
......
......
</ div>
From the code above we can see that the area bounded by sidebarkanan class. Therefore class marked point in css, then the operator is Setting the display link only in certain areas of the page
This can be done if the area is bounded by a class or id, and you have to know what class / id of the area .... For example:
<div class="right sidebar ">
......
......
</ div>
From the code above we can see that the area bounded by sidebarkanan class. Therefore class marked point in css, then the operator is . Sidebarkanan
So now is the example code:
. sidebarkanan a: link {
font-family: Times New Roman;
font-size: 24px;
font-weight: bold;
color: red;
text-decoration: underline;
letter-spacing: 2px;
text-shadow: 0px 0px 5px yellow;
}
. sidebarkanan a: hover {
color: blue;
}
. sidebarkanan a: active {
color: gray;
}
. sidebarkanan a: visited {
color: black;
}
With this, it is only the links that are in the air div-class sidebar kanan that will be exposed to its influence ....
Put new arrangements CSS code
After you finish making this CSS code, where you can put it? For blogspot users, you just need to open the menu TEMPLATE> EDIT HTML and look for the code </ b: skin>. Put above code just above </ b: skin> then setting the previous link will be overwritten. Click SAVE TEMPLATE to see the results .....
As for the web in general, you can menarunya above code </ style> or in the external CSS file that organize the display of the page ....
Ok, that's the way it used to make links on the blog with a little play CSS, hopefully can help friends .... If there is a rather giddy with long explanation above, then do the plans alone (as the song box)
1 comments
Helpful blog. Thank you for sharing.
Post a Comment