Di bawah ini adalah contoh tampilan tombol Download/Unduh dengan menggunakan kode HTML dan CSS yang akan kita bahas:
DEMO:
1. Menyematkan kode HTML di Halaman Postingan Blog
Langkah pertama, kita simpan kode HTML di dalam kolom Edit Postingan/Compose, pilih 'Tampilan HTML', kemudian copy-paste kode HTML di bawah ini:
HTML:
<p><p> </p><div class="container">
<center>
<h3><i class="fa fa-file-word-o" style="font-size:48px;color:#3eb593"></i>
<br>DOWNLOAD FORMAT MS.WORD:</h3>
</center>
<html>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<body>
<div id="wrap">
<a class="button left" href="URL ANDA" rel="nofollow" target="_blank">DOWNLOAD 1<i class="fa fa-download"></i></a>
<br />
<a class="button right" href="URL ANDA" rel="nofollow" target="_blank">DOWNLOAD 2<i class="fa fa-download"></i></a>
</div>
<div class="clear">
</div>
</body></html></div></p>
2. Menambahkan Kode CSS ke Blog
Selanjutnya kita harus menambahkan kode CSS melalui tab 'Tema' pada Dashboard Blogspot. Di bawah ini adalah kode CSS yang akan dipakai:
CSS:
<p>@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
a:link {
text-decoration: none;
outline: none;
transition: all 0.25s;
}
a:visited,
a:link:hover,
a:visited:hover {
text-decoration: none;
}
body {
background: #eee none repeat scroll top left;
color: #222;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
.container {
background: #fff;
max-width: 768px;
margin: 4% auto;
padding: 12px;
font-family: "Open Sans", sans-serif;
border-radius: 50px;
overflow: hidden;
}
.container h3 {
background: #fff;
position: relative;
overflow: hidden;
margin: 0 0 20px 0;
font-size: 1em;
text-align: center;
font-weight: 700;
vertical-align: middle;
padding: 0 2px 2px 2px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* CSS BUTTON DEMO DOWNLOAD */
#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.button.left {
display: inline-block;
position: relative;
font-family: "Source Sans Pro", Helvetica, sans-serif;
background: #3eb593;
padding: 10px 30px;
font-size: 14px;
margin: 0 3px;
color: #fff !important;
border-radius: 50px;
border: none;
text-transform: uppercase;
text-decoration: none;
}
.button.right {
display: inline-block;
position: relative;
font-family: "Source Sans Pro", Helvetica, sans-serif;
background: #1b1b1b;
padding: 10px 30px;
font-size: 14px;
margin: 0 3px;
color: #fff !important;
border-radius: 50px;
border: none;
text-transform: uppercase;
text-decoration: none;
}
.button i {
margin-left: 15px;
font-weight: normal;
font-family: FontAwesome;
}</p>
Cara menambahkan kode CSS ke blog adalah:
Pertama, masuk ke Dashboard Blogspot, lalu pilih tab 'Tema' kemudian pilih 'SESUAIKAN'.
Kedua, pilih tab 'Lanjutan' kemudian pilih tab 'Tambahkan CSS', copy dan paste kode CSS di atas pada kolom yang sudah tersedia,
Terakhir, simpan perubahan dengan klik tombol 'SAVE'.
Selesai.
0 Comments:
Posting Komentar