Cara Mudah Membuat Tombol Demo Dan Download Pada Postingan Blog

Selamat pagi sobat. Hari ini saya akan share tentang bagaimana cara membuat tombol DEMO dan DOWNLOAD pada postingan blog kita.

Tombol Demo dan Download ini mempunyai banyak kegunaan, khususnya bagi anda yang memiliki blog dengan niche khusus download file. Dengan tombol download ini tampilannya akan semakin keren jika dibandingkan dengan membuat sekedar tulisan menggunakan "Link".

Caranya banyak untuk membuat tombol ini, namun kali ini saya hanya akan share cara yang paling mudah saja. Dengan tampilan tombol donwload dan demo seperti dibawah ini

• Demo
• Download

Langkah-Langkah Membuat Tombol Demo dan Download:

1. Log In ke Blogger 
2. Kemudian pilih Template
3. Pilih CUSTOMISE (SESUAIKAN) yang letaknya tepat disamping EDIT HTML
4. Jika sudah, silahkan pilih ADVANCE (TINGKAT LANJUT) >> ADD CSS (TAMBAHKAN CSS)
5. Kemudian Copy kode berikut ini lalu Paste kan di dalam kolom ADD CSS (TAMBAHKAN CSS) yang sudah tersedia disana
   
   
   .button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
   .button ul {margin:0;padding:0}
   .button li{display:inline;margin:0;padding:0}
   .demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; 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 {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !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;}
   .demo: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 }
   .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 }

   6. Jika sudah silahkan di simpan, lalu kembali lagi ke Dashboard blog anda.

   7. Setiap kali anda ingin menampilkan tombol Demo dan Download ini, silahkan copy kode berikut        ini di bagian HTML postingan anda.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://belajarcorner.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://belajarcorner.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

    8. SELESAI



Mudah bukan? silahkan dicoba ya sob, jika ada yang perlu ditanyakan jangan sungkan untuk bertanya.


Semoga bermanfaat.