Cara Buat Tombol Download di Blogger Blogspot/TLD 2022

Tombol merupakan bagian yang sangat penting dari sebuah blog/website. Fungsinya agar dapat membagikan link download dari alamat penyedia penyimpanan cloud. Contohnya Google Drive, ZippyShare, DropBox, Mega dan sebagainya.

Fungsi utama tombol untuk memudahkan user dengan cukup menekan tombol Download ini, kemudian menuju lokasi tempat pengunduhan. Pengunjung tidak kerepotan meng-copy URL lalu membukanya manual di tab baru.

Sekilas untuk Buat Tombol Download di Blogger

Secara Default Blogger tidak menanamkan fitur Tombol apapun semacam Download, Demo, Preview, OK dan semacamnya. Tapi jangan khawatir dipostingan kali ini ada langkah-langkah menambahkan TOMBOL di Postingan/Halaman dengan mudah, tampilannya pun saya jamin menarik. 

Di beberapa Template Premium sudah ad kode CSS seperti ini, hanya dokumentasi tidak lengkap. 

Banyak sekali dijumpai website/blog khusus download yang menggunakan tombol berbentuk gambar dan link langsung. Penggunaan Gambar berlebih akan berakibat menurunkan kecepatan pemuatan, padahal kita tahu bahwa load-speed merupakan bagian dari SEO.

Masalahnya

Supaya tidak membebani proses pemuatan halaman akibat terlalu banyak gambar yang harus dimuat, perlu dibuat tombol css khusus dan ringan. 

Kita akan sedikit menambahkan kode CSS di template html dengan sebuah racikan sederhana. Oke, kalau kalian memang ingin membuat tombol Download, Demo, Preview dan semacamnya caranya cukup ikuti langkahnya dibawah ini.

1. Masuk Pengaturan Blogger.

2. Klik Tema pilih Edit HTML.

3. Cari kode ]]></b:skin>

4. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>

a.btn {display:inline-block;position:relative;font-family:inherit;text-decoration:none;font-weight:700;background:#0fb433;letter-spacing:.5px;padding:10px 10px;margin:10px;color:#fff;font-size:16px;text-transform:uppercase;border-radius:4px;transition:all 0.3s ease-out;box-shadow: 0px 4px 6px #6e6e6e;}
a.btn:hover {background:rgb(18, 171, 241);;color:#fff;}
a.btn:active {color:#EF5223;}
a.btn.warn {background:#EF5223;color:#fff}
a.btn.warn:hover {background:#30abd5;color:#fff}
a.btn.warn:active {background:#EF5223;color:#fff}

5. Pastekan kode dibawah saat buat artikel (HTML bukan Compose).

<a class="btn" href="https://copypasteide.blogspot.com" rel="nofollow" target="_blank">Download</a>

6. Ubah https://copypasteide.blogspot.com menjadi link download kalian.

7. Download

Bagaimana Mudah sekali bukan? Jika ingin menggunakannya lagi cukup copy code langkah ke-5 disetiap postingan, dan jangan lupa ubah url hrefnya sesuai link download.