Cara Membuat Tombol Demo Dan Download Pada Blog

Mungkin anda pernah melihat tombol demo dan download ini pada saat mengunjungi blog yang membagikan template gratis. Cara membuat tombol demo dan download ini tidaklah sulit. Jika anda ingin membuatnya, berikut langkah-langkahnya.

1. Seperti biasanya, yang pertama silahkan anda login dulu ke Blogger

2. Pilih Template » Edit HTML

3. Pasang kode dibawah ini tepat diatas kode ]]></b:skin>

.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:#008000!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}

4. Simpan template

5. Langkah selanjutnya, anda buat postingan baru

6. Untuk membuat tombol demo dan download, pilih HTML

7. Pasang kode dibawah ini

<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="https://goo.gl/XltEvr" target="_blank">Demo</a>
<a class="buttonx" href="https://goo.gl/ggLcE1" target="_blank">Download</a>
</div>

8. Pilih Compose lalu Publikasikan

Namun jika anda tidak ingin repot, bisa memakai cara dibawah ini :

1. Langsung buat postingan baru

2. Pilih HTML, lalu pasang 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:#008000!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="https://goo.gl/XltEvr" target="_blank">Demo</a>
<a class="buttonx" href="https://goo.gl/ggLcE1" target="_blank">Download</a>
</div>

Baca juga :
» Cara Memasang Profile Keren Pada Blog
» Cara Mudah Membuat Kolom Permalink Keren
» Cara Mudah Membuat Widget Banner Iklan Link Teks Pada Blog

3. Pilih Compose lalu Publikasikan

Maka hasilnya akan seperti ini :

Demo Download

Tidak sulit kan membuat tombol demo dan download ini! Semoga artikel ini bisa membantu dan bermanfaat. Terima kasih atas kunjungannya and happy blogging.