For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat Tombol multifungsi diblogger

Hello sobat IcloudZer kali ini ini admin bakalan membagikan informasi seputar dunia blogging untuk anda, yakni dalam membahas bagaiamana caranya membuat tombol klik dengan berbagai icon yang bisa kamu gunakan dengan mudahnya

Info: Oke jika kamunya sudah penasaran dengan pembahasan kita kali ini, yuk langsung aja kita bahas

Tombol Klik

Nah sobat sebelumnya kan saya sudah pernah membahas bagaimana caranya membuat tombol download dan demo diblogger

Namun kali ini admin akan membahas bagaiamana caranya membuat tombol download dan demo dengan berbagai icon atau tombol multifungsi yang mudah dan bisa digunakan

Fungsi Tombol

Seperti yang kita ketahui bahwa tombol diblogger ditampilkan dengan berbagai macam fungsi dan kegunaan, seperti untuk menampilkan link review dan sebagainya, maka fungsi tombol diblogger tersebut sangat diperlukan

Icon Multifungsi

Kamu bisa menggunakan berbagai icon dengan mudah semisal saat kamu ingin menampilkan tombol demo maka kamu bisa menggunakan icon khusus untuk tombol demo dan sebagainya

Info: Kamu bisa melihat berbagai contoh tampilan demo dari tombol tersebut didalam artikel ini, silahkan membaca hingga selesai ok

Cara Pembuatan

Baiklah sekarang saya akan mulai membahas bagaiamana caranya membuat tombol multi fungsi diblogger

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyimpan kode CSS dibawah ini, kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>

/* Tombol by Icloudice */
.rah-buttonku, .rah-tombol{position:relative;display:inline-flex;align-items:center;margin-right:5px;margin-bottom:10px;padding:10px 25px;border-radius:6px;font-size:.8rem;line-height:1.38rem;color:#161617;background:linear-gradient(-45deg,#eb847c 0,#fd0000 50%)}
.rah-buttonku:hover,  .rah-tombol:hover{color:inherit}
.rah-buttonku.outline, .rah-tombol.outline{background:linear-gradient(-45deg,#ff0000 0,#eb847c 50%);color:#fff !important;padding:9px 20px;box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.5);}
.rah-buttonku.whatsapp, . .rah-tombol.whatsapp{background:#4dc247;color:#fff}.rah-buttonku1 {position:relative;display:inline-flex;align-items:center;}
.rah-unduh-info{display:flex;justify-content:center;flex-wrap:wrap;}
.rah-unduh-info a{color:#fff;align-items:center;margin:0 12px 10px 0}
.rah-unduh-info a:last-child{margin-right:0}
/* Icon svg by icloudice */
.rah-icon{display:inline-block;vertical-align:bottom;margin-right:10px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center center;}
.rah-icon.unduh{background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M437.1 165.8C429 90.6 365.4 32 288 32c-51.2 0-96.3 25.6-123.4 64.7-8.3-3.4-17.4-5.3-26.9-5.3-39.1 0-70.8 34.4-71.4 73.4C26.4 177.5 0 216.5 0 257.5 0 307.7 40.7 352 90.9 352H243V211c0-7.2 5.8-13 13-13s13 5.8 13 13v141h152.1c50.2 0 90.9-44.3 90.9-94.5 0-44.7-32.3-84.1-74.9-91.7zM243 435.9l-47.9-47.2c-5.1-5-13.3-5-18.4.1-5 5.1-5 13.3.1 18.4l70 69c2.5 2.4 5.8 3.7 9.1 3.7 1.7 0 3.4-.3 5-1 1.5-.6 2.9-1.6 4.1-2.7l70-69c5.1-5 5.2-13.3.1-18.4-5-5.1-13.3-5.2-18.4-.1L269 435.9V352h-26v83.9z' fill='%23fff'></path></svg>")}
.rah-icon.beli{background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z' fill='%23fff'></path></svg>")}
.rah-icon.demo{background-image:url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z' fill='%23fff'></path></svg>")}
.rah-icon.info{background-image:url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M16,31A15,15,0,1,1,31,16,15,15,0,0,1,16,31ZM16,3A13,13,0,1,0,29,16,13,13,0,0,0,16,3Z' fill='%23fff'></path><rect fill='%23fff' height='9' width='2' x='15' y='14'></rect><path d='M16,12a2,2,0,1,1,2-2A2,2,0,0,1,16,12Zm0-2Z' fill='%23fff'></path></svg>")}
.rah-icon.contact{background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M426.666 330.667a250.385 250.385 0 0 1-75.729-11.729c-7.469-2.136-16-1.073-21.332 5.333l-46.939 46.928c-60.802-30.928-109.864-80-140.802-140.803l46.939-46.927c5.332-5.333 7.462-13.864 5.332-21.333-8.537-24.531-12.802-50.136-12.802-76.803C181.333 73.604 171.734 64 160 64H85.333C73.599 64 64 73.604 64 85.333 64 285.864 226.136 448 426.666 448c11.73 0 21.334-9.604 21.334-21.333V352c0-11.729-9.604-21.333-21.334-21.333z' fill='%23fff'></path></svg>")}
.rah-icon.wa{background-image:url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z' fill='%23fff'></path><path d='M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z' fill='%23fff'></path></svg>")}

Info: Atau juga kamu bisa menggunakan tag kode <style>

Cara Penggunaan

Nah setelah kamu meletakkan kode CSS yang saya berikann tersebut untuk menggunakan dan menampilkan tombolnya kamu bisa menggunakan kode html dibawah ini

<div class="rah-unduh-info">
<a class="rah-buttonku" href="/"><i class="rah-icon demo"></i>
<!-- Judul Tombolnya disini --></a></div>

Contoh Tampilan

Sebagai pelengkapnya admin bakalan memberikan contoh tampilan atau contoh demonya, berikut inj contoh tampilan dari tombol multifungsi diblogger

Tombol Demo

Dibawah ini adalah contoh tampilan dari tombol demonya

Tombol Contact

Dibawah ini adalah contoh tampilan dari tombol contact nya

Tombol WhatsApp

Dibawah ini adalah contoh tampilan dari tombol WhatsApp nya

Info: Oke sobat IcloudZer begitulah pembahasan kita kali ini mengenai tombol multifungsi diblogger mudah mudahan bermanfaat, ok

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.