Cara Membuat Tombol Download Keren di Postingan Blogger

Halo sobat, kembali lagi di Bang Feri Blog. Nah sesuai dengan judul postingan diatas, pada kesempatan kali ini saya akan membagikan tutorial tentang cara membuat tombol download keren di postingan Blogger.

Nah pada umumnya tombol download di postingan tidak jauh berbeda dengan link atau tautan teks, yang membedakan hanya pada tampilannya saja.

Tombol download di postingan memiliki tampilan yang lebih baik dan berbentuk. Sedangkan link teks (anchor text) tidak memiliki bentuk, tetapi hanya sebatas teks yang berisi tautan.

Jadi, seperti apa cara membuat tombol download di postingan Blogger?

Membuat Tombol Download Keren di Postingan Blogger

Untuk membuat tombol download di postingan, sebenarnya sangat mudah dan cepat.

Kita hanya memerlukan sedikit cuplikan kode seperti kode HTML untuk membuat link, yaitu tag <a> dan cuplikan kode CSS untuk mengatur tampilan tombol download agar lebih keren.

Berikut ini langkah-langkah cara mudah membuat tombol download di postingan Blogger:

1. Buat link download baru di dalam postingan menggunakan tag <a> dengan atribut href seperti biasa kemudian simpan. Baca selengkapnya tentang cara membuat link disini atau lihat contoh berikut

<a href="#" class="btn-download">Download Now!</a>

2. Buka Tema > Edit HTML, kemudian Tambahkan kode CSS tombol download berikut ini di antara tag <style> di blog sobat kemudian klik simpan jika telah selesai menambahkan kode. Selesai

/* Button Download by BANG FERI BLOG */
.btn-download {
 background: #1fbb00;
 padding: 8px 10px;
 margin: 5px;
 text-align: center;
 color: #ffffff;
 font-weight:bold;
 border-radius: 3px;
 border: none;
 text-decoration:none;
 display: block;
}

Penjelasan

• Tag <center> dideklarasikan sebelum tag <a> berfungsi untuk mengatur posisi tombol berada di tengah halaman.
• Atribut class="btn-download" ditambahkan ke dalam tag <a> berfungsi untuk mengeksekusi kode CSS diatas ke tag <a> untuk membuat tampilan tag <a> berbentuk tombol

Tips
Untuk membuat tombol download di dalam postingan lebih dari satu, sobat hanya perlu menambahkan kode diatas (kode di langkah pertama) di dalam postingan (Edit postingan menggunakan metode HTML) dan ganti URL dengan URL tujuan tanpa menambahkan kembali kode CSS.

Bentuk-bentuk Tombol Download Keren di Postingan Blogger

Berikut ini beberapa cuplikan kode CSS untuk tampilan tombol download didalam postingan.

Klik tombol Accordion dibawah gambar untuk menampilkan kode CSS tombol download keren

Untuk cara pemasangannya, silahkan ikuti petunjuk di langkah kedua diatas

Berikut ini cuplikan kode CSS untuk tombol download type 1.

/* Button Download by BANG FERI BLOG */
.btn-download {
 background: #1fbb00;
 padding: 8px 10px;
 margin: 5px;
 text-align: center;
 color: #ffffff;
 font-weight:bold;
 border-radius: 3px;
 border: none;
 text-decoration:none;
 display: block;
}

Berikut ini cuplikan kode CSS untuk tombol download type 2.

/* Button Download type 2 by BANG FERI BLOG */
.btn-download {
 background: #ffffff;
 padding: 8px 10px;
 margin: 5px;
 text-align: center;
 color: #1fbb00;
 font-weight:bold;
 border-radius: 3px;
 border: 2px solid #1fbb00;
 text-decoration:none;
 display: block;
}

Berikut ini cuplikan kode CSS untuk tombol download type 3.

/* Button Download type 3 by BANG FERI BLOG */
.btn-download {
 background: #ffffff;
 padding: 8px 10px;
 margin: 5px;
 text-align: center;
 color: #1fbb00;
 font-weight:bold;
 border-radius: 20px;
 border: 2px solid #1fbb00;
 text-decoration:none;
 display: block;
}

Berikut ini cuplikan kode CSS untuk tombol download type 4.

/* Button Download type 4 by BANG FERI BLOG */
.btn-downloado {
 background: #ffa500;
 padding: 8px 10px;
 margin: 5px;
 text-align: center;
 color: #ffffff;
 font-weight:bold;
 border-radius: 3px;
 border: none;
 text-decoration:none;
 display: block;
 box-shadow: 0px 0px 5px #777777
}

Berikut ini cuplikan kode CSS untuk tombol download type 5.

/* Button Download type 5 by BANG FERI BLOG */
.btn-download {
 background: #ffa500;
 padding: 8px 10px;
 margin: 5px;
 text-align: center;
 color: #ffffff;
 font-weight:bold;
 border-radius: 5px;
 border-bottom: 5px solid #D88C00;
 text-decoration:none;
 display: block;
}

Berikut ini cuplikan kode CSS untuk tombol download type 6.

/* Button Download type 6 by BANG FERI BLOG */
.btn-download {
 background: #ffffff;
 padding: 8px 10px;
 margin: 5px;
 text-align: center;
 color: #ffa500;
 font-weight:bold;
 border-radius: 20px;
 border: 2px solid #ffa500;
 text-decoration:none;
 display: block;
}

Untuk mengubah warna latar belakang dan teks tombol download. Sobat bisa mengubah nilai pada properti background dan color pada kode CSS sesuai keinginan

Nah jadi seperti itulah tutorial cara membuat tombol download di postingan Blogger yang dapat saya bagikan kepada Sobat.

Semoga tutorial di atas dapat bermanfaat bagi sobat dan banyak orang

Terima kasih, salam coding