Cara Mengubah Tampilan Dasar di Median UI v1.5

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.

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.

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

Suka menulis berita yang berhubungan dengan dunia teknologi khususnya Blog, Aplikasi, Provider, Smartphone, dan Desktop

9 komentar

  1. Buatkan juga tutorial cara buat tampilan postingan terbaru bentuk card (kartu) seperti punya mas, trus bagaimana cara mengubah tampilan Popular Post dan Related Post Median UI 1.5. Terima Kasih
    1. Sudah bawaan template gan.
  2. mas tolong dibuatkan untuk posting produk seperti contoh di Median UI 1.5. Terima Kasih
    1. Baik gan secepatnya akan dibuat.
  3. mas cara post card nya kaya sampean gimana ya?
    1. Ini masih bawaan Median UI v1.4 gan, cuma dihilangin aja labelnya.
  4. Gan, cara biar tampilan homepage blogku sama kayak punya agan gimana ya gan? Punyaku berantakan banget bagian iklannya. Gak tahu cara hapusnya. Tsubete.blogspot.com. hehe terimakasih jika sudah membaca.
  5. Beda template dengan punya agan.
  6. bang feri gimana caranya menganti loco icon svg di samping logo header bang. makasih
Chat via WhatsApp