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