2 kumpulan materi soal dan jawaban lengkap: Cara Menciptakan Tombol Download Keren Dan Resposnsive Di Blog

Cara Membuat Tombol Download Keren Dan Responsive Di Blog

,
Halo teman-teman jumpa lagi dengan kami, pada kesempatan kali ini kami akan menawarkan tutorial atau cara menciptakan tombol d0wnl0ad keren dan responsive di blog

Tombol d0wnl0ad yang di maksud disini yaitu sebuah tombol dalam blog dimana saat kita klik tombol tersebut akan mengarahkan kita ke halaman d0wnl0ad file dimana sang pemilik file menyimpan atau meng-upload file tersebut.

Tombol d0wnl0ad biasanya ditemukan di blog yang mempunyai niche d0wnl0ad, baik itu d0wnl0ad apk android, software, lagu, film dan file-file lainnya. Tapi bukan berarti blog yang bukan blog d0wnl0ad tidak terdapat tombol d0wnl0ad.

Membuat tombol d0wnl0ad yang keren dan responsive di blog bukanlah hal yang sulit, teman-teman hanya perlu sedikit pemahaman terhadap bahasa aktivitas CSS dan HTML, namun jikalau 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.

Sampai disini teman-teman sudah berhasil memasang tombol d0wnl0ad 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 d0wnl0adnya.

<div class="button">
<a class="d0wnl0ad" href="##">DOWNLOAD</a>
</div>
<div class="clear"></div>

Catatan:
Ganti ## dengan link d0wnl0ad.

3). Selesai, silahkan klik lagi compose, untuk melihat hasilnya.

4). Nah semoga tampilan tombol d0wnl0ad yang kita buat, terlihat lebih keren lagi, ganti code di bab 2 diatas, dan gunakan code dibawah ini.

Catatan:

Ganti # dengan link gambar file

Ganti Muammar dengan Nama file atau deskripsi file.

Ganti ## dengan link d0wnl0ad.

5). Selamat tombol d0wnl0ad keren dan responsive yang teman-teman buat sudah jadi, jangn lupa untuk memasukkan link d0wnl0ad filenya di daerah yang sudah di sediakan.

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;}
.d0wnl0ad {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;}
.d0wnl0ad: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="d0wnl0ad" 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 d0wnl0ad.

Nah itulah kangkah-langkah yang harus teman-teman lakukan kalau ingin membuat tombol d0wnl0ad keren dan responsive di blog sangat mudahkan? Silahkan teman-teman praktekkan pribadi di blog masing-masing, jangan lupa untuk bertanya, jikalau dalam pembuatannya terdapat kendala.

Demikianlah artikel ihwal cara menciptakan tombol d0wnl0ad keren dan responsive di blog, semoga bermanfaat, dan jangan lupa untuk meninggalkan komentar serta share artikelnya biar yang lain tau.
Sumber http://muammar23.blogspot.com