Cara Membuat Tombol Download Keren Dan Responsive Di Blog
Ammar KC,Halo teman-teman jumpa lagi dengan kami, pada kesempatan kali ini kami akan memberikan tutorial atau
cara membuat tombol download keren dan responsive di blogTombol download yang di maksud disini adalah sebuah tombol dalam blog dimana ketika kita klik tombol tersebut akan mengarahkan kita ke halaman download file dimana sang pemilik file menyimpan atau meng-upload file tersebut.
Tombol download biasanya ditemukan di blog yang memiliki niche download, baik itu download apk android, software, lagu, film dan file-file lainnya. Tapi bukan berarti blog yang bukan blog download tidak terdapat tombol download.
Membuat tombol download yang keren dan responsive di blog bukanlah hal yang sulit, teman-teman hanya perlu sedikit pemahaman terhadap bahasa program CSS dan HTML, namun jika pemahaman teman-teman terhadap bahasa tersebut masih minim seperti saya ini, teman-teman bisa mengikuti tutorial sederhana yang sudah saya siapkan berikut ini.
Cara Membuat Tombol Download Keren Dan Responsive Di Blog
1). Silahkan login ke blog kamu terlebih dahulu,
2). Setelah login, pilih
tema, kemudian
edit HTML3). Slanjutnya copy code CSS dibawah ini, kemudian tempelkan diatas
]]></b:skin> atau code
</head> kemudian klik
simpan tema.
<style type="text/css">
.button {float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both;}
.download {border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 30px !important; background: linear-gradient(to right, #4653F8, #000000, #4653F8); color:#fff !important; text-align:center; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); transition:background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.download:hover {background:#000000; text-shadow:0 0 1px #222; -moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; -ms-text-shadow:0 0 1px #222;}
</style>
Sampai disini teman-teman sudah berhasil
memasang tombol download yang keren dan responsive di blog, nah selanjutnya bagaimana cara menampilkan tombolnya di blog atau di postingan blog kita?
1). Silahkan teman-teman buat
postingan baru2). Pilih
HTML kemudian copy code dibawah ini, dan letakkan tepat dimana teman-teman ingin melatakkan tombol downloadnya.
<div class="button">
<a class="download" href="##">DOWNLOAD</a>
</div>
<div class="clear"></div>
Catatan:
Ganti ## dengan link download.
3). Selesai, silahkan klik lagi
compose, untuk melihat hasilnya.
4). Nah agar tampilan tombol download yang kita buat, terlihat lebih keren lagi, ganti code di bagian 2 diatas, dan gunakan code dibawah ini.
<div style="text-align: center;">
<div style="background-color: transparent; border: 3px #000000 double; float: center; padding: 10px; text-align: center; width: 100%;">
<img alt="Ammar KC" height="100" src="#" style="margin: 0 0 10px 15px; overflow: hidden;" title="Ammar KC" width="100" />
<br />
<div style="text-align: center;">
<span style="font-weight: bold; font-size; 15px;">Muammar</span>
<br />
<div class="button">
<a class="download" href="##">DOWNLOAD</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
Catatan:
- Ganti # dengan link gambar file
- Ganti Muammar dengan Nama file atau deskripsi file.
- Ganti ## dengan link download.
5). Selamat tombol download keren dan responsive yang teman-teman buat sudah jadi, jangn lupa untuk memasukkan link download filenya di tempat yang sudah di sediakan.
Cara diatas Juga bisa dilakukan tanpa harus edit HTML template blog, bagaimana caranya? Cukup copy code dibawah ini, kemudian pasang di HTML postingan teman-teman.
<div style="text-align: center;">
<div style="background-color: transparent; border: 3px #000000 double; float: center; padding: 10px; text-align: center; width: 100%;">
<img alt="Ammar KC" height="100" src="#" style="margin: 0 0 10px 15px; overflow: hidden;" title="Ammar KC" width="100" />
<br />
<div style="text-align: center;">
<span style="font-weight: bold; font-size; 15px;">Muammar</span>
<br />
<style type="text/css">
.button {float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both;}
.download {border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 30px !important; background: linear-gradient(to right, #4653F8, #000000, #4653F8); color:#fff !important; text-align:center; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); transition:background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.download:hover {background:#000000; text-shadow:0 0 1px #222; -moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; -ms-text-shadow:0 0 1px #222;}
</style>
<div class="button">
<a class="download" href="##">DOWNLOAD</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
Catatan:
- Ganti # dengan link gambar file
- Ganti Muammar dengan Nama file atau deskripsi file.
- Ganti ## dengan link download.
Nah itulah kangkah-langkah yang harus teman-teman lakukan kalau ingin
membuat tombol download keren dan responsive di blog sangat mudahkan? Silahkan teman-teman praktekkan langsung di blog masing-masing, jangan lupa untuk bertanya, jika dalam pembuatannya terdapat kendala.
Demikianlah artikel tentang
cara membuat tombol download keren dan responsive di blog, semoga bermanfaat, dan jangan lupa untuk meninggalkan komentar serta share artikelnya biar yang lain tau.
