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.