Cara Modifikasi Tampilan LinkMagz

Daftar Isi

1 Kode CSS Tampilan LinkMagz
2 Contoh penerapan:

Untuk mengedit tampilan linkmagz sebenarnya bisa dilakukan dengan mudah melalui menu desainer tema blogger.

Melalui menu tersebut sobat bisa mengubah warna dan background template tanpa harus menyentuh kode apapaun.

Kelemahan dari menggunakan metode tersebut adalah ketika template linkmagz ada pembaruan. Perubahan-perubahan yang dilakukan di menu desainer tema blogger akan kembali seperti semula ketika sobat memasang template linkmagz versi terbaru.

Tentunya sebagian besar dari sobat pengguna linkmagz tidak ingin ribet harus edit ulang setiap kali memasang template linkmagz versi terbaru.

Sebagai solusi untuk permasalahan tersebut, pada template linkmagz versi 2.1 ke atas sudah disediakan widget Custom CSS.

Pada widget Custom CSS tersebut sobat bisa meletakan kode CSS sendiri untuk mengubah tampilan template linkmagz.

Kode CSS yang diletakan di widget tersebut tidak akan hilang ketika sobat memasang template linkmagz versi terbaru kedepannya. Jadi sobat tidak perlu ribet edit-edit ulang setiap kali ada pembaruan.

Kode CSS Tampilan LinkMagz

Di bawah ini beberapa kode CSS dasar yang bisa digunakan untuk mengubah tempilan template linkmagz.

Selebihnya tinggal disesuakan dengan keahlian dan kreativitas sobat.

Kode CSS di bawah ini sobat letakan di bagian konten widget Costum CSS tanpa harus menambahkan tag <style>.

1. Kode CSS mengganti font blog:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
body { 
font-family: "Open Sans", arial, sans-serif;
}

Tinggal ubah URL font dan nama Font-nya.

2. Kode CSS mengubah lebar template versi desktop:

#footer-content, #header-content, .navmenu, .menu-sticky, #footer-widget-html, #wrapper, #template-maxwidth {
    max-width: 1200px;
}

Ubah 1200px sesuai keinginan.

3. Kode CSS mengubah warna background body:

body {
    background: #DDDDDD;
}

Ubah #DDDDDD dengan kode warna sesuai keinginan.

4. Kode CSS mengubah warna background postingan:

#content-wrap, #content-wrap-produk-index, #navmenu-sidebar-body, #wrapper {
    background: #EEEEEE;
}

Ubah #EEEEEE dengan kode warna sesuai keinginan.

5. Kode CSS mengubah warna background sidebar:

#sidebar-wrap {
    background: #CCCCCC;
}

Ubah #CCCCCC dengan kode warna sesuai keinginan.

6. Kode CSS mengubah warna link postingan:

.post-body a:link, .post-body a:visited {
    color: #0000ff;
}

Ubah #0000FF dengan kode warna sesuai keinginan.

7. Kode CSS mengubah warna link sidebar:

#sidebar-wrap a:link, #sidebar-wrap a:visited {
    color: #0000ff;
}

Ubah #0000FF dengan kode warna sesuai keinginan.

Contoh penerapan: