Cara Menambah Grid Pada Tema/Template Soho

Setelah kemarin menyembunyikan sidebar dan menampilkannya sebagai menu toggle. Kini kita akan melanjutkan edit tema soho dengan menambahkan grid menjadi 3 atau 4 grid pada versi desktop dan 2 grid pada versi tablet. Karena kita sebagai pengguna tema Soho sudah tahu kalau grid pada tema soho ini hanya 2 untuk versi desktop dan 1 grid saja untuk versi tablet dan ponsel. 

Nah kali ini kita akan membuatnya tampil berbeda yakni 4 grid pada desktop ukuran 1440px  ke atas, 3 grid untuk versi desktop resolusi layar 1440 sampai 1024 ke bawah dan 2 grid pada layar tablet 1024 sampai 600 ke bawah. Sedangkan pada layar mobile ukuran 600 kebawah tetap 1 grid. Bagaimana caranya? 

Yuk simak dan baca sampai selesai. 

Pertama setelah kita masuk pada dasboard tema > icon∆ > edit HTML. 

Kita mulai untuk versi tablet dulu. 

Cari kode css berikut

@media screen and (min-width:640px){

Ganti 640px menjadi 600px saja.

Jadi seperti ini

@media screen and (min-width:600px){

Jadi seperti berikut

Tambahkan kode css berikut

.feed-view .widget.Blog .blog-posts .post-outer-container{width:$(content.width / 2 - 10px)}

Contoh gambar

Bisa disave dulu untuk melihat pada versi tablet. Dan hasilnya pada perangkat 600-1024

Berikutnya untuk versi desktop layar 1024 sampai layar 1440

Cari kode berikut

@media screen and (min-width:$(content.width + 240px))

Yang merupakan bagian dari versi desktop dengan resolusi layar 1024 sampai 1440. Scroll kebawah dan cari kode berikut:

.widget.Blog .blog-posts .post-outer-container{width:$(content.width / 2 - 10px)}

Tambahkan . feed-view didepannya.  Lalu Ganti angka 2 menjadi 3 terserah berapa grid yang ingin kita tampilkan. Namun untuk angka/nilai 10px kita bisa atur/sesuaikan jika masih ada ruang yang kosong pada area  pembungkus atau containernya di sebelah kanan grid berarti nilainya harus dikurangi menjadi 5px atau seterusnya. 

Apabila ruang kosong tersebut masih ada kita bisa ganti -(min) menjadi +(plus) lalu 10px tersebut ganti dengan nilai/angka yang lebih besar bisa kita sesuaikan. Namun bila grid masih tetap 2grid tapi ada ruang kosong disebelahnya bararti nilai/angka 10px yang kita ganti terlalu besar, kita bisa menguranginya lagi.

Kalau saya sendiri untuk tampilan 3 grid pada ukuran 1024 sampai 1440 seperti ini:

.feed-view .widget.Blog .blog-posts .post-outer-container{width:$(content.width / 3 - 15px)}

Jadi seperti ini

Save dulu untuk melihat tampilan pada 1024-1440 pada browser.

Kita bisa gunakan alt+scroll pada keyboard kita untuk rezize browser atau melaui situs www.websiteplanet.com untuk melihat seberapa resposive blog kita. 

Berikutnya untuk versi desktop dengan layar 1440 keatas kita cari kode berikut ini:

@media screen and (min-width:$(content.width + sidebar.width + content.margin * 2))

Karena di versi 1440 keatas ini tidak ada maka kita akan  menambahkan kode css yang tadi di versi di bawah diantara penutup kurung kurawal }.

.feed-view .widget.Blog .blog-posts .post-outer-container{width:$(content.width / 4 - 15px)}

Hasil akhir seperti gambar ini

Lalu save dan soho kita akan terlihatin seperti ini

Oke sekian dulu tiap dan trik menambah jumlah grid pada tema/template soho blogger/blogspot, semoga bermanfaat.

Wassalam.