Cara Membuat Tombol Demo dan Download Sederhana di Postingan Blog - Membuat tombol demo dan d0wnl0ad pada suatu blog sangatlah gampang dan sederhana. Sama Halnya menciptakan link ulr pada postingan blog biasa, namun dibentuk lebih menarik dan terlihat lebih keren dengan menunjukkan kotak berwarna tanpa memerlukan dampak elemen namun tetap terlihat indah, dan terang dilihat.
Membuat tombol demo pada postingan blog tidak hanya sekedar tombol demo saja, tetapi sanggup juga di ubah secara bebas contohnya saja mengubahnya dengan tombol Lihat, Kunjung, Contoh Beli dan lain-lain. Pembuatan tombol ini juga sangat menguntungkan bagi para pembaca untuk melihat lebih terang hasil apa yang akan di tampilkan. Jika ada yang belum paham, cara kerja tombol blog ini yaitu sama halnya link biasa yang diubah menjadi teks atau yang menggantikan tombol link dan diarahkan ke link tujuan jikalau anda menekan tombol tersebut namun tetap ringan sebab memakai isyarat CSS.
Menurut aku satu atau kedua tombol ini sangatlah penting bagi seorang blogger, terutama bagi pembuat tutorial blogger atau penjual template blog, niscaya menyertakan yang namanya tombol demo atau review. Dengan adanya Tombol link Demo/Result ini juga sanggup menciptakan blog kita jadi terlihat lebih rapi dan jelas. Penggunaan tombol yang terlihat mencolok ini juga memudahkan para pembaca untuk tidak salah memilih.
Tutorial Cara Praktis Memasang Tombol Demo dan Download pada Postingan Blog
1. Pertama buka Blog anda > Pilih sajian Tema > lalu pilih Edit HTML
2. Kemudian letakkan isyarat berikut sebelum ]]></b:skin> atau </style>
/* Tombol btn-demo dan btn-d0wnl0ad CSS */ .yukibutton{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .yukibutton ul {margin:0;padding:0} .yukibutton li{display:inline;margin:5px;padding:0;list-style:none;} .btn-demo,.btn-d0wnl0ad{padding:12px 50px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .btn-demo {background-color:#3498DB;} .btn-d0wnl0ad {background-color:#EB1943;}3. Kemudian Pilih Simpan Tema
4. Untuk menerapkan Kedua Tombol Demo dan Downoad di blog anda, pilih Entri Baru > pilih HTML > letakkan isyarat ini di dalamnya > lalu Publikasikan
<div style="text-align: center;"> <ul class="yukibutton"> <li><a class="btn-demo" href="LINK-ANDA" rel="nofollow noopener" target="_blank">demo</a></li> <li><a class="btn-d0wnl0ad" href="LINK-ANDA" rel="nofollow noopener" target="_blank">d0wnl0ad</a></li> </ul> </div>Sedangkan Jika anda hanya ingin memasang Tombol Demo Saja sempurna di tengah-tengahnya maka gunakanlah isyarat ini
<div style="text-align: center;"> <ul class="yukibutton"> <li><a class="btn-demo" href="LINK-ANDA" rel="nofollow noopener" target="_blank">demo</a></li> </ul> </div>Sedangkan jikalau untuk Tombol Download Saja gunakan isyarat ini gunakan isyarat ini
<div style="text-align: center;"> <ul class="yukibutton"> <li><a class="btn-d0wnl0ad" href="LINK-ANDA" rel="nofollow noopener" target="_blank">d0wnl0ad</a></li> </ul> </div>Keterangan:
| Kode | Keterangan |
|---|---|
| #3498DB | Kode warna untuk tombol Demo |
| #EB1943 | Kode warna untuk tombol Download |
| LINK-ANDA | Isi dengan Link url yang akan dituju |
| DEMO dan DOWNLOAD | Dapat diubah sesuka hati (misalnya: Lihat, Beli dan lain-lain) |
Demikianlah Tutorial Cara Membuat Tombol Demo dan Download di Postingan Blog dari analisyuki.com, jikalau ada sesuatu yang kurang terang dan tidak dimengerti silahkan berkomentar dibawah ini, Terimakasih.
Sumber http://www.analisyuki.com/