Cara Membuat Tombol Demo dan Download Keren di Blog

KENEONO – Dikesempatan kali ini saya akan share Cara Membuat Tombol Demo dan Download di Blog. Mungkin sebagian sobat pernah menemui tombol download file atau tombol demo pada blog yang keren responsive disini saya akan memberikan tutorial cara membuatnya.

Dengen menambahkan tombol demo dan download yang keren ini pada blog sobat akan memberikan tampilan yang menarik dan membuat pungunjung sangat mudah untuk mendownload sebuat file pada tampilannya yang jelas dan keren pastinya. Seperti yang ada pada blog Kene Ono ini.

Berikut Cara Membuat Tombol Demo dan Download Pada Blog Yang Responsive :

• Pertama silakan sobat masuk dashboard blogger dan pilih menu “Tema” terus pilih “Edit HTML”.
• Selanjutnya silakan cari kode <style type='text/css'> dengan Ctrl+F lebih mudah nyarinya, kemudian copy script dibawah ini dan taruh dibawahnya kode <style type='text/css'>.
  

  
  .button{float:left;list-style:none;text-align:center;width:95%;margin:10px; padding:2px;font-size:14px;clear:both;} 
  .button ul {margin:0;padding:0} 
  .button li{display:inline;margin:5px;padding:0;list-style:none;} 
  .demo,.download {padding:10px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;} 
  .demo {background-color:#5a6269;} 
  .download {background-color:#1E90FF;} 
  .demo:hover {background-color:#ff9e47;color:#fff;opacity:1;} 
  .download:hover {background-color:#5a6269;color:#fff;opacity:1;} 
  .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} 
  .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
  

• Kemudian “Simpan” templatenya.
• Kalau sudah kita tinggal pasang tombol Demo dan Downloadnya di postingan artikel dengan mode “HTML” bukan Compose / atau taruh sesuka sobat. Copy script dibawah ini.
  

  
  <div style="text-align: center;">
  <ul class="button">
  <li><a class="demo" href="URL DEMO DISINI" target="_blank" title='Demo'>Demo</a></li>
  <li><a class="download" href="URL DOWNLOAD DISINI" target="_blank" title='Download'>Download</a></li>
  </ul>
  </div>
  <div class="clear"></div>
  

• Keterangan : tulisan “URL DEMO DISINI” ganti dengan link URL tujuan, dan juga “URL DOWNLOAD DISINI”
• Jika tidak tampil dengan sempurnya atau icon Demo & Download tidak tampil tambahkan kode dibawah ini diatas tad </head>.
  

  
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
  

• Selesai, silakan coba lihat hasilnya.

Sekian artikel kali ini tentang Cara Membuat Tombol Demo dan Download keren di tengah artikel blog responsive, semoga bisa bermanfaat untuk sobat semua.

Kunjungi terus blog keneono untuk mendapatkan artikel menarik lainnya. Terimakasih.