Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

BLOGGER: Cara Membuat Tombol Download di Blogger Blogspot/TLD

Cara Bikin Tombol di HTML | Sekaligus dengan efek Hover

Tombol merupakan bagian yang sangat penting dari sebuah blog/website 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.

buat tombol download blogger

Sekilas Tombol Download

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.

Sebenarnya di beberapa Template Premium sudah ada kode CSS menampilkan Desain tombol, hanya saja cara pemanggilannya tak paham karena tak ada dokumentasi.

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.

Cara Buat Tombol Download di Blogger Blogspot & TLD

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 bagus 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.

5 komentar untuk "BLOGGER: Cara Membuat Tombol Download di Blogger Blogspot/TLD"

Berlangganan via Email