Cara Membuat Tombol Download, Demo, Beli, dan Whatsapp Blogger

Saifulah.id - Saat posting artikel, pastinya suatu saat kita akan membutuhkan kode untuk membuat tombol dalam postingan agar terlihat lebih rapi dan berkelas. Tombol ini bisa nya dipakai untuk menempatkan link Download, link Demo, link Pembelian (Buy), dan link sosial media seperti Whatsapp dan lain-lain.

1. Memasang Kode CSS

• Buka Dashboard Blogger
• Klik Tema
• Pilih Edit HTML
  
• Cari kode ]]></b:skin>
• Letakkan kode dalam kotak berikut, di atas ]]></b:skin>
• Simpan Tema

/* CSS icon background */
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center} .icon.download, .darkMode .button.outline .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")} .icon.demo{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>")} .icon.cart{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7.42226 19.8203C7.84426 19.8203 8.18726 20.1633 8.18726 20.5853C8.18726 21.0073 7.84426 21.3493 7.42226 21.3493C7.00026 21.3493 6.65826 21.0073 6.65826 20.5853C6.65826 20.1633 7.00026 19.8203 7.42226 19.8203Z'/><path d='M18.6747 19.8203C19.0967 19.8203 19.4397 20.1633 19.4397 20.5853C19.4397 21.0073 19.0967 21.3493 18.6747 21.3493C18.2527 21.3493 17.9097 21.0073 17.9097 20.5853C17.9097 20.1633 18.2527 19.8203 18.6747 19.8203Z'/><path d='M2.74988 3.25L4.82988 3.61L5.79288 15.083C5.87088 16.018 6.65188 16.736 7.58988 16.736H18.5019C19.3979 16.736 20.1579 16.078 20.2869 15.19L21.2359 8.632C21.3529 7.823 20.7259 7.099 19.9089 7.099H5.16388'/></svg>")} .icon.whatsapp{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fefefe'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></g></svg>")} .button.outline .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348525c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}


/* Button */
.button{display:inline-flex;align-items:center; margin:12px 12px 12px 0;padding:10px 15px;outline:0;border:0; border-radius:2px;line-height:20px; color:#fefefe; background-color:#204ecf; font-size:13px;font-family:'Noto Sans', sans-serif; white-space:nowrap;overflow:hidden;max-width:100%} .button.outline{color:inherit; background-color:transparent; border:1px solid #767676} .button.outline:hover{border-color:#204ecf} .button.whatsapp{background-color:#25D366} .buttonInfo{display:flex;flex-wrap:wrap;justify-content:center; margin:12px 0 0} .buttonInfo > *{margin:0 12px 12px 0} .buttonInfo > *:last-child{margin-right:0} @media screen and (max-width:480px){.buttonInfo > *{flex-grow:1;justify-content:center} .buttonInfo > *:last-child{flex:0 0 auto}}

2. Membuat Tombol Dalam Postingan

Saat membuat postingan baru, kita bisa menambahkan fitur tombol yang bagus dengan cara menambahkan sedikit kode berikut ini, tapi sebelumnya kita harus beralih pada tampilan HTML terlebih dahulu, caranya:

• Tekan tombol Pensil
• Pilih < > Tampilan HTML
• Copy Paste kode berikut ini ke dalam postingan:

a. Tombol Standard

Cocok untuk tombol untuk keperluan banyak hal, karena tombol ini tidak dilengkapi dengan icon atau simbol sehingga multifungsi.

Kodenya: <a class='button' href='#'>Standard_button</a>

Demo

Standard_button

b. Tombol Download (Biru)

Cocok untuk meletakkan link Donwload.

Kodenya: <a class='button' href='#'><i class='icon download'></i>Download</a>

Demo

c. Tombol Download (Putih)

Cocok untuk meletakkan link Donwload.

Kodenya: <a class='button outline' href='#'><i class='icon download'></i>Download</>

Demo

d. Tombol Demo

Cocok untuk meletakkan link Demo atau Contoh

Kodenya: <a class='button' href='#'><i class='icon demo'></i>Demo</a>

Demo

Demo

d. Tombol Beli / Belanja

Cocok untuk meletakkan link Demo atau Contoh

Kodenya: <a class='button' href='#'><i class='icon cart'></i>Beli Sekarang</a>

Demo

Buy now

d. Tombol WhatsApp

Cocok untuk meletakkan link Demo atau Contoh

Kodenya: <a class='button whatsapp' href='#'><i class='icon whatsapp'></i>Whatsapp me</a>

Demo

Whatsapp me