√ BLOGGER: Cara Buat Tombol Download di Blogger Blogspot/TLD 2023

byDzikri Adi S.

8

Untuk Buat Tombol Download di Blogger sangatlah mudah dilakukan bahkan untuk pemula sekalipun. Pada artikel ini akan bahas secara singkat lengkap dengan tutorialnya.

Cara Buat Tombol Download di Blogger Mudah

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.

Baca Juga: Cara Buat CSS Tombol Keyboard di Blogger

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.

Cara Buat Tombol Download di Blogger Blogspot & TLD

$ads={2}

Masuk Pengaturan Blogger.
Klik Tema pilih Edit HTML.
Cari kode ]]></b:skin>
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://ekorkode.com" rel="nofollow" target="_blank">Download</a>

6. Ubah ekorkode.com menjadi link download kalian.
7. Hasilnya: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.