Hello sobat Icloudzer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tombol switch bahasa di blogger
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Tombol switch bahasa
Tombol switch bahasa merupakan tombol untuk mengganti bahasa custom, semisal bahasa postingan anda adalah bahasa Indonesia maka untuk mengubah bahasa di perlukan tombol switch bahasa tersebut, namun yang admin tekankan di sini adalah admin hanya menjabarkan bagaimana cara membuat tampilan bahasa custom dengan menggunakan tombol switch di blogger, bukan membuat fitur translate atau penerjemah secara utuh karena hal tersebut memerlukan kode javascript untuk membuatnya
Menggunakan CSS
Untuk membuat tombol switch bahasa tersebut menggunakan kode CSS saja tanpa ada unsur penggunaan kode javascript di dalamnya, sehingga membuat tampilan semakin responsive dan ringan tentunya
Mode melayang
Tampilan dari tombol switch tersebut menggunakan mode mengambang atau fixed saat muncul, dan untuk memunculkan tampilan switch bahasa tersebut menggunakan sebuah tombol, admin telah menyediakan contoh tampilan nya di bawah
Contoh Tampilan
Jika kamu sudah penasaran dengan contoh tampilan dari tampilan switch bahasa di blogger atau switch translate di blogger silahkan klik tombol di bawah ini untuk memeriksa nya
Info: Bagaimana sobat dengan contoh tampilan nya keren sekai yak, haha
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjabarkan mengenai bagaimana kah caranya membuat tombol switch bahasa di blogger silahkan pelajari artikel ini hingga selesai agar tidak salah paham
Kode CSS
Langkah pertama seperti biasa silahkan salin kode CSS di bawah ini kemudian kamu bisa meletakkan nya di atas kode ]]></b:skin>
.rahLang:before{content:attr(data-text);padding-right:5px}
.rahLang-cnt{flex-wrap:wrap;margin:0;position:fixed;top:10px;right:0;font-size:13px;padding:10px 0;width:150px;background-color:#fefefe;color:#262d3d;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:all .1s ease;-webkit-transition:all .1s ease;opacity:0;visibility:hidden;z-index:99999999}
.rahLang-cnt:before{content:attr(data-text);padding:0 15px 10px;color:#767676;width:100%;font-size:11px;}
.rahLang-cnt > *{display:block;padding:9px 15px;width:100%}
.rahLang-cnt > *:before{content:attr(data-text)}
.rahLang-cnt span{background-color:#f1f1f0}
.rahLang-cnt a{color:#161617}
.rahLang-cnt + .fls{margin:0}
.rahLangIn:checked ~ .rahLang-cnt{top:15px;visibility:visible;opacity:1}
.rahLangIn:checked ~ .rahLang-cnt + .fls{visibility:visible;opacity:1}
.langEn{display:none}
.lang-en .rahLang:before{content:'En'}
.lang-en .langIn{display:none!important}
.lang-en .langEn{display:block}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya kamu bisa menyalin lagi kode HTML di bawah ini kemudian kamu bisa meletakkan nya di atas kode </body>
<input class="rahLangIn hidden" id="rahLang-cnt" type="checkbox"/>
<div class="rahLang-cnt" data-text="Change language">
<span data-text="Indonesia">
</span>
<a data-text="English" href="https://?hl=en">
</a>
</div>
<label class="fls lang" for="rahLang-cnt">
</label>Info: Fungsi dari kode HTML di atas adalah untuk menampilkan tampilan switch bahasa tersebut
Tombol Switch
Sedangakan untuk menampilkan tombol switch bahasa agar tampilan bahasa tersebut bisa muncul silahkan salin dan gunakan kode HTML di bawah ini
<label aria-label="In" class="rahLang" data-text="In" for="rahLang-cnt">
<svg class="line" viewbox="0 0 24 24">
<polyline points="6 9 12 15 18 9">
</polyline>
</svg>
</label>Info: Kamu bisa meletakkan nya sesuai keinginan mu saja, jika bingung silahkan letakkan di atas kode </header>