Cara Membuat Tampilan Grid Latest Post Template VioMagz
Secara default tampilan homepage atau tepatnya desain latest post template VioMagz memiliki bentuk tampilan List dengan posisi memanjang vertikal. Berbeda dengan tampilan template buatan Mas Sugeng lainnya seperti LinkMagz yang sudah memberikan tampilan secara Grid.
Di artikel sebelumnya, tepatnya di Redesign Template Blogger VioMagzđź‘€ pada sub heading "Menambahkan Fitur Grid Mode", topik ini sudah admin bahas. Di artikel tersebut admin memberikan tutorial cara merubah tampilan list template Viomagz menjadi grid, namun tidak menghilangkan tampilan list yang ada. Jadi ada tombol yang disediakan untuk memberi pilihan pada pengunjung untuk menggunakan tampilan list atau grid.
Sementara tutorial kali ini, seluruhnya menghilangkan tampilan list dan menggantinya dengan tampilan grid di media dekstop atau diatas resolusi 480 pixel, sementara untuk tampilan mobile (480px) memberikan sentuhan tampilan single grid layaknya pada tampilan template LinkMagz.
So, untuk membuat tampilan list latest post VioMagz menjadi tampilan grid, caranya cukup mudah. Kalian ikuti tahpan-tahapan pada edit html template berikut:1. Pertama, kita tambahkan script kondisi diatas code
<b:class cond='data:view.isMultipleItems' name='grid'/>2. Selanjutnya yang kedua cukup tambahkan CSS dibawah ini untuk membuat tampilan Grid dan letakkan diatas/sebelum kode
/* CSS Grid View By Blog Buttatoa */
.grid .blog-posts{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.grid .post-outer{
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
max-width: 50%;
min-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 20px;
padding-right: 15px;
}
.grid .post-outer:nth-of-type(n+1){
padding-left: 15px;
padding-right: 0;
}
.info-1, h2.post-title, .post-snippet{margin-left: 0%;}
.img-thumbnail-wrap{width: 100%}
@media only screen and (max-width:480px){
.grid .post-outer{
-ms-flex-preferred-size:100%;
flex-basis:100%;max-width:100%;padding-right:0}}
.grid .post-outer:nth-of-type(n+1){
padding-left:15px;padding-right:0}
@media only screen and (max-width:480px){
.grid .post-outer:nth-of-type(n+1){
padding-left:0}}
Untuk tampilan mobile akan ditampilkan secara grid single seperti template LinkMagz, tampilannya seperti gambar dibawah ini:
Nah, itulah diatas cara mudah untuk mengubah tampilan list pada template VioMagz menjadi tampilan grid yang saat ini sedang banyak digunakan. Bila kalian ingin melihat lebih banyak redesign template VioMagz, kalian bisa lihat melalui link Redesign Template VioMagzđź‘€ atau melalui video Youtube Channel Buttatoađź‘€. Semoga bermanfaat, Wassalam.
Post a Comment for "Cara Membuat Tampilan Grid Latest Post Template VioMagz"