MultiLipi menawarkan 20+ templat pengalih bahasa bawaan untuk memulai dengan cepat. Namun, jika Anda ingin pengalih bahasa Anda cocok dengan estetika unik merek Anda, Anda dapat menggunakan CSS Kustom fitur kami untuk mengganti gaya default.
Di Editor Pengalih Anda, cukup klik Edit CSS tombol di bagian atas layar dan tempelkan kode Anda.
Untuk membantu Anda mendapatkan inspirasi, tim desain kami telah membuat 5 templat CSS premium. Cukup salin cuplikan kode di bawah ini dan tempelkan ke editor CSS Kustom Anda!
Apa itu CSS Kustom dan Mengapa Anda Harus Menggunakannya?
CSS (Cascading Style Sheets) adalah bahasa desain yang mengontrol tampilan situs web. Anggap saja sebagai "rias wajah dan pakaian" untuk situs web Anda. Dengan CSS Kustom, Anda dapat mengubah warna, bentuk, animasi, bayangan, dan lainnya—tanpa menyentuh kode yang rumit.
Konsistensi Merek
Sesuaikan warna, font, dan panduan gaya merek Anda secara tepat
Tampil Menonjol
Buat desain unik yang membedakan Anda dari pesaing
Tidak Perlu Pengembang
Salin dan tempel kode siap pakai—tidak perlu keahlian coding
Ramah SEO
Semua desain dioptimalkan untuk kinerja dan aksesibilitas
Cara Menerapkan Desain Ini (Langkah demi Langkah)
Buka Editor Pengalih Anda
Masuk ke dasbor MultiLipi Anda dan navigasikan ke pengaturan Pengalih Bahasa Anda.
Klik Tombol " Edit CSS"
Cari tombol CSS Kustom di bagian atas antarmuka Editor Pengalih Anda.
Salin Desain Pilihan Anda
Gulir ke bawah ke templat desain di bawah ini dan klik tombol "Salin Kode" pada gaya favorit Anda.
Tempel Kode
Tempelkan kode CSS yang disalin ke panel editor CSS Kustom.
Kustomisasi (Opsional)
Sesuaikan warna, ukuran, atau font agar sesuai dengan merek Anda. Kami akan menjelaskan kustomisasi umum di bawah ini.
Simpan & Pratinjau
Klik "Simpan Perubahan" dan pratinjau pengalih Anda secara langsung di situs web Anda!
5 Templat Desain Premium
Klik "Salin Kode" untuk langsung mengambil CSS. Cuplikan ini menargetkan default .ml-switcher-container dan .ml-switcher-btn kelas.
1. "Pil Perusahaan"
Suasana: Pemicu dropdown klasik yang padat informasi, dirancang untuk membangun kepercayaan. Menggunakan garis batas yang bersih, bayangan lembut, dan interaksi hover halus untuk terasa kokoh dan profesional.
✨ Paling cocok untuk: Situs perusahaan, SaaS B2B, Keuangan, dan Layanan Kesehatan
/* Style the main toggle button */
.ml-switcher-container {
background-color: #ffffff !important;
border-radius: 50px !important;
padding: 8px 16px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.ml-switcher-container:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
border-color: #cbd5e1 !important;
}
/* Style the dropdown menu */
.ml-switcher-dropdown {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 6px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
/* Style the individual language items */
.ml-switcher-dropdown-item {
border-radius: 8px !important;
color: #475569 !important;
font-family: 'Inter', sans-serif !important;
transition: background 0.2s, color 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: #f8fafc !important;
color: #0f172a !important;
}2. Teks Editorial" Sebaris
Suasana: Desain minimalis yang berpusat pada teks menggunakan tipografi serif yang elegan dan tanpa garis batas. Mengandalkan garis bawah animasi yang lembut untuk menunjukkan interaktivitas tanpa mengganggu estetika situs.
✨ Paling cocok untuk: Mode kelas atas, merek mewah, majalah editorial, dan portofolio butik
/* Hapus semua wadah latar belakang */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Gaya tombol teks */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Abu-abu redup */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* Garis Bawah Animasi */
.ml-switcher-btn::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background-color: #000000 !important;
transition: width 0.3s ease-in-out !important;
}
.ml-switcher-btn:hover {
color: #000000 !important;
}
.ml-switcher-btn:hover::after {
width: 100% !important;
}3. "Dynamic Island"
Suasana: Desain mobile-first yang menata pengalih sebagai pil ramping, menyoroti bahasa aktif dengan efek perubahan latar belakang biru lembut.
✨ Paling cocok untuk: Startup teknologi modern, aplikasi konsumen, dan halaman arahan minimalis
/* Style the main container wrapper */
.ml-switcher-container {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 50px !important;
padding: 4px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}
/* Style the individual pill buttons */
.ml-switcher-btn {
color: #64748b !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
border-radius: 50px !important;
transition: all 0.2s !important;
}
.ml-switcher-btn:hover {
background: #f8fafc !important;
color: #0f172a !important;
}
/* Active Language State */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. "Dark Tech Terminal"
Suasana: Terinspirasi oleh alat pengembang dan platform Web3. Menggunakan tema gelap kontras tinggi, tata letak font hibrida monospace yang ramping, dan cahaya biru elektrik halus saat diarahkan.
✨ Terbaik untuk: Dokumentasi pengembang, proyek Web3, platform kripto, dan SaaS mode gelap
/* Style the main toggle button */
.ml-switcher-container {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 8px 16px !important;
color: #9ca3af !important;
font-family: 'Space Mono', monospace !important;
transition: all 0.3s ease !important;
}
.ml-switcher-container:hover {
border-color: #3b82f6 !important;
color: #f3f4f6 !important;
}
/* Style the dropdown menu */
.ml-switcher-dropdown {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 6px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
/* Style the individual language items */
.ml-switcher-dropdown-item {
border-radius: 4px !important;
color: #6b7280 !important;
font-family: 'Space Mono', monospace !important;
font-size: 12px !important;
transition: all 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: rgba(59, 130, 246, 0.1) !important;
color: #e5e7eb !important;
}5. Modal "Fokus Terpusat" (Peretasan CSS)
Suasana: Terinspirasi oleh merek global besar. Peretasan CSS yang brilian ini memaksa dropdown standar untuk terlepas dan meluas menjadi overlay layar penuh yang buram dengan kartu bahasa yang terpusat.
✨ Terbaik untuk: Perusahaan global, e-niaga besar, rangkaian perangkat lunak kompleks
/* 1. Gaya tombol pemicu utama */
.ml-switcher-container {
background: #ffffff !important;
border: 1px solid #d1d5db !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
color: #374151 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.ml-switcher-container:hover {
background: #f9fafb !important;
}
/* 2. HACK: Ubah dropdown menjadi overlay layar penuh */
.ml-switcher-dropdown {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
/* Pusatkan item di tengah layar */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Hapus gaya dropdown default */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Gaya item bahasa individual sebagai kartu modal besar */
.ml-switcher-dropdown-item {
background: #ffffff !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
padding: 16px 24px !important;
margin: 6px 0 !important;
width: 90% !important;
max-width: 400px !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #111827 !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
transition: all 0.2s ease !important;
}
/* Status hover untuk kartu modal */
.ml-switcher-dropdown-item:hover {
border-color: #3b82f6 !important;
color: #2563eb !important;
transform: translateY(-2px) !important;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.15) !important;
}Panduan Kustomisasi Mudah (Untuk Pengguna Non-Teknis)
Ingin menyesuaikan desain ini agar sesuai dengan merek Anda dengan sempurna? Berikut adalah kustomisasi paling umum yang dapat Anda lakukan:
🎨 Mengubah Warna
Cari kode warna seperti #3B82F6 or rgba(59, 130, 246, 0.5). Ganti ini dengan warna merek Anda.
Contoh: Ubah background: #3B82F6; to background: #FF6B6B; (warna merek Anda)
📏 Menyesuaikan Ukuran
Ubah padding, ukuran-font, atau radius-batas nilai untuk membuat tombol lebih besar atau lebih kecil.
Contoh: padding: 8px 16px; → padding: 12px 24px; (tombol lebih besar)
✍️ Mengubah Font
Perbarui keluarga-font agar sesuai dengan tipografi situs web Anda.
Contoh: font-family: 'Inter'; → font-family: 'Roboto';
Praktik Terbaik & Tips Optimalisasi
Uji di Perangkat Seluler
Selalu pratinjau pengalih kustom Anda di ponsel dan tablet. Lebih dari 60% lalu lintas web global adalah seluler.
Gunakan Kontras Tinggi untuk Aksesibilitas
Pastikan teks dan latar belakang memiliki kontras warna yang cukup (targetkan rasio 4,5:1) untuk pengguna dengan gangguan penglihatan.
Jaga Animasi Tetap Halus
Animasi yang mencolok dapat mengganggu pengguna. Gunakan transisi mulus di bawah 0,3 detik.
Hindari Mengganti Fungsionalitas Inti
Jangan sembunyikan pengalih sepenuhnya atau membuatnya tidak dapat diklik. Pengguna perlu mengaksesnya dengan mudah.
Sesuaikan dengan Tema Situs Web Anda
Pilih desain yang melengkapi desain situs Anda yang sudah ada. Jangan membuatnya menonjol secara canggung.
Kesalahan Umum yang Harus Dihindari
Menggunakan terlalu banyak animasi sekaligus—ini memperlambat situs Anda
Mengatur ukuran font di bawah 12px—pengguna tidak dapat membaca teks kecil
Lupa menguji di berbagai peramban (Chrome, Safari, Firefox)
Menyalin CSS dari sumber yang tidak tepercaya—selalu gunakan templat resmi
Tidak menyimpan cadangan sebelum melakukan perubahan besar
Dampak Kinerja
Semua desain CSS ini adalah sangat ringan dan tidak akan memperlambat situs web Anda. CSS dirender secara instan oleh peramban, dan gaya ini menambah kurang dari 2KB pada ukuran halaman Anda.
Sebagai referensi, 2KB kira-kira seukuran satu emoji. Kecepatan situs web dan peringkat SEO Anda akan tetap tidak terpengaruh. ✨
Catatan: Cuplikan ini menargetkan .ml-switcher-container dan .ml-switcher-btn kelas default. Sesuaikan nama kelas jika Anda menggunakan templat dasar yang sangat berbeda.