Cara Mengubah Tampilan Dasar di Median UI v1.5
Layout Tambahan Median UI - 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 update-an 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-color:#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-color:#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-color:var(--dark-bgSec)}
.Style-2.darkMode .downloadInfo,.Style-2.darkMode .postAuthors{background-color:var(--dark-bgAlt)}
@media screen and (max-width:896px){
.Style-2 .mainInner:before,.darkMode.Style-2 .mainInner:before{background-color:transparent;box-shadow:none}
.Style-2 .htmlMenu .close,.Style-2 #LinkList002{background-color: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-color:var(--dark-bg)}
.Style-2.darkMode .downloadInfo,.Style-2.darkMode .postAuthors{background-color: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.
Style 3
.Style-3,.Style-3 .headerDiv{transition:var(--transition-1)}
.Style-3 header,.Style-3.darkMode header{background-color:transparent;border:0}
.Style-3 .mainMenu,.Style-3 .htmlMenu .close,.Style-3 #LinkList002{background-color:#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-color:var(--dark-bgSec)}
.Style-3.darkMode .downloadInfo,.Style-3.darkMode .postAuthors{background-color:var(--dark-bgAlt)}
.Style-3 .headerRight{background-color: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-color: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-color:var(--dark-bg)}
.Style-3.darkMode .downloadInfo,.Style-3.darkMode .postAuthors{background-color: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.
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'>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