Membuat tombol download cocok untuk web/blog yang berisi tentang lagu MP3/video-video atau yang lain nya.
Tombol download dengan tulisan saja
<a href="###">Download</a>
Hasilnya:Download
Keterangan: ganti tanda ### dengan link download anda.
Jika tulisan download nya ingin di pertebal dan di beri warna ,bisa dengan cara di bawah ini:
<a href=" ### "> <span style="color: #ff0009;"><b>Download</b> </span> </a>
Hasilnya:Download
Keterangan: untuk tanda ### ganti dengan link download anda dan untuk warna teks download nya bisa anda ganti sesuai selera.
Ini warna yang sudah saya sediakan:
red = #d81111
black = #000000
silver = #c0c0c0
gray = #8000000
white = #ffffff
maroon = #800000
purple #800080
fuchsia = #ff00ff
green = #008000
lime = #00ff00
olive = #808000
yellow = #ffff00
blue = #0000ff
aqua = #00ffff
navy #000080
teal = #008080
black = #000000
silver = #c0c0c0
gray = #8000000
white = #ffffff
maroon = #800000
purple #800080
fuchsia = #ff00ff
green = #008000
lime = #00ff00
olive = #808000
yellow = #ffff00
blue = #0000ff
aqua = #00ffff
navy #000080
teal = #008080
Tombol download dengan gambar
<center>
<a href="###"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRjwmPwn4ZM7wp9nXbILQV9dVVUayb7AwrcuDsHoMsksVwGJh-nmHZw7HTS0MGSA7r2w35LT6cHLq2WDDFsr9bIuHrbJfq8z2UsIAssn0Po9fXA3OAd8ENNLEtEAdmpOggQn1VP7pncWQ/s1600/IMG_20171027_203152.JPG " height="50" width="100" /></a></center>
Hasilnya:
Keterangan: ganti tanda ### dengan link download anda dan ganti link gambar dengan gambar sesuai selera anda/anda bisa buat sendiri menggunakan photosop atau semacam nya.
Untuk ukuran width/lebar nya bisa anda sesuaikan dengan menambah angka atau mengurangi angka nya dan untuk ukuran height/tinggi nya juga sama silahkan atur sesuai keinginan anda.
Oh iya untuk gambar ,jika ingin mencoba dari link gambar di bawah ini boleh:
Gambar 1 = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG7hDV9ooxVi9KQvzFvlL36VTfS8Cwd68xOcqtyQQtnsV8Uq7yIP18Wfr29y5L_gVzwrks6K0b2fBlJBARrRYcPvRznn2QzW5LOuh2SwAM4v6DayDrhJD4kaq2AwpWs0oriqdTRq-a3s/s1600/IMG_20171027_203133.JPG
Gambar 2 = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqBxJMOPCVlXltsZkPNsNg6kKFX-lVLUlOzCnXOKDr1GWna8-dh7GeAklo7zVC-aKS3XPirxZLCHA50nmJBdK-VtweHln8vu4VYVumR11jwnfVK1WuGbPn2No_h-mFhsPfGRdMXILPXR0/s1600/IMG_20171027_203113.JPG
Tombol download sederhana
<button onclick="window.location='###'"><b><u>Download</u></b></button>
Hasilnya:Kalau tombol download yang ini harus edit html menuju template anda.
Tombol download keren
1.Masuk ke blog anda.
2.Pilih template Edit HTML
3.Cari kode </b:skin>
4.Copy CSS di bawah ini lalu di pastekan di atas kode </b:skin>
.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:#5FAAE3; 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:#454242; 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;}
Keterangan : Untuk membuat tombol berada di samping kiri ubah text-align:center; menjadi text-align:left; (di dalam button).Kalau sudah lalu klik save/simpan template.
Selanjut nya untuk penggunaan nya di dalam postingan/menampilkan tombol download nya ,tuliskan kode di bawah ini pada mode HTML :
<div class="button">
<a class="download" href="http"###">DOWNLOAD</a>
</div>
<div class="clear"></div>
Keterangan : ganti tanda ### dengan link download anda.
Tambahan :
<button onClick="window.location=' # '" style="background-color: #3583c0; color: #ffffff; width: 100px; heigth: 25px;">Download 1</button> <button onClick="window.location=' # '" style="background-color: #3583c0; color: #ffffff; width: 100px; heigth: 25px;">Download 2</button>
Hasilnya :
<button onClick="window.location=' # '" style="background-color: #fff000; color: #ffffff; width: 100px; heigth: 25px;">Download</button> <button onClick="window.location=' # '" style="background-color: #000fff; color: #ffffff; width: 100px; heigth: 25px;">Unduh</button>
Hasilnya :Keterangan : ganti tanda # dengan link download anda.
Tambahan lagi
<center> <a href="###"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCUBqtiYKINOBvRDzyA-CIgT-OSg2A_ylX0PQxPtyKI93ButHte0GmgAGjhjySybbZN2a-sOfpBDmzI6bfpPedvhajb6eBhZfQNSoWJXzs6GJoW2wFfUtjuOEUc1CFPOV55JswrnaDeo/s1600/download-icon.png "height="50"width="100"</a></center>
Hasilnya :
<center> perintah untuk menempatkan posisi berada di tengah, jika ingin bera di posisi kanan atau kiri tinggal di ganti dari center menjadi left atau right. Dan ganti tanda ### dengan link download anda.
<center><a href="###"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJBCaklaoIqbTxnnsSmWh2ZRQTIvoRTzPsTsMi8Z-boRmVV2irVNFCo3te1sjOCzD7Q1P1VxRAEyzF7CWFIOGS9nK72yE4TfqYleY3Pl5lvUeydasXbibNT_QV3_AGPO8crVn9cKGCxwg/s1600/arrow-download-icon.png
"height="50"width="100"</a></center>
Hasilnya :
<center> perintah untuk menempatkan posisi berada di tengah, jika ingin bera di posisi kanan atau kiri tinggal di ganti dari center menjadi left atau right. Dan ganti tanda ### dengan link download anda.
Tags:
Tutorial