MultiLipi offers 20+ built-in language switcher templates to get you started quickly. However, if you want your language toggle to perfectly match your brand's unique aesthetic, you can use our CSS Kustom untuk mengganti gaya default.
Di Editor Pengalih Anda, cukup klik ikon Edit CSS 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 tempel 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 "riasan dan pakaian" untuk situs web Anda. Dengan CSS Kustom, Anda dapat mengubah warna, bentuk, animasi, bayangan, dan lainnya—tanpa menyentuh kode rumit apa pun.
Konsistensi Merek
Cocokkan warna, font, dan pedoman gaya merek Anda yang tepat
Menonjol
Buat desain unik yang membedakan Anda dari pesaing
Tidak Diperlukan Pengembang
Salin dan tempel kode siap pakai—tidak memerlukan keterampilan pengkodean
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 arahkan 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.
Sesuaikan (Opsional)
Sesuaikan warna, ukuran, atau font agar sesuai dengan merek Anda. Kami akan menjelaskan penyesuaian umum di bawah ini.
Simpan & Pratinjau
Klik "Simpan Perubahan" dan pratinjau pengalih Anda 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"
Getaran: Pemicu dropdown klasik yang padat informasi yang dirancang untuk membangun kepercayaan. Ini menggunakan batas yang bersih, bayangan lembut, dan interaksi hover yang halus untuk terasa kokoh dan profesional.
✨ Terbaik untuk: Situs perusahaan, SaaS B2B, Keuangan, dan Perawatan 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
Getaran: Desain minimalis yang berpusat pada teks menggunakan tipografi serif yang elegan dan batas nol. Ini mengandalkan garis bawah yang lembut dan animasi untuk menunjukkan interaktivitas tanpa mengganggu estetika situs.
✨ Terbaik untuk: Fashion tinggi, merek mewah, majalah editorial, dan portofolio butik
/* Remove all background containers */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Style the text buttons */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Muted grey */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* The Animated Underline */
.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. "Pulau Dinamis"
Getaran: Desain yang mengutamakan seluler yang menata sakelar sebagai pil ramping, menyoroti bahasa aktif dengan efek morphing latar belakang biru lembut.
✨ Terbaik 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. "Terminal Teknologi Gelap"
Getaran: Terinspirasi oleh alat pengembang dan platform Web3. Ini menggunakan tema gelap kontras tinggi, tata letak font monospace-hybrid yang ramping, dan cahaya biru elektrik yang halus saat melayang.
✨ 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" (CSS Hack)
Getaran: Terinspirasi oleh merek global besar. Peretasan CSS yang brilian ini memaksa dropdown standar untuk dilepas dan diperluas menjadi overlay buram layar penuh dengan kartu bahasa terpusat.
✨ Terbaik untuk: Perusahaan global, e-commerce besar-besaran, rangkaian perangkat lunak yang kompleks
/* 1. Style the main trigger button */
.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. THE HACK: Turn the dropdown into a full-screen overlay */
.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;
/* Center the items in the middle of the screen */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Remove default dropdown styling */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Style the individual language items as large modal cards */
.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;
}
/* Hover state for the modal cards */
.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 mengubah desain ini agar sesuai dengan merek Anda dengan sempurna? Berikut adalah penyesuaian paling umum yang dapat Anda lakukan:
🎨 Mengubah Warna
Cari kode warna seperti #3B82F6 atau rgba(59, 130, 246, 0.5) . Ganti ini dengan warna merek Anda.
Contoh: Perubahan latar belakang: #3B82F6; ke latar belakang: #FF6B6B; (warna merek Anda)
📏 Menyesuaikan Ukuran
Perubahan Bantalan , ukuran font atau jari-batas untuk membuat tombol lebih besar atau lebih kecil.
Contoh: bantalan: 8px 16px; → bantalan: 12px 24px; (tombol lebih besar)
✍️ Mengubah Font
Memperbarui font-family agar sesuai dengan tipografi situs web Anda.
Contoh: font-family: 'Inter'; → font-family: 'Roboto';
Praktik Terbaik & Tips Pengoptimalan
Uji di Perangkat Seluler
Selalu pratinjau pengalih khusus 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 (bertujuan untuk rasio 4,5:1) untuk pengguna dengan gangguan penglihatan.
Jaga Animasi Tetap Halus
Animasi mencolok dapat mengalihkan perhatian pengguna. Tetap berpegang pada transisi yang mulus di bawah 0,3 detik.
Hindari Mengesampingkan Fungsionalitas Inti
Jangan menyembunyikan pengalih sepenuhnya atau membuatnya tidak dapat diklik. Pengguna perlu mengaksesnya dengan mudah.
Cocokkan Tema Situs Web Anda
Pilih desain yang melengkapi desain situs Anda yang ada. Jangan membuatnya menonjol dengan 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 browser yang berbeda (Chrome, Safari, Firefox)
Menyalin CSS dari sumber yang tidak tepercaya—selalu gunakan templat resmi
Tidak menyimpan cadangan sebelum membuat perubahan besar
Dampak Kinerja
Semua desain CSS ini adalah sangat ringan dan tidak akan memperlambat situs web Anda. CSS dirender secara instan oleh browser, dan gaya ini menambahkan kurang dari 2 KB ke ukuran halaman Anda.
Sebagai referensi, 2KB adalah kira-kira ukuran satu emoji. Kecepatan situs web dan peringkat SEO Anda tidak akan terpengaruh. ✨
Nota: Cuplikan ini menargetkan default .ml-switcher-container dan .ml-switcher-btn kelas. Sesuaikan nama kelas jika Anda menggunakan templat dasar yang sangat berbeda.