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

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

buat tombol download blogger

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}
  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://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.

Penutup

Sekian artikel ini semoga berguna dan membantu mempercantik fitur Blog kalian. Terimakasih.

7 Komentar

Posting Komentar
Lebih baru Lebih lama