Panduan Lengkap Penggunaan Tombol di Website: Mengoptimalkan Penggunaan HTML dan CSS untuk Blogspot
Tombol adalah salah satu elemen penting dalam desain website yang dapat meningkatkan pengalaman pengguna dan mengarahkan mereka untuk melakukan tindakan tertentu, seperti mengklik tautan, mengirim formulir, atau berinteraksi dengan konten lainnya.
Dalam artikel ini, kami akan memberikan panduan lengkap penggunaan tombol di website dengan mengoptimalkan penggunaan HTML dan CSS untuk platform Blogspot. Dengan mengikuti panduan ini, Anda dapat membuat tombol yang menarik, berinteraksi, dan berkinerja tinggi yang akan membantu Anda memperbaiki peringkat website Anda di mesin pencari Google.
Mengapa Tombol Penting dalam Desain Website Tombol adalah elemen yang sangat penting dalam desain website yang memiliki peran besar dalam mengarahkan pengguna untuk melakukan tindakan yang diinginkan. Tombol yang baik tidak hanya menarik secara visual, tetapi juga mudah digunakan dan berinteraksi. Tombol yang baik akan membantu meningkatkan konversi pengguna, mengarahkan pengguna ke halaman atau tindakan tertentu, dan memperbaiki navigasi website secara keseluruhan.
Menggunakan HTML dan CSS untuk Membuat Tombol yang Menarik
HTML dan CSS adalah bahasa pemrograman web yang digunakan untuk membuat tampilan dan interaksi dalam desain website. Dalam penggunaan tombol, HTML digunakan untuk membuat struktur dasar tombol, seperti tautan, teks, dan atribut lainnya, sementara CSS digunakan untuk mengatur tampilan visual dan interaksi tombol.
Menginstruksikan
Langkah 1: Tambahkan kode CSS berikut ke tema Anda biasanya di antara <head>...</head>.
< style >
.social-container { position :fixed; height : 50px ; width : 50px ; border-radius : 40px ; background-color : var (--widgetbg); bottom : 30px ; left : 30px ; box-shadow : 0 12px 25px 0 rgb (30 30 30 / 4%); transition : 0.3s ease, box-shadow 0.1s 0.3s ease; z-index :5 }
.social-check-label { z-index : 10 ; cursor :pointer; position :absolute; height : 50px ; width : 50px ; bottom : 0 ; left : 50% ; transform : translateX (-50%) rotate (0deg); border-radius : 100% ; transition : 0.3s ease}
.social-check-label :after , .social-check-label :before{ content : '' ; position :absolute; top : 50% ; left : 50% ; transform : translate (-50%,-50%); height : 4px ; width : 35% ; border-radius : 2px ; background-color : #7577a9 }
.social-check-label :after { transform : translate (-50%,-50%) rotate (90deg)}
.social-button { position:absolute; height : 45px ; width : 45px ; left : 50% ; transform : translate (-50%,-50%) scale (0.75); transition : 0.3s ease, opacity 0.1s ease; background-size :cover !important ; backface-visibility :hidden; opacity : 0 }
.social-button > span { z-index : 3 ; position :absolute; left:- 100% ; background : #fff ; border-radius : 100px ; top : 50% ; transform : translateY (-50%); white-space :nowrap; box-shadow : 0 12px 25px 0 rgb (30 30 30 / 4%); padding : 8.25px 15px ; pointer-events :none; -webkit-user-select :none; -moz-user-select :none; -ms-user-select :none; user-select :none; opacity: 0 ; transition :all 0.2s ease-in-out}
.social-button :hover > span { left : calc (100% + 18.25px); opacity : 1 }
.social-button .facebook { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/facebook-icon.png" ) no-repeat center}
.social-button .twitter { top : 169.5px ; background : url ("https://cdn.jsdelivr.net/gh/ngylduy/images/twitter-icon.png" ) no-repeat center}
.social-button .pinterest { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/pinterest-icon.png" ) no-repeat center}
.social-button .linkedin { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/linkedin-icon.png" ) no-repeat center}
#socialcheckbox { display :none}
#socialcheckbox :checked~ .social-container { height : 219.5px ; transition : 0.3s ease, box-shadow 0.1s ease}
#socialcheckbox :checked ~ .social-container > .social-button { opacity : 1 ; cursor :pointer}
#socialcheckbox :checked ~ .social-container > .social-button .facebook { top : 25px ; transition : 0.3s ease, opacity 0.33s 0.455sease, top 0.33s 0.405s cubic-bezier (0,0,0.5,1.6)}
#socialcheckbox :checked ~ .social-container > .social-button .twitter { top : 61.75px ; transition : 0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier (0,0,0.5,1.6)}
#socialcheckbox :checked ~ .social-container > .social-button .pinterest { top : 99.25px ; transition :0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier (0,0,0.5,1.6)}
#socialcheckbox :checked ~ .social-container > .social-button .linkedin { top : 137.25px ; transition : 0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier (0,0,0.5,1.6)}
#socialcheckbox :checked ~ .social-container > .social-check-label { transform: translateX (-50%) rotate (225deg)}
</ style >Langkah 2: Tambahkan HTML berikut sebelum tag penutup </body>
Jika Anda menggunakan tombol bagikan maka gunakan kode di bawah ini:
< input id = 'socialcheckbox' type = 'checkbox' />
< div class = 'social-container' >
< a class = 'social-button facebook' expr:href = '"https://www.facebook.com /sharer.php?u=" + data:view.url.canonical' rel = 'nofollow noopener' target = '_blank' > < span > Share to Facebook </ span > </ a >
< 'social-button twitter' expr:href = '"https://twitter.com/intent/tweet?url=" + data:view.url.canonical' rel = 'nofollow noopener' target = '_blank' > < span > Share to Twitter </ span > </ a >
< a class = 'social-button pinterest' expr:href = '"https://www.pinterest.com/pin/create/button/?url=" + data:view.url.canonical' rel = 'nofollow noopener' target = '> Share to Pinterset </ span > </ a >
< a class = 'social-button linkedin' expr:href = '"https://www.linkedin.com/sharing/share-offsite/?url=" ; + data:view.url.canonical' rel = 'nofollow noopener' target = '_blank' > < span > Share to Linkedin </ span > </ a >
< label class = 'social-check-label' for = '
div >Jika Anda menggunakan tombol media sosial pribadi, gunakan kode di bawah ini:
< input id = 'socialcheckbox' type = 'checkbox' />
< div class = 'social-container' >
< a class = 'social-button facebook' href = '#' rel = 'nofollow noopener' target = '_blank' > < span > Follow Facebook author </ span > </ a >
< a class = 'social-button twitter' href = '#' rel = 'nofollow noopener' target = '_blank' > < span > Follow Twitter author </ span > </ a >
< a class = 'social-button pinterest' href = '#' rel = 'nofollow noopener' target = '_blank' > < span > Author Pinterset Track </ span > </ a >
<a class = 'social-button linkedin' href = '#' rel = 'nofollow noopener' target = '_blank' > < span > Follow Linkedin author </ span > </ a >
< label class = 'social-check-label' for = 'socialcheckbox' / >
</ div >Tombol untuk informasi jejaring sosial pribadi, ingatlah untuk mengubah jalur di properti href!
Langkah 3: Simpan perubahan.
