Cara Membuat Tombol Download Keren Dan Responsive Di Blog
,
Halo teman-teman jumpa lagi dengan kami, pada kesempatan kali ini kami akan memperlihatkan tutorial atau cara menciptakan tombol download keren dan responsive di blog
Tombol download yang di maksud disini ialah sebuah tombol dalam blog dimana dikala 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 mempunyai 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 kegiatan CSS dan HTML, namun bila pemahaman teman-teman terhadap bahasa tersebut masih minim menyerupai saya ini, teman-teman sanggup mengikuti tutorial sederhana yang sudah saya siapkan berikut ini.
Cara Membuat Tombol Download Keren Dan Responsive Di Blog
1). Silahkan login ke blog kau terlebih dahulu,
2). Setelah login, pilih tema, lalu edit HTML
3). Slanjutnya copy code CSS dibawah ini, lalu tempelkan diatas ]]></b:skin> atau code </head> lalu 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>
.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 baru
2). Pilih HTML lalu copy code dibawah ini, dan letakkan sempurna dimana teman-teman ingin melatakkan tombol downloadnya.
<div class="button">
<a class="download" href="##">DOWNLOAD</a>
</div>
<div class="clear"></div>
<a class="download" href="##">DOWNLOAD</a>
</div>
<div class="clear"></div>
Catatan:3). Selesai, silahkan klik lagi compose, untuk melihat hasilnya.
Ganti ## dengan link download.
4). Nah semoga tampilan tombol download yang kita buat, terlihat lebih keren lagi, ganti code di bab 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=" Cara Membuat Tombol Download Keren Dan Responsive Di Blog Cara Membuat Tombol Download Keren Dan Resposnsive Di Blog" height="100" src="#" style="margin: 0 0 10px 15px; overflow: hidden;" title="Cara Membuat Tombol Download Keren Dan Resposnsive Di Blog" 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>
<div style="background-color: transparent; border: 3px #000000 double; float: center; padding: 10px; text-align: center; width: 100%;">
<img alt=" Cara Membuat Tombol Download Keren Dan Responsive Di Blog Cara Membuat Tombol Download Keren Dan Resposnsive Di Blog" height="100" src="#" style="margin: 0 0 10px 15px; overflow: hidden;" title="Cara Membuat Tombol Download Keren Dan Resposnsive Di Blog" 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:5). Selamat tombol download keren dan responsive yang teman-teman buat sudah jadi, jangn lupa untuk memasukkan link download filenya di daerah yang sudah di sediakan.
- Ganti # dengan link gambar file
- Ganti Muammar dengan Nama file atau deskripsi file.
- Ganti ## dengan link download.
Cara diatas Juga sanggup dilakukan tanpa harus edit HTML template blog, bagaimana caranya? Cukup copy code dibawah ini, lalu 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=" Cara Membuat Tombol Download Keren Dan Responsive Di Blog Cara Membuat Tombol Download Keren Dan Resposnsive Di Blog" height="100" src="#" style="margin: 0 0 10px 15px; overflow: hidden;" title="Cara Membuat Tombol Download Keren Dan Resposnsive Di Blog" 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>
<div style="background-color: transparent; border: 3px #000000 double; float: center; padding: 10px; text-align: center; width: 100%;">
<img alt=" Cara Membuat Tombol Download Keren Dan Responsive Di Blog Cara Membuat Tombol Download Keren Dan Resposnsive Di Blog" height="100" src="#" style="margin: 0 0 10px 15px; overflow: hidden;" title="Cara Membuat Tombol Download Keren Dan Resposnsive Di Blog" 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: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 eksklusif di blog masing-masing, jangan lupa untuk bertanya, bila dalam pembuatannya terdapat kendala.
- Ganti # dengan link gambar file
- Ganti Muammar dengan Nama file atau deskripsi file.
- Ganti ## dengan link download.
Demikianlah artikel wacana cara menciptakan tombol download keren dan responsive di blog, semoga bermanfaat, dan jangan lupa untuk meninggalkan komentar serta share artikelnya biar yang lain tau.
0 comments:
Post a Comment