Cara Membuat Tombol Demo dan Download di Posting Blog

Cara Membuat Tombol Demo dan Download di Posting Blog - Hallo sobat semuanya tombol demo dan tombol download biasanya digunakan untuk blog dengan niche download, seperti berbagi template blog atau blog download. Tapi jika kalian hanya menggunakan tulisan saja tentu kurang menarik perhatian. Kali ini saya akan membagikan tutorial bagaimana cara mempercantik link download dan link demo pada postingan blog.

1. Template> Edit HTML

2. Copas kode berikut ini di atas kode ]]></b:skin> atau </style>

.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#f78d1d!important;background:0} .buttonx:active{position:relative;top:1px}

3. Save Template!

CARA MENERAPKANNYA
1. Klik mode HTML saat menulis posting
2. Masukkan kode berikut ini beserta linknya

<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://banggarong.blogspot.co.id/" target="_blank">Demo</a>
<a class="buttonx" href="http://banggarong.blogspot.co.id/" target="_blank">Download</a>
</div>

Jika mau menambah tombol, tinggal tambahkan kode:

<a class="buttonx" href="http://banggarong.blogspot.co.id/" target="_blank">Nama Tombol</a> 

Ganti alamat blognya dengan link Anda!

3. Publish!

ALTERNATIF

Bisa juga Membuat Tombol Demo & Download di Posting Blog ini dengan langsung memasang kodenya di postingan, tanpa menyimpan kode HTML di dalam template. Caranya:

1. Klik Mode HTML
2. Copas saja kode berikut ini:

<style>
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#f78d1d!important;background:0}
.buttonx:active{position:relative;top:1px}
</style>
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://banggarong.blogspot.co.id/" target="_blank">Demo</a>
<a class="buttonx" href="http://banggarong.blogspot.co.id/" target="_blank">Download</a>
</div>

Ganti link dan nama tombolnya!

3. Publish!

Hasilnya seperti ini:

Demo Download

Share this post