Cara Mengubah Tampilan Dasar di Median UI v1.5

Cara Mengubah Tampilan Dasar di Median UI v1.5 - Median UI akhirnya hadir dalam versi 1.5 dengan berbagai macam perbaikan serta penambahan fitur. Hal tersebut dilakukan dengan berbagai macam pertimbangan dengan tuntutan penggunanya.

Walaupun dari segi struktur masih tetap sama dengan tampilan sebelumnya, namun updatean kali ini bisa dikatakan lebih elegan dan tampak lebih dinamis.

Selain kelebihan tersebut, masih banyak lagi fitur dan layanan yang disediakan pada email pembelian. Salah satu fitur tersebut adalah disediakannya dua layout tambahan.

Rekomendasi: 2 Cara Memasang Anti AdBlock di Blog

CSS Style Median UI v1.5

Style 2

.Style-2{transition:var(--transition-1)}
.Style-2,.Style-2 header,.Style-2 .mainMenu,.Style-2 .htmlMenu .close,.Style-2 #LinkList002{background:#fafafc;border:0}
.Style-2 .htmlMenu .close,.Style-2 #LinkList002{width:calc(var(--nav-width))}
.Style-2 .mainInner:before{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#fefefe;z-index:-1;border-radius:15px 0 0 15px;transition:var(--transition-1);box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)}
.Style-2 .htmlMenu .link,.Style-2 .htmlMenu>li li a{width:calc(100% - 20px);border-radius:0 20px 20px 0; padding-right:0}
.Style-2 .navInput:checked~.mainWrapper .htmlMenu .link,.Style-2 .navInput:checked~.mainWrapper .htmlMenu>li li a{}
.Style-2.darkMode .mainInner:before,.Style-2.darkMode .postRelated h3,.Style-2.darkMode .postRelated h4,.Style-2.darkMode .postRelated b,.Style-2.darkMode .post .tabsHead>*:after,.Style-2.darkMode .tableOfContainer,.Style-2.darkMode .tableOfHeader{background:var(--dark-bgSec)}
.Style-2.darkMode .downloadInfo,.Style-2.darkMode .postAuthors{background:var(--dark-bgAlt)}
@media screen and (max-width:896px){
.Style-2 .mainInner:before,.darkMode.Style-2 .mainInner:before{background:transparent;box-shadow:none}
.Style-2 .htmlMenu .close,.Style-2 #LinkList002{background:var(--nav-bg)}
.Style-2.darkMode .postRelated h3,.Style-2.darkMode .postRelated h4,.Style-2.darkMode .postRelated b,.Style-2.darkMode .post .tabsHead>*:after{background:var(--dark-bg)}
.Style-2.darkMode .downloadInfo,.Style-2.darkMode .postAuthors{background:var(--dark-bgSec)}
}

Untuk style kedua ini, bagian header, menu navigasi, dan footer akan tampak menyatu dengan warna latar belakang abu-abu. Selain itu, bagian utama tulisan akan diberikan efek berupa lengkungan pada bagian kiri atas dan kiri bawah.

Demo

Style 3

.Style-3,.Style-3 .headerDiv{transition:var(--transition-1)}
.Style-3 header,.Style-3.darkMode header{background:transparent;border:0}
.Style-3 .mainMenu,.Style-3 .htmlMenu .close,.Style-3 #LinkList002{background:#fafafc}
.Style-3 .htmlMenu .close>*{opacity:0;visibility:hidden}
.Style-3 .htmlMenu .link,.Style-3 .htmlMenu>li li a{width:calc(100% - 20px);border-radius:0 20px 20px 0;padding-right:0}
.Style-3.darkMode,.Style-3.darkMode .headerRight,.Style-3.darkMode .tableOfContainer,.Style-3.darkMode .tableOfHeader,.Style-3.darkMode .postRelated h3,.Style-3.darkMode .postRelated h4,.Style-3.darkMode .postRelated b,.Style-3.darkMode .post .tabsHead>*:after{background:var(--dark-bgSec)}
.Style-3.darkMode .downloadInfo,.Style-3.darkMode .postAuthors{background:var(--dark-bgAlt)}
.Style-3 .headerRight{background:var(--body-bg)}
.Style-3 .navInput:checked~.mainWrapper #header-widget{display:none}
.Style-3 .navInput:checked~.mainWrapper .headerLeft{width:68px}
@media screen and (max-width:896px){
.Style-3 .navInput:checked~.mainWrapper #header-widget{display:block}
.Style-3 .navInput:checked~.mainWrapper .headerLeft{width:var(--nav-width)}
.Style-3.darkMode,.Style-3.darkMode .headerRight{background:var(--dark-bg)}
.Style-3.darkMode .postRelated h3,.Style-3.darkMode .postRelated h4,.Style-3.darkMode .postRelated b,.Style-3.darkMode .post .tabsHead>*:after{background:var(--dark-bg)}
.Style-3.darkMode .downloadInfo,.Style-3.darkMode .postAuthors{background:var(--dark-bg)}
}

Untuk style ketiga ini, tidak banyak perubahan yang terjadi. Menu navigasi akan dibuat lebih menonjol dengan warna latar belakang abu-abu dan sedikit garis tepi. Selain itu, bagian header dibuat agar tampak lebih menyatu dengan bagian utama tulisan.

Demo

Rekomendasi: 3 Cara Mengatasi Bom Klik Iklan AdSense di Blog

Cara Mengubah Tampilan Dasar di Median UI v1.5

Untuk mengubah tampilan halaman, Anda hanya perlu menambahkan CSS yang telah disediakan oleh desainer di email pembelian template. Namun jika email yang digunakan tersebut bermasalah, maka Anda bisa menggunakan skrip yang telah saya sediakan di atas.

• Masuk ke BLOGGER
• Pilih menu TEMA
• Pilih EDIT HTML
• Tempel CSS yang disediakan di atas /*]]>*/</style>
• Cari dan ubah <body class='' id='mainContent'> dengan menambahkan Style-2 atau Style-3:

<body class='Style-2' id='mainContent'> / <body class='Style-3' id='mainContent'>

• Pilih SIMPAN
• Selesai.

Rekomendasi: Apa itu JV AdSense? Jangan Salah Paham

Penutup

Nah itulah cara memasang layout tambahan pada template Median UI terbaru. Mudah sekali bukan? Bagusnya lagi, skrip yang digunakan hanya berupa CSS, jadi tidak perlu cemas akan kecepatan.

Cukup sekian artikel tentang Cara Mengubah Tampilan Dasar di Median UI v1.5 ini, Terima kasih.

Referensi:
Muhammad Maki / Google Drive