Cara Menciptakan Tombol Demo Dan Result Di Postingan Blog
Cara Membuat Tombol Demo dan Result di Postingan Blog - menciptakan tombol demo dan result pada suatu blog sangatlah gampang dan sederhana. Sama Halnya menciptakan link ulr pada postingan blog biasa, namun dibentuk lebih menarik dan terlihat lebih profesional dengan menawarkan kotak berwarna tanpa memerlukan imbas elemen namun tetap terlihat indah, dan terperinci 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 terperinci 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 kalau anda menekan tombol tersebut.
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
Kelebihan dari memakai tombol demo/result di blog ini yaitu tidak menawarkan efek terhadap kecepatan memuat blog, tidak membutuhkan waktu lama, tanpa imbas apapun tapi terlihat sederhana dan elegan, untuk itu aku akan menjelaskan tutorialnya di bawah dengan rinci.
Tutorial Cara Praktis Memasang Tombol Demo dan Result pada Postingan Blog
1. Pertama buka Blog anda > Pilih sajian Tema > lalu pilih Edit HTML
2. Kemudian letakkan aba-aba berikut sebelum ]]></b:skin> atau </style>
/* Tombol Demo */ .btn{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} .btn ul {margin:0;padding:0} .btn li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download{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} .demo {background-color:#3498DB;} .download {background-color:#1ABC84;} .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;}3. Kemudian Pilih Simpan Tema
4. Untuk menerapkan Kedua Tombol Demo dan Result di blog anda, pilih Entri Baru > pilih HTML > letakkan aba-aba ini di dalamnya > lalu Publikasikan
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-ANDA" target="_blank">DEMO</a></li> <li><a class="download" href="LINK-ANDA" target="_blank">RESULT</a></li> </ul> </div>Sedangkan Jika anda hanya ingin memasang Tombol Demo Saja sempurna di tengah-tengahnya maka gunakanlah aba-aba ini
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-ANDA" target="_blank">DEMO</a></li> </ul> </div>Sedangkan kalau untuk Tombol Result Saja gunakan aba-aba ini gunakan aba-aba ini
<div style="text-align: center;"> <ul class="btn"> <li><a class="download" href="LINK-ANDA" target="_blank">RESULT</a></li> </ul> </div>Keterangan:
| Kode | Keterangan |
|---|---|
| #3498DB | Kode warna untuk tombol Demo |
| #1ABC84 | Kode warna untuk tombol Result |
| LINK-ANDA | Isi dengan Link url yang akan dituju |
| DEMO dan RESULT | Dapat diubah sesuka hati (misalnya: Lihat, Beli dan lain-lain) |
Contohnya sanggup dilihat menyerupai ini:
