Teknologi Update - Cara Mudah Buat Tombol DEMO di Blog
Cara Mudah Untuk Membuat Tombol DEMO dan DOWNLOAD di Blog - Demi kenyamanan pengunjung/visitor saat akan mengunduh sebuah file, terlebih lagi memang dari website yang menyedia layanan download dengan memberikan kenyamanan dan kemudahan para visitor untuk mengunduh/download file maka sebaiknya para pengelola website memikirkan membuat tombol DEMO dan DOWNLOAD yang keren dan menarik di blog.
Tutorial kali ini akan membawa sobat supaya bisa memberikan arahan yang dapat memuaskan orang lain, dengan begitu website yang telah sobat kelola dapat di apresiasi sangat baik oleh para visitor/pengunjung.
Membuat tombol DEMO dan DOWNLOAD ini akan berada tampilannya di dalam artikel, namun sebelumnya harus menyisipkan beberapa kode script terlebih dahulu di dalam template blog yang sobat gunakan agar berfungsi dengan baik.
Cara Mudah Buat Tombol DEMO dan DOWNLOAD di Blog
1. Pada script template di Menu Edit HTML blog sobat, cari terlebih dahulu barisan kode script <style type='text/css'> Setelah itu Copy Paste kan kode script dibawah ini tepat berada dibawah kode script sebelumnya.
.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;}
2. Simpan Template
Nah untuk dapat membuat tombol DEMO dan DOWNLOAD di dalam artikel, caranya yaitu dengan memasukan secara manual kode script di setiap postingan artikel yang nantinya akan sobat publikasikan. Kenapa musti harus secara manual?? Alasanya biar nanti sobat dapat menentukan sendiri lokasi yang tepat untuk meletakan tombol DEMO dan DOWNLOAD.
<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>
Note:
URL DEMO DISINI >> Alamat URL Website untuk DEMO
URL DOWNLOAD DISINI >> Alamat URL Website untuk DOWNLOAD
Praktis juga ya soba ternyata Cara Mudah Buat Tombol DEMO dan DOWNLOAD di Blog, selain itu juga apabila visitor/pengunjung menemukan posisi untuk mendownload dari artikel sobat pasti seterusnya blog sobat akan sangat kebanjiran pengunjung. Dengan arti kata menambahkan dan membuat tombol Demo dan Download di dalam artikel blog bisa dapat menambah para visitor/pengunjung kedalam blog.
Demikian tutorial dari saya,semoga bermanfaat dan jangan lupa tinggalkan komentar sob ya
0 Comments