Cara Membuat Tampilan Median UI 1.6 Menjadi Grid 2 Kolom (Dekstop)

Secara default tampilan artikel template median ui 1.6 adalah 3 kolom grid pada Homepage dan 4 Kolom grid pada halaman index. Tentunya penyusunan ini sudah difikirkan matang2 oleh pembuat template yaitu Mas Maki M.

Tampilan grid pada Median UI sudah terlalu bagus menurut saya, tapi bagi sebagian orang mungkin menginginkan tampilan artikel yang sama dengan saudara kandung Median UI, yaitu Fletro Pro yang mana jumlah artikel yang ditampilkan lebih sedikit 1 kolom ( 2 kolom pada Halaman Homepage dan 3 Kolom pada Halaman index). Perbedaan ini terlihat jika diakses melalui perangkat berlayar besar yaitu dekstop. Sedangkan jika diakses melalui Mobile maka keduanya akan terlihat sama saja.

Bagi Kalian yang menginginkan tampilan grid pada template median UI versi 1.6 menjadi 2 grid sangat mudah dilakukan. Berikut ini akan saya bahas caranya.

Cara Membuat Tampilan Median UI 1.6 Menjadi Grid 2 Kolom

Penting! Jangan lupa Backup template Kalian sebelum melakukan peng-editan HTML. Jika sudah mari kita lanjutkan.

Step 1 : Silakan masuk ke Dashboard Blogger Kalian. Kemudian pilih Tema lalu Edit HTML

Step 2 : Silahkan cari kode berikut kemudian hapus atau cukup dikomentari saja. Untuk mempermudah gunakan CTRL + F dan masukan kode .onIndx.onMlt .blogPts >*

Ada 4 baris CSS pada template Median UI 1.6 dengan Class diatas. Silahkan Non-aktifkan dengan cara dihapus atau dikomentari saja supaya mudah dikembalikan ke tampilan semula.

.onIndx.onHm .blogPts >*{flex:0 0 calc(33.33% - 20px);width:calc(33.33% - 20px)}

.onIndx.onHm .blogPts >*{flex:0 0 calc(50% - 20px);width:calc(50% - 20px)}

.onIndx.onHm .blogPts >*{flex:0 0 calc(33.33% - 20px);width:calc(33.33% - 20px)}

@media screen and (max-width:768px){/* Article */ .onIndx.onHm .blogPts >*, .onIndx.onMlt .blogPts >*{flex:0 0 calc(50% - 20px);width:calc(50% - 20px)}}

Gunakan syntax /* diawal dan */ diakhir kode untuk mengomentari atau me-non-aktifkan.

Pada tahap ini tampilan artikel sudah menjadi 2 Grid tapi hanya pada halaman Homepage saja. Untuk menerapakan yang sama pada Halaman Index silahkan lanjutkan langkah berikutnya.

Step 3 : Gunakan langkah yang sama diatas dan temukan class .onIndx.onMlt .blogPts >*

Ada 3 class yang sama pada template Median UI 1.6 dan salah satunya sudah ikut Non-aktif diawal (bagian yang saya tandai).

.onIndx.onMlt .blogPts >*{flex:0 0 calc(25% - 20px);width:calc(25% - 20px)}

.onIndx.onMlt .blogPts >*{flex:0 0 calc(33.33% - 20px);width:calc(33.33% - 20px)}

Sekarang Tampilan grid pada Halaman Homepage dan juga Halaman Index sudah menjadi 2 Kolom. Tapi masih ada sedikit ketidak seimbangan pada halaman index karena tampilan grid masih terlalu besar. Ini dikarenakan pada Median UI 1.6 Widget sidebar tidak tampil pada halaman Index Sehingga membuat Section lebih lebar dibanding halaman Homepage.

Untuk mengatasinya maka perlu menampilkan sidebar pada halaman Index juga. Caranya sebagai berikut.

Step 4 : Masih pada halaman Edit HTML, silahkan cari bagian Sidebar Content. Untuk mempermudah silahkan masukan kode berikut didalam perncarian <b:section id='side-widget' showaddelement='true'>

Potongan kodenya seperti dibawah ini.

<b:if cond='data:view.isHomepage or data:view.isPost'>
    <!--[ Sidebar content ]-->
    <b:tag class='blogItm sidebar' name='aside'>
    <b:tag class='sideIn' name='div'>
    <b:section id='side-widget' showaddelement='true'>
     ...........
     ......

Bagian yang saya tandai silahkan ganti menjadi !data:view.isPage. Sehingga hasilnya akan seperti dibawah ini.

<b:if cond='!data:view.isPage'>
<!--[ Sidebar content ]-->
     <b:tag class='blogItm sidebar' name='aside'>
      <b:tag class='sideIn' name='div'>
      <b:section id='side-widget' showaddelement='true'>
        ..........
        .....

Dengan Tag Kondisional diatas widget sidebar akan tampil disemua halaman selain halaman statis. Untuk menampilkannya pada atau selain halaman tertentu Kalian bisa mengganti atau menghapus Tag Kondisional-nya. Selengkapnya tentang Kondisional pada Blogger, silahkan baca artikel dibawah ini.

Baca JugaTag Kondisional Blogger Terbaru dan Cara Penggunaanya

Step 5 : Lagkah terakhir jika semua tahapan diatas sudah dilakukan, silahkan Simpan tema untuk melihat hasilnya.

Selesai sudah tutorial singkat membuat tampilan kolom 2 grid pada template median ui menyerupai Fletro Pro pada versi Dekstop. Semoga bermanfaat.

Tutorial ini di Request oleh salah satu pengunjung blog Kuymase.com, Jika kalian membutuhkan tutorial lainya, silahkan tinggalkan komentar.