Jika Anda suka berbagi template gratis, tentu Tombol Demo & Download di Posting Blog ini sangat penting dan bagus, lebih menarik, sebagaimana gambar ilustrasi tulisan ini.
Cara Membuat Tombol Demo & Download di Posting Blog
CB ambil kodenya dari Leet Blogger. Berikut ini cara membuatnya: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}
Catatan: Warna background bisa diubah sesuai dengan selera. Lihat: Kode Warna HTML.
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="https://goglazculture.blogspot.com/" target="_blank">Demo</a>
<a class="buttonx" href="https://goglazculture.blogspot.com/" target="_blank">Download</a>
</div>
<a class="buttonx" href="https://goglazculture.blogspot.com/" target="_blank">Demo</a>
<a class="buttonx" href="https://goglazculture.blogspot.com/" target="_blank">Download</a>
</div>
Jika mau menambah tombol, tinggal tambahkan kode:
<a class="buttonx" href="https://goglazculture.blogspot.com/" 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="https://goglazculture.blogspot.com/" target="_blank">Demo</a>
<a class="buttonx" href="https://goglazculture.blogspot.com/" 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="https://goglazculture.blogspot.com/" target="_blank">Demo</a>
<a class="buttonx" href="https://goglazculture.blogspot.com/" target="_blank">Download</a>
</div>
Ganti link dan nama tombolnya!
3. Publish!
Hasilnya seperti ini:
Demikian Membuat Tombol Demo & Download di Posting Blog. Good Luck! (https://goglazculture.blogspot.com/).*
Tag :
Desain Blog,
Panduan Blogging
