Tombol Demo Dan Download Dengan Tampilan Simple Di Blog

Tuan Siput - Tombol demo dan download sangatlah penting khususnya bagi blog dengan konten download.

Dengan adanya tombol demo dan download akan membuat pengunjung lebih mudah dalam memahami dimana posisi link ditempatkan.

Saat ini yang akan dibagikan merupakan tombol demo yang didapatkan dari contohblog.com, sebenarnya tombol yang dibagikan ini memanglah hasil asli yang diambil dari blog contohblog.com yang kemudian hanya diubah pada bagian warnanya saja.

Yang membuat tombol demo ini menarik adalah pada tampilannya yang simple serta tidak menggunakan berbagai macam kode, jadi ketika menggunakan tombol ini akan sangat mudah ketika melakukan perubahan template. Tinggal memindahkan kode CSSnya saja ke dalam template blog yang baru.

Selain itu kamu bisa mengubah warna yang digunakan dengan warna yang kamu inginkan.

Membuat Tombol Demo Dan Download Dengan Tampilan Simple Di Blog


Untuk memasangnya, silahkan ikuti beberap langkah berikut ini.

1. Login ke "Blogger" > pilih menu "Tema" > klik "Edit HTML"

2. Copy kode di bawah ini dan letakkan di atas atau sebelum kode ]]></b:skin> atau </style>.

/* Tombol Demo Tuan Siput */
.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:#49ace1!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#ffa502!important;background:0} .buttonx:active{position:relative;top:1px}

3. Simpan template.

Untuk cara mesangnya, ikuti langkah berikut ini.

4. Masuk ke menu "Postingan" > pilih "Entri baru" > copy dan letakkan kode di bawah ini pada tab "HTML" postingan bukan compose.

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

Untuk demo silahkan lihat pada link berikut ini:


Jika ingin memasang tombol tersebut langsung pada postingan tanpa mengedit kode CSS, maka bisa mengikuti cara di bawah ini:

1. Masuk ke "Blogger" > pilih "Entri baru" > copy dan paste kode di bawah ini pada tab "HTML" (bukan compose)

<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:#49ace1!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} 
.buttonx:hover{background-color:#ffa502!important;background:0}
.buttonx:active{position:relative;top:1px}
</style>
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="https://www.tuansiput.com/" target="_blank">Demo</a>
<a class="buttonx" href="https://www.tuansiput.com/" target="_blank">Download</a>
</div>

2. Publish.

Note: Silahkan ganti kode warna berikut jika kamu ingin menggantinya.
  • Warna text #fff
  • Warna biru #49ace1
  • Warna kuning #ffa502

0 Response to "Tombol Demo Dan Download Dengan Tampilan Simple Di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel