Cara Membuat Tombol Demo & Download di Blogger

Cara Membuat Tombol Demo & Download di Blogger

A. Dengan Edit Html Template Blogger

1. Masuk ke Blogger.com >> Tema >> Edit Html
2. Copy kode di bawah ini.

.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}

Keterangan : Ganti background warna sesuai selera.

2. Cari ]]></b:skin> atau </style> , simpan kode di  diatasnya.

3. Simpan

4. Untuk menampilkannya.  pada saat membuat postingan  masuk ke mode HTML dan letakkan kode berikut :

<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="LINK" target="_blank">Demo</a>
<a class="buttonx" href="LINK target="_blank">Download</a>
</div>

Ganti LINK dengan alamat  link yang akan ditampilkan atau dituju.

5. Publish dan lihat hasilnya.

B. Dengan Edit Postingan

Cara ini  tidak ribet tinggal menempelkan kode di postingan html artikel saja tanpa harus mengotak atik template.

1. Pada mode edit artikel masuk ke mode HTML, kemudian tempelkan kode dibawah 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="LINK" target="_blank">Demo</a>
<a class="buttonx" href="LINK" target="_blank">Download</a>
</div>

2. Ganti link blog Link URL yang kalian tujukan.