Advertisement
Cara Membuat Tombol Demo & Download di Blogger
A. Dengan Edit Html Template Blogger
1. Masuk ke Blogger.com >> Tema >> Edit Html2. 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>
<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>
.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.
