Membuat Tombol Download Keren Di Blog Dengan Mudah
Membuat Tombol Download Keren Di Blog Dengan Mudah - Halo sobat, setelah beberapa hari gak posting seputar blogging, akhirnya hari ini menyempatkan diri untuk sekedar berbagi cara membuat tombol download atau download button di blog agar terlihat keren.
Suatu blog yang memiliki konten tutorial terkadang harus menyediakan link download bahan-bahannya, atau bahkan blog yang berisi tentang download aplikasi, film, lagu atau yang lagi ramai sekarang ini adalah download template blog pasti dibutuhkan suatu link atau url download.
Nah, untuk membuat agar tampilan menjadi cantik atau elegan, perlu ditambahkan dengan tombol atau button download, walaupun itu tidak wajib.
Tutorial yang membahas tentang membuat tombol download mungkin kalau sobat cari di google akan menemukan banyak sekali.
Dan disana sobat juga akan menemukan tutorial pembuatan tombol download dengan berbagai bentuk cara memasangya .
Walaupun begitu, disini saya juga akan membahas topik serupa, agar para pembaca memiliki lebih banyak pilihan tentang cara membuat atau bentuk dari tombol download ini, walaupun sebenarnya fungsi tombol download ini adalah sama.
Akan tetapi, suatu blog pasti memiliki ciri khas yang berbeda, dari tata letak, warna layout dan sejenisnya, maka siapa tahu postingan yang saya bahas kali ini sesuai dengan apa yang sobat cari untuk membuat blog sobat menjadi lebih menarik.
Cara Membuat Tombol Download Dan Demo Yang Keren
Langkah yang harus sobat lakukan cukup mudah, apalagi bagi sobat yang sudah sering nguprek template. Langkahnya adalah sebagai berikut:1. Login ke Blogger
2. Klik Theme/Template >> Edit HTML
3. Cari kode <head> dan letakkan script berikut ini dibawah kode <head> tersebut
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />4. Cari kode ]]></b:skin> dan copy kode dibawah ini dan pastekan di atas kode ]]></b:skin> tersebut
.downloadbtn {
margin-right:9px;
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #309a06;
border: none;
border-radius: 15px;
box-shadow: 0 9px #000000;
}
/* Darker background on mouse-over */
.downloadbtn:hover {
background-color: #a5a6a7;
}
.downloadbtn:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}Catatan: Untuk mengubah warna tombol downloadnya, sobat bisa ubah dibagian yang saya warnai merah tersebut sesuai dengan selera agar lebih cocok dengan warna layout di blog sobat.
5. Klik Simpan
Sampai disini sobat sudah berhasil membuat tombol downloadnya. Dan untuk pemasangan atau pemanggilannya di dalam postingan adalah dengan copy paste script dibawah ini di dalam postingan yang akan diletakkan tombol downloadnya.
<center>
<a href="https://warmenot.blogspot.com" target="_blank">
<button class="downloadbtn"><i class="fas fa-eye"></i> Demo</button></a>
<a href="https://warmenot.blogspot.com" target="_blank">
<button class="downloadbtn"><i class="fas fa-cloud-download-alt"></i> Download</button></a>
</center>Catatan:
1. Ubah url diatas dengan url atau link download sobat
2. Ubah tulisan Demo atau Download sesuai selera sobat
3. Apabila ingin menampilkan tombol Demo saja atau Download saja, hapus salah satu dari kode <a href sampai </a>
Bagaimana, mudah bukan?
Sekarang blog sobat pasti terlihat lebih menarik setelah menggunakan tombol download tersebut.
Sekian dari ShareKu, semoga bermanfaat bagi sobat blogger. Terima kasih
Thanks
BalasHapus