Tombol Download Dan Demo Di Blogger Dengan Tampilan Simple

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

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

Saat ini yang akan dibagikan merupakan tombol demo yang didapatkan dari contohblog.com, gotong royong tombol yang dibagikan ini memanglah hasil orisinil yang diambil dari blog contohblog yang lalu hanya diubah pada bab warnanya saja.

Yang menciptakan tombol demo ini menarik yaitu pada tampilannya yang simple serta tidak memakai banyak sekali macam kode, jadi saat memakai tombol ini akan sangat gampang saat melaksanakan perubahan template. Tinggal memindahkan instruksi CSSnya saja ke dalam template blog yang baru.

Selain itu kau sanggup mengubah warna yang dipakai dengan warna yang kau inginkan.

Membuat Tombol Demo Dan Download Dengan Tampilan Simple Di Blog

Untuk memasangnya, silahkan ikuti beberap langkah berikut ini.

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

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

/* Tombol Demo  */ .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 sajian "Postingan" > pilih "Entri baru" > copy dan letakkan instruksi 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:

Demo

Jika ingin memasang tombol tersebut eksklusif pada postingan tanpa mengedit instruksi CSS, maka sanggup mengikuti cara di bawah ini:

1. Masuk ke "Blogger" > pilih "Entri baru" > copy dan paste instruksi 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://kakangagus.blogspot.com" target="_blank">Demo</a> <a class="buttonx" href="https://kakangagus.blogspot.com" target="_blank">Download</a> </div>

2. Publish.

Note: Silahkan ganti instruksi warna berikut jikalau kau ingin menggantinya.

• Warna text #fff
• Warna biru #49ace1
• Warna kuning #ffa502

Sumber https://www.tikusmales.com/