A visualization of the button that appears in your monitor screen, and when clicked, there will be a process which we have formulated in the form of HTML code and he would do something like what we ordered.
And this time, I will give you information on How to Create a Blog or Website Button in us.
For the HTML code that I meant was, write this code:
<button type="button">Ketik teks Anda di sini</button>
Thus, the result will be as below:
There are several other codes for Button that we can make more interesting, like the example below:
and to generate the button as above, you can create the HTML code as below:
<button type="button" style="background:#000000; color:#FFFFFF; font:bold 20px Verdana, Geneva, sans-serif; margin:5px 0 5px 0; padding: 0 10px 0 10px;">Klik Disini !</button>
Description:
- background : background color button.
- color : color of text / text.
- padding : Distance edge of button with text in it, 0 10px 0 10px padding above mean value or = 0; right = 10px; bottom = 0, left = 10px.
- margin : the distance button with the image area to the outer edge, 5px 0 5px 0, it means the margin
top = 5px; right = 0, bottom = 5px; left = 0.
- font : text font.
And there are many other HTML code that you can add to further beautify the Button you want to create.
Maybe you need more than one button to fill in your blog, and if the contents of the button you want to add, the same as an existing button, of course, you will repeatedly write the same code. And of course by writing the HTML code repeatedly, it causes us to be less efficient job right?
Therefore, we must set the html code can cover the entire button that will be created using CSS, where a collection of HTML elements, made in the form of CSS like the code below:
#buttonku {
background:#000000;
color:#FFFFFF;
font:bold 20px Verdana, Geneva, sans-serif;
margin:5px 0 5px 0;
padding: 0 10px 0 10px; }
color:#FFFFFF;
font:bold 20px Verdana, Geneva, sans-serif;
margin:5px 0 5px 0;
padding: 0 10px 0 10px; }
And the CSS code is usually located between the code:
<b:skin><![CDATA[ ... ]]></b:skin>
Next just set its HTML like this:
<button id="buttonku" type="button">Tekan Disini !</button>
<button id="buttonku" type="button">Klik Disini !</button>
<button id="buttonku" type="button">Klik Sekali lagi !</button>
The result will look like this:
If you want to insert a link in the button, then write the HTML code link as below:
<a href="...alamat yang dituju..." target="blank"><button type="button">Tulis teks kamu di sini</button></a>
Description:target = "blank" may be, the link will be redirected to a new tab.
Examples that use the link button:
<a href="http://www.tentang-komputer-internet.co.cc/"><button type="button">Tentang Komputer Internet</button></a>
<a href="http://dreamlandhost.com/" target="blank"><button type="button">Hosting Murah Berkualitas</button></a>
<a href="http://dreamlandhost.com/" target="blank"><button type="button">Hosting Murah Berkualitas</button></a>
The result:
Okay, till here the discussion about how to create a button in our blogspot, hopefully useful, and this trick actually you can develop further, so it looks the way you want.
Good luck and,
Thank you.
Tidak ada komentar:
Posting Komentar