Cara Modifikasi Tampilan LinkMagz All Version di Widget Custom CSS

 

Bagi kalian yang lagi kelola blog atau mungkin yang sedang ingin mengubah tambilan template blog kalian menjadi lebih keren atau sesuai selera kalian bisa simak panduan berikut. Tetapi panduan berikut hanya untuk template LinkMaz, dan saya rasa kalau kalian mau modifikasi atau otak-atik tidak masalah, asalkan kalian mendapatkan template ini dengan membelinya secara legal di mas sugeng.

Tatacara modifikasi yang akan kita bahas disini sebenarnya sudah ada semua di pengaturan template yang ada di member area pada saat membeli template linkmagz ini dari mas sugeng. Mungkin bagi beberapa yang masih bingugun maka saya akan coba sedikit jelaskan agar mudah di pahami.

Sebenarnya untuk mengedit atau memodifikasi 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 kalian akan memasang template linkmagz versi terbaru.

Tentunya mungkin dari sebagian besar 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 kalian memasang template linkmagz versi terbaru kedepannya. Jadi kalian tidak perlu ribet edit-edit ulang setiap kali ada pembaruan.


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

Selebihnya tinggal disesuakan dengan keahlian dan kreativitas kalian memodifikasi.

Kode CSS di bawah ini kalian 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.


Setelah kalian mengetahui settinganya di atas. 

Kira-kira urutannya seperti ini 

#footer-content, #header-content, .navmenu, .menu-sticky, #footer-widget-html, #wrapper, #template-maxwidth {

    max-width: 1300px;

}

body {

    background: #FFFFFF;

}

#content-wrap, #content-wrap-produk-index, #navmenu-sidebar-body, #wrapper {

    background: #FFFFFF;

}

#sidebar-wrap {

    background: #FFFFFF;

}

.post-body a:link, .post-body a:visited {

    color: #000000;

}

#sidebar-wrap a:link, #sidebar-wrap a:visited {

    color: #000000;

}


Berikut ada beberapa referensi kode warna yang bisa kalian langsung gunakan.

Kalian tinggal memilih warna yang disukai lalu copy codenya untuk dipasang di susunan HTML

Kode Warna HTML Lengkap untuk Template

Kode warna dasar:

1. Putih: #FFFFFF

2. Hitam: #000000

3. Merah: #FF0000

4. Kuning: #FFFF00

5. Biru: #0000FF

6. Coklat : #D2691E

7. Hijau: #008000


Kode Warna Lengkap:

Kode Warna: #FFFAFA Nama Warna: Snow

Kode Warna: #00FF7F Nama Warna: Springgreen

Kode Warna: #4682B4 Nama Warna: Steelblue

Kode Warna: #D2B48C Nama Warna: Tan

Kode Warna: #008080 Nama Warna: Teal

Kode Warna: #D8BFD8 Nama Warna: Thistle

Kode Warna: #FF6347 Nama Warna: Tomato

Kode Warna: #F0F8FF Nama Warna: Aliceblue

Kode Warna: #FAEBD7 Nama Warna: Antiquewhite

Kode Warna: #00FFFF Nama Warna: Aqua

Kode Warna: #7FFFD4 Nama Warna: Aquamarine

Kode Warna: #F0FFFF Nama Warna: Azure

Kode Warna: #F5F5DC Nama Warna: Beige

Kode Warna: #FFE4C4 Nama Warna: Bisque

Kode Warna: #000000 Nama Warna: Black

Kode Warna: #FFEBCD Nama Warna: Blanchedalmond

Kode Warna: #0000FF Nama Warna: Blue

Kode Warna: #8A2BE2 Nama Warna: Blueviolet

Kode Warna: #A52A2A Nama Warna: Brown

Kode Warna: #DEB887 Nama Warna: Burlywood

Kode Warna: #5F9EAD Nama Warna: Cadetblue

Kode Warna: #7FFF00 Nama Warna: Chartreuse

Kode Warna: #D2691E Nama Warna: Chocolate

Kode Warna: #FF7F50 Nama Warna: Coral

Kode Warna: #64950 Nama Warna: Cornflowerblue

Kode Warna: #FFF8DC Nama Warna: Cornsilk

Kode Warna: #DC143C Nama Warna: Crimson

Kode Warna: #00FFFF Nama Warna: Cyan

Kode Warna: #00008B Nama Warna: Darkblue

Kode Warna: #008B8B Nama Warna: Darkcyan

Kode Warna: #B8860B Nama Warna: Darkgoldenrod

Kode Warna: #A9A9A9 Nama Warna: Darkgray

Kode Warna: #006400 Nama Warna: Darkgreen

Kode Warna: #8B008B Nama Warna: Darkmagenta

Kode Warna: #BDB76B Nama Warna: Darkkhaki

Kode Warna: #556B2F Nama Warna: Darkolivegreen

Kode Warna: #FF8C00 Nama Warna: Darkorange

Kode Warna: #9932CC Nama Warna: Darkorchid

Kode Warna: #8B0000 Nama Warna: Darkred

Kode Warna: #E9967A Nama Warna: Darksalmon

Kode Warna: #8FBC8B Nama Warna: Darkseagreen

Kode Warna: #483D8B Nama Warna: Darkslateblue

Kode Warna: #2F4F4F Nama Warna: Darkslategray

Kode Warna: #00CED1 Nama Warna: Darkturquoise

Kode Warna: #9400D3 Nama Warna: Darkviolet

Kode Warna: #FF1493 Nama Warna: Deeppink

Kode Warna: #00BFFF Nama Warna: Deepskyblue

Kode Warna: #696969 Nama Warna: Dimgray

Kode Warna: #1E90FF Nama Warna: Dodgerblue

Kode Warna: #B22222 Nama Warna: Firebrick

Kode Warna: #FFFAF0 Nama Warna: Floralwhite

Kode Warna: #228B22 Nama Warna: Forestgreen

Kode Warna: #FF00FF Nama Warna: Fuchsia

Kode Warna: #DCDCDC Nama Warna: Gainsboro

Kode Warna: #F8F8FF Nama Warna: Ghostwhite

ode Warna: #FFD700 Nama Warna: Gold

Kode Warna: #DAA520 Nama Warna: Goldenrod

Kode Warna: #808080 Nama Warna: Gray

Kode Warna: #008000 Nama Warna: Green

Kode Warna: #ADFF2F Nama Warna: Greenyellow

Kode Warna: #F0FFF0 Nama Warna: Honeydew

Kode Warna: #FF69B4 Nama Warna: Hotpink

Kode Warna: #CD5C5C Nama Warna: Indianred

Kode Warna: #4B0082 Nama Warna: Indigo

Kode Warna: #FFFFF0 Nama Warna: Ivory

Kode Warna: #F0E68C Nama Warna: Khaki

Kode Warna: #E6E6FA Nama Warna: Lavender

Kode Warna: #FFF0F5 Nama Warna: Lavenderblush

Kode Warna: #7CFC00 Nama Warna: Lawngreen

Kode Warna: #FFFACD Nama Warna: Lemonchiffon

Kode Warna: #ADE8E6 Nama Warna: Lightblue

Kode Warna: #F08080 Nama Warna: Lightcoral

Kode Warna: #E0FFFF Nama Warna: Lightcyan

Kode Warna: #FAFAD2 Nama Warna: Lightgoldenrodyellow

Kode Warna: #90EE90 Nama Warna: Lightgreen

Kode Warna: #D3D3D3 Nama Warna: Lightgray

Kode Warna: #FFB6C1 Nama Warna: Lightpink

Kode Warna: #FFA072 Nama Warna: Lightsalmon

Kode Warna: #20B2AA Nama Warna: Lightseagreen

Kode Warna: #87CEFA Nama Warna: Lightskyblue

Kode Warna: #778899 Nama Warna: Lightslategray

Kode Warna: #B0C4DE Nama Warna: Lightsteelblue

Kode Warna: #FFFFE0 Nama Warna: Lightyellow

Kode Warna: #00FF00 Nama Warna:  Lime

Kode Warna: #32CD32 Nama Warna: Limegreen

Kode Warna: #FAF0E6 Nama Warna: Linen

Kode Warna: #FF00FF Nama Warna: Magenta

Kode Warna: #800000 Nama Warna: Maroon

Kode Warna: #66CDAA Nama Warna: Mediumaquamarine

Kode Warna: #0000CD Nama Warna: Mediumblue

Kode Warna: #BA55D3 Nama Warna: Mediumorchid

Kode Warna: #9370DB Nama Warna: Mediumpurple

Kode Warna: #3CB371 Nama Warna: Mediumseagreen

Kode Warna: #7B68EE Nama Warna: Mediumslateblue

Kode Warna: #00FA9A Nama Warna: Mediumspringgreen

Kode Warna: #48D1CC Nama Warna: Mediumturquoise

Kode Warna: #C71585 Nama Warna: Mediumvioletred

Kode Warna: #191970 Nama Warna: Midnightblue

Kode Warna: #F5FFFA Nama Warna: Mintcream

Kode Warna: #FFE4E1 Nama Warna: Mistyrose

Kode Warna: #FFE4E1 Nama Warna: Moccasin

Kode Warna: #FFDEAD Nama Warna: Navajowhite

Kode Warna: #000080 Nama Warna: Navy

Kode Warna: #FDF5E6 Nama Warna: Oldlace

Kode Warna: #808000 Nama Warna: Olive

Kode Warna: #6B8E23 Nama Warna: Olivedrab

Kode Warna: #FFA500 Nama Warna: Orange

Kode Warna: #FF1000 Nama Warna: Orangered

Kode Warna: #DA70D6 Nama Warna: Orchid

Kode Warna: #EEE8AA Nama Warna: Palegoldenrod

Kode Warna: #98FB98 Nama Warna: Palgreen

Kode Warna: #AFEEEE Nama Warna: Paleturquoise

Kode Warna: #DB7093 Nama Warna: Palevioletred

Kode Warna: #FFEFD5 Nama Warna: Papayawhip

Kode Warna: #FFDAB9 Nama Warna: Peachpuff

Kode Warna: #CD853F Nama Warna: Peru

Kode Warna: #FFC0CB Nama Warna: Pink

Kode Warna: #DDA0DD Nama Warna: Plum

Kode Warna: #B0E0E6 Nama Warna: Powderblue

Kode Warna: #800080 Nama Warna: Purple

Kode Warna: #FF0000 Nama Warna: Red

Kode Warna: #BC8F8F Nama Warna: Rosybrown

Kode Warna: #4169E1 Nama Warna: Royalblue

Kode Warna: #8B4513 Nama Warna: Saddlebrown

Kode Warna: #FA8072 Nama Warna: Salmon

Kode Warna: #F4A460 Nama Warna: Sandybrown

Kode Warna: #2E8B57 Nama Warna: Seagreen

Kode Warna: #FFF5EE Nama Warna: Seashell

Kode Warna: #A0522D Nama Warna: Sienna

Kode Warna: #C0C0C0 Nama Warna: Silver

Kode Warna: #87CEEB Nama Warna: Skyblue

Kode Warna: #708090 Nama Warna: Slategray

Kode Warna: #40E0D0 Nama Warna: Turquoise

Kode Warna: #EE82EE Nama Warna: Violet

Kode Warna: #F5DEB3 Nama Warna: Wheat

Kode Warna: #FFFFFF Nama Warna: White

Kode Warna: #F5F5F5 Nama Warna: Whitesmoke

Kode Warna: #FFFF00 Nama Warna: Yellow

Kode Warna: #9ACD32 Nama Warna: Yellowgreen

Artikel ini hanya sekedar contoh, atau mengulang kembali yang sudah ada di pengaturan template yang telah disediakan oleh mas sugeng. 


Source; 

https://sugeng.id/panduan/cara-modifikasi-tampilan-linkmagz-via-widget-custom-css/

Posting Komentar

© IMAGINATOR ID. All rights reserved. Developed by Jago Desain