Cara Redesign Sidebar Template Median UI

cara redesign sidebar template median ui, cara redesign template median ui, median ui redesign blogger template

Cara redesign sidebar template Median UI - Median UI adalah salah satu template blogger terbaik yang didesain oleh Muhammad Maki owner blog Jago Desain.

Template ini menyita banyak perhatian dari kalangan para blogger. Sehingga banyak blogger yang ingin memiliki template keren ini.

Banyak yang redesign template ini dengan tampilan yang lebih menarik. Salah satu blog yang yang menggunakan template Median UI redesign adalah blog ini.

Saya melakukan beberapa perubahan tampilan pada template ini meskipun tidak terlalu mencolok. Salah satu perubahan yang saya buat adalah pada bagian sidebar.

Saya menambahkan background pada widget sidebar sehingga tampak lebih keren (menurut saya pribadi). Disini saya akan bagikan caranya untuk Anda.

Cara Redesign Sidebar Template Median UI

Berikut ini beberapa cara redesign bagian sidebar blog yang menggunakan template Median UI agar tampilannya lebih keren dari versi aslinya.

Redesign Widget Popular Post

Silahkan cari kode CSS berikut ini di dalam edit HTML template blog Anda.

.PopularPosts{counter-reset:popular-count}

Lalu ganti kode diatas dengan kode CSS berikut ini.

.PopularPosts{counter-reset:popular-count;background-color: #fefefe;padding: 15px;border-radius: 8px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.07)}
.dark-mode .PopularPosts{background-color:#252526}

Redesign Widget Profil

Silahkan cari kode CSS berikut ini di dalam edit HTML template blog Anda.

.Profile .solo{display:flex;align-items:center;flex-direction:row;position:relative;border-radius:4px;overflow:hidden}

Lalu ganti kode diatas dengan kode CSS berikut ini.

.Profile .solo{background-color:#fefefe;padding: 15px;display:flex;align-items:center;flex-direction:row;position:relative;border-radius:8px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.07);overflow:hidden}
.dark-mode .Profile .solo{background-color:#252526}

Redesign Widget Label

Silahkan cari tag comment berikut ini di dalam edit HTML template blog Anda.

/* Widget Label */

Lalu masukkan kode CSS berikut ini tepat dibawahnya.

.Label{background-color:#fefefe;padding:15px;border-radius: 8px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.07)}
.dark-mode .Label{background-color:#252526}

Sehingga menjadi seperti ini

/* Widget Label */
.Label{background-color:#fefefe;padding:15px;border-radius: 8px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.07)}
.dark-mode .Label{background-color:#252526}

Apabila semua langkah diatas sudah Anda lakukan, jangan lupa Simpan tema blog Anda.

Penting: Saya menggunakan template Median UI v1.4 untuk panduan ini. Jika Anda menggunakan versi lain, mungkin kode CSS nya akan sedikit berbeda.

Jika Anda sudah melakukan cara diatas dengan benar, maka tampilan widget popular post, widget profil dan widget label blog Anda akan sama dengan tampilan blog ini.

Anda juga bisa mengubah tampilan widget lainnya baik yang berada di sidebar maupun di bagian yang lain. Caranya sama seperti diatas tadi.

Jika Anda ingin request cara redesign bagian-bagian template blog, silahkan tuliskan di kolom komentar atau kirim pesan ke halaman kontak blog ini.

2 komentar

  1. Kalo dark mode warna bgnya tetap putih

    BalasHapus
    Balasan
    1. kode sudah saya perbaharui... silahkan dicoba ulang gan

      Hapus

Posting Komentar