Cara Membuat Button Link di html yang Keren

Pada artikel ini akan menjelaskan bagaimana cara membuat button link di html yang keren pada blogger, misalnya tombol download, demo, lihat harga dan sebagainya.

Beberapa manfaat button link diantaranya blog kita akan terlihat lebih professional juga memiliki tampilan yang rapi.

Saya membuat button diatas menggunakan CSS3. Dimana CSS3 ini tidak akan membebani pemuatan atau loading blog temen-temen. Jadi sangat aman untuk digunakan.

Ada 2 cara memasang kode CSS3 untuk button link seperti diatas, yaitu dengan memasang pada Desiner Tema di Tata Letak dan dengan memasukan kode CSS3 ini ke dalam tema melalui Tema Edit HTML.

Untuk melihat live demonya, silahkan lihat postingan saya yang berjudul Aplikasi Penambah Kontak WA.

Ok langsung saja kita praktekan kedua cara tersebut.

Cara Membuat Button Link di html Melalui Desiner Tema

Ikuti langkah-langkah berikut ini:

• Masuk kea kun blogger dan buka blog yang akan dipasang button
• Klik pada Tata Letak
• Pada sebelah atas klik Desiner Tema

• Klik Lanjutan

• Klik Tambahkan CSS kemudian copy dan paste kode CSS di bawah ini pada kotak kosong sebelah kanan.

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .btn ul {margin:0;padding:0} .btn li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .demo {background-color:#0288d1;} .download {background-color:#ff5000;} .demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;} .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

• Klik Terapkan pada Blogger
• Selanjutnya temen-temen tinggal membuat postingan seperti biasa
• Masuk ke format HTML
• Copy dan paste kode dibawah

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

• Jika ingin tombol Demo saja (YOUR-LINK-HERE berwarna merah ganti dengan alamat link tujuan, DEMO berwarna biru bisa diganti dengan tulisan sesuai dengan kebutuhan temen-temen)

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
</ul>
</div>

• Jika ingin tombol Download saja (YOUR-LINK-HERE berwarna merah ganti dengan alamat link tujuan, DOWNLOAD berwarna biru bisa diganti dengan tulisan sesuai dengan kebutuhan temen-temen)

<div style="text-align: center;">
<ul class="btn">
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Cara Membuat Button Link di html Melalui Tema Edit HTML

Ikuti langkah-langkah berikut ini:

• Masuk ke akun blogger dan buka blog yang akan dipasang button
• Klik pada Tema dan klik Edit HTML

• Letakan kode di bawah tepat di atas kode ]]></b:skin> untuk mempermudah menemukan kode, CTRL+F kemudian ketikan ]]></b:skin> kemudian Enter

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .btn ul {margin:0;padding:0} .btn li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .demo {background-color:#0288d1;} .download {background-color:#ff5000;} .demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;} .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

• setelah selesai, klik Simpam Tema
• Selanjutnya temen-temen tinggal membuat postingan seperti biasa
• Masuk ke format HTML
• Copy dan paste kode di bawah

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

• Jika ingin tombol Demo saja (YOUR-LINK-HERE berwarna merah ganti dengan alamat link tujuan, DEMO berwarna biru bisa diganti dengan tulisan sesuai dengan kebutuhan temen-temen)

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
</ul>
</div>

• Jika ingin tombol Download saja (YOUR-LINK-HERE berwarna merah ganti dengan alamat link tujuan, DOWNLOAD berwarna biru bisa diganti dengan tulisan sesuai dengan kebutuhan temen-temen)

<div style="text-align: center;">
<ul class="btn">
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Itulah Cara Membuat Button Link di html yang Keren pada blogger. semoga bermanfaat.