Skip to main content

Cara Membuat Tombol Demo dan Download Sederhana di Postingan Blog

Cara Membuat Tombol Demo dan Download Sederhana di Postingan Blog

Cara Membuat Tombol Demo dan Download Sederhana di Postingan Blog - Membuat tombol demo dan download pada suatu blog sangatlah mudah dan sederhana. Sama Halnya membuat link ulr pada postingan blog biasa, namun dibuat lebih menarik dan terlihat lebih keren dengan memberikan kotak berwarna tanpa memerlukan efek elemen namun tetap terlihat indah, dan jelas dilihat.

Membuat tombol demo pada postingan blog tidak hanya sekedar tombol demo saja, tetapi bisa juga di ubah secara bebas misalnya saja mengubahnya dengan tombol Lihat, Kunjung, Contoh Beli dan lain-lain. Pembuatan tombol ini juga sangat menguntungkan bagi para pembaca untuk melihat lebih jelas hasil apa yang akan di tampilkan.  Jika ada yang belum paham, cara kerja tombol blog ini adalah sama halnya link biasa yang diubah menjadi teks atau yang menggantikan tombol link dan diarahkan ke link tujuan jika anda menekan tombol tersebut namun tetap ringan karena menggunakan kode CSS.

Menurut saya satu atau kedua tombol ini sangatlah penting bagi seorang blogger, terutama bagi pembuat tutorial blogger atau penjual template blog, pasti menyertakan yang namanya tombol demo atau review. Dengan adanya Tombol link Demo/Result ini juga dapat membuat blog kita jadi  terlihat lebih rapi dan jelas. Penggunaan tombol yang terlihat mencolok ini juga memudahkan para pembaca untuk tidak salah memilih.

Tutorial Cara Mudah Memasang Tombol Demo dan Download pada Postingan Blog

1. Pertama buka Blog anda > Pilih menu Tema > kemudian pilih Edit HTML

2. Kemudian letakkan kode berikut sebelum ]]></b:skin> atau </style>

/* Tombol btn-demo dan btn-download 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-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}
.btn-demo {background-color:#3498DB;}
.btn-download {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 kode ini di dalamnya > kemudian 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-download" href="LINK-ANDA" rel="nofollow noopener" target="_blank">download</a></li>
</ul>
</div>

Sedangkan Jika anda hanya ingin memasang Tombol Demo Saja tepat di tengah-tengahnya maka gunakanlah kode 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 jika untuk Tombol Download Saja gunakan kode ini gunakan kode ini

<div style="text-align: center;">
<ul class="yukibutton">
<li><a class="btn-download" href="LINK-ANDA" rel="nofollow noopener" target="_blank">download</a></li>
</ul>
</div>

Keterangan:

KodeKeterangan
#3498DBKode warna untuk tombol Demo
#EB1943Kode warna untuk tombol Download
LINK-ANDAIsi dengan Link url yang akan dituju
DEMO dan DOWNLOADDapat diubah sesuka hati (misalnya: Lihat, Beli dan lain-lain)

Demikianlah Tutorial Cara Membuat Tombol Demo dan Download di Postingan Blog dari analisyuki.com, jika ada sesuatu yang kurang jelas dan tidak dimengerti silahkan berkomentar dibawah ini, Terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar