Ikuti kami di Blogger atau di Google News
...
Cara Membuat Tampilan Median UI 1.6 Menjadi Grid 2 Kolom (Dekstop)

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

Cara merubah tampilan Median UI 1.6 menjadi grid 2 Kolom pada versi dekstop seperti Fletro Pro.
Cara Membuat Tampilan Median UI 1.6 Menjadi Grid 2 Kolom

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.
Baca juga

Advertisement

Dare to be Different!

22 komentar

  1. Abang terimakasih banyak ya di buatin tutorialnya..🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
    Dini mau nyoba terapin dulu ya..

    Nanti klo udah berhasil saya info lagi ya..😊😊😊😊😊
  2. Udah berhasil Abang..
    Ahirnya bisaa juga..😊😊
    Gini kan jadi postingannya agak gede jadi judul postingan gak ke potong 😊😊😊

    Makasih ya Abang 😊😊🙏🙏🙏🙏
    1. Sama - sama kak. Senang bisa membantu.. hhe
  3. Hello, brother, can I request, can I get the add-on for the copies that appear at the bottom of the corner when copying the codes with the icon?
    1. You mean, the toast appears from the bottom said "Copied to clipboard" ?
      Pls correct if i'm wrong.
    2. My dear brother, this same addition, I mean, and with the icon

      Yes, it is the same tool, but the icon is different

      https://www.fineshopdesign.com/2022/01/how-to-add-double-click-to-copy-pre.html
  4. My dear brother, this same addition, I mean, and with the icon

    https://www.fineshopdesign.com/2022/01/how-to-add-double-click-to-copy-pre.html
    1. I jst did a simple way bro. Firstly i tried to put svg but didn't work.
      So then i jst put an icon before. From "Copied to clipboard" become "📋 Copied to clipboard!".
      You know? u can find this or other icon from your smartphone keyboard.
      Almost all of browser will render it perfectly like u've seen in mine.
    2. Can you send your code ?
    3. I've sent it already, the code above is the only part, acccording to reference you sent. The code should be the same.
  5. I mean all the additional codes or make a topic about it if possible
    1. I don't adding or customing any code , by the reference i have and you get for sure. i just put the icon before the text. Have u tried to do the same? Pls tell me if it didn't work then. 📋 <- directly type from my phone
    2. Brother, the problem is, I don't know where to put the icon
    3. So this should help u
      ("#toastNotif").innerHTML="<span>📋 Copied to clipboard!</span>
    4. ???
  6. Brother, you modified the icon, can I get the code?
    1. it have to change several codes brother, add new js and css, you can invite me and i i'll help fix that, if u want
    2. Yes, of course, I will invite you and fix my site. Brother, send your email
    3. I sent you an invitation, brother
    4. Got you bro.. now let's discuss further via telegram. The link at bottom of mobile menu. Meet u there..
    5. Brother, do you mean on blogger or on telegram?
Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code