Cara Mengubah Ukuran Logo pada Website

Logo adalah sebuah tanda, simbol atau lambang yang memiliki makna tertentu dan digunakan untuk identitas seperti organisasi, produk, perusahaan. Terdapat berbagai macam ukuran logo baik yang ukuran rasio 1:1, 1:3, landscape, dll.

Pada panduan bagian ini, akan dipaparkan cara mengatur Ukuran Logo pada komponen Logo Utama di website

A. Mengakses Custom CSS

1. Pada modul “Manajemen Administrasi” > pilih fitur “Data Master & Pengaturan” > pilih fitur “Desain & Tampilan”

2. pilih fitur “Tampilan Halaman Utama” 

3. Pilih fitur “Theme Builder”

Kemudian akan menampilkan tampilan dari themebuilder website

4. Pastikan logo utama sudah tampil pada website

5. Akses domain website dengan membuka tab baru pada browser

6. Pindahkan posisi cursor mouse ke logo > klik kanan pada logo > klik "inspect"

Keterangan :

• Inspect : berfungsi untuk menampilan kode berupa HTML/CSS yang menjadi penyusun banyak komponen pada website

Kemudian akan menampilkan halaman seperti berikut

• Panel sisi Atas : Menampilkan kode HTML dari website

• Panel sisi Bawah : Menampilkan kode CSS dari website

7. Atur Ukuran Logo

Untuk mengatur ukuran logo cukup dengan mengganti nilai piksel dari kode CSS seperti di bawah

Terdapat kode CSS seperti berikut

#Navbar-section .logo img {

max-height: 55px;

}

Ubah angka "55px" menjadi berapapun untuk preview. Semakin tinggi angka, maka semakin besar ukuran logo. Lalu salin kode berikut 

#Navbar-section .logo img

8. Kembali ke tab halaman "Themebuilder" > klik "Pengaturan lanjut"

9. Klik menu "Custom CSS"

Lalu akan menampilkan tampilan seperti berikut

Tekan tombol "Ctrl + f" pada keyboard jika menggunakan windows, tekan tombol "Command + f" jika menggunakan macbook. Lalu akan menampilkan seperti berikut

Kemudian paste kan kode yang sudah dicopy dengan menekan tombol "Ctrl + v" . Maka akan menjadi seperti berikut

Ubah nilai angka pada bagian berikut untuk mengatur ukuran logo akan ditampilkan di website

Jika sudah selesai dapat langsung klik "Simpan"

Lalu terapkan tampilan dengan klik tombol berikut