Cara Membuat Tombol DEMO Dan DOWNLOAD Responsive

Cara simple membuat tombol demo dan download di blog yang responsive tidak memberatkan loading blog, selain itu tampilanya juga sangat keren.
Tombol Demo dan Download merupakan atribut penting untuk blog yang berhubungan dengan template blog, sedangkan tombol download begitu juga penting untuk blog yang menyediakan aplikasi software dan lainya yang berhubungan dengan mendownload

Dengan adanya tombol yang jelas, maka akan memudahkan pengunjung untuk melanjutkan kemana arah yang akan dituju, contohnya DEMO merupakan sebuah tombol untuk melihat sesuatu yang sekiranya ingin dilihat secara langsung

Dan juga DOWNLOAD merupakan link tautan yang harus dituju sebelum mendapatkan yang ingin mereka harapkan

Tombol DEMO Dan DOWNLOAD Responsive

Oleh karena itu tautan link yang berupa tombol yang jelas akan sangat membantu dan sangat memudahkan pengunjung dalam melihat secara langsung atau untuk mendapatkan sesuatu yang diinginkan

Pada postingan kali ini saya akan menuliskan bagaimana caranya membuat tombol demo dan download yang simple, sederhana, dan responsive contohnya seperti dibawah ini


Cara membuat tombol demo dan download responsive


Login Blogger
Pilih Tema
Edit HTML
Copy paste kode dibawah ini, letakkan di atas ]]></b:skin> atau di bawah <style type='text/css'>
.button {float:left; list-style:none; text-align:center; width:100%;margin:10px 0;padding:0;font-size:15px;font-weight:bold;}
.download {border-radius:2px; padding:12px 12px !important;background:#0088FE;color:#fff !important;}
.demo {border-radius:2px; padding:12px 38px !important;background:#F50;color:#fff !important;}
.download:hover,.demo:hover {background:#000}

Kemudian simpan dan selesai, untuk merubah warna dan ukuran silahkan otak-atik kode diatas sesuai kreasi Anda sendiri

Cara untuk memunculkan tombol didalam postingan copy paste kode dibawh ini, letakkan di HTML pada saat Anda membuat artikel (jangan di compose)

<div class="button">
<a class="demo" href="#" real="nofollow" target="blank">DEMO</a>
<a class="download" href="#" real="nofollow" target="blank">DOWNLOAD</a>
</div>
<div class="clear">
</div>

Tanda # adalah tempat link yang akan dituju, serta DEMO dan DOWNLOAD merupakan tautan yang akan diklik Anda bisa merubah kata tersebut sesuai kebutuhan

Lalu bagaimana apabila Anda hanya membutuhkan satu tombol saja, misalnya hanya butuh tombol DEMO atau hanya tombol DOWNLOADnya saja caranya mudah sekali, hapus kode diatas yang sekiranya tidak diinginkan dimulai dari kode <a class= .... . . . . . . . ..  sampai dengan </a>

Atau mudahnya copy paste kode dibawh ini
Hanya tombol DEMO

<div class="button">
<a class="demo" href="#" real="nofollow" target="blank">DEMO</a>
</div>
<div class="clear">
</div>

Hanya tombol DOWNLOAD

<div class="button">
<a class="download" href="#" real="nofollow" target="blank">DOWNLOAD</a>
</div>
<div class="clear">
</div>

Baca disini : Cara membuat sitemap per lable responsive di blog

Itulah diatas tentang cara membuat tombol demo serta download yang responsive di blog, apabila merasa kesulitan dan ada yang perlu ditanyakan, komentar aja dibawah fast respon