Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Membuat tombol switch Lang bahasa di blogger

views

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>

Keindahanmu akan kuabadikan disetiap karyaku.

1 komentar

  1. Casino 정카지노 and Hotel Maryland had been among the casinos to have sportsbooks open on their grounds. Legislation to legalize online sports betting handed in May 2022, but a launch date has not been set but. Just three weeks after legal online sports betting launched, a judge ruled that an agreement between the state of Florida and the Seminole Tribe was unlawful and the difficulty has been tied up in Federal court docket ever since.
Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
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.