Cara Mengubah Tampilan List Menjadi Grid Home Page di Template Viomagz

www.azid45.web.id - Cara Mengubah Tampilan List Menjadi Grid Home Page di Template Viomagz. Sebelumnya saya sudah pernah share Cara Membuat Tombol List dan Grid Mode akan tetapi tampilan Grid pada tutorial tersebut masih dibilang sederhana.

Oleh karena itu saya disini akan membuat tutorial lagi khusus tampilan Grid saja pada template Viomagz. Secara default template Viomagz mengusung tampilan post di home page menggunakan List Post bukan Grid yang seperti kita lihat pada template terbaru milik mas sugeng "LinkMagz" yang mengusung tampilan Grid Post.

Untuk mengubah tampilan Grid post disini saya tidak mengubah CSS bawaan template agar lebih mudah untuk dipahami. Disini saya menggunakan metode b:class dengan tag conditional hanya digunakan pada tampilan Indeks saja sehingga tidak mempengaruhi tampilan pada laman lainnya seperti postingan dan halaman static.

Baiklah untuk mempersingkat waktu, Anda bisa mengikuti langkah-langkah dibawah ini:

Pertama, login Blogger

Kedua, menuju menu Tema - Edit HTML

Ketiga, cari kode </b:skin> dan letakkan kode CSS berikut ini tepat diatasnya (tidak harus diatasnya pas, yang penting masih dalam area tersebut)

/*POST GRID*/
.index .blog-posts .post-outer{
    width: 50%;
    padding: 0 15px 15px 10px;
    box-sizing: border-box;
    padding-left: 0;
    float: left;
    height: 320px;
}
.index .blog-posts .post-outer .post{
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 0;
    border-radius: 7px 7px 7px 7px;
    transition: all .5s ease;
    box-shadow: 0 1px 10px 5px rgba(0,0,0,.05), 0 3px 3px rgba(0,0,0,.05);
}
.index .img-thumbnail{
    position: relative;
    float: none;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 66.666666%;
    margin: 0;
}
.index .img-thumbnail img:hover{
    transition: all .3s ease;
    transform: scale(1.1);
    filter: brightness(85%);
    -webkit-filter: brightness(85%);
    animation: none;
    -moz-animation: none;
    -webkit-animation: none;
    -o-animation: none;
}
.index h2.post-title.entry-title{
    margin: 0;
    padding: 5px;
    font-size: 16px;
    font-weight:500;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 30px;
    margin:auto;
    text-align:center;
}
.index .post-snippet,.time-info:before,.comment-info:before{
    display:none;
}
.index .info-1{
    position:absolute;
    margin:auto;
    text-align:center;
    padding:5px;
    bottom:5px;
    width:100%;
}
.author-info svg,.time-info svg,.comment-info svg{
   width: 13px;
   height: 13px;
   vertical-align: -3px;
}
.author-info,.time-info,.comment-info{
   margin-right: 5px;
}
.index .label-info-index{
   text-align:center;
}
.index .label-info-index a{
    display: inline-block;
    color: inherit;
}
.index .label-info-index a:nth-child(n+2){display:none}
.index .label-info-index a:before,.author-info a:before,.time-info span:before,.comment-info a:before{
content:'';
min-width: 13px;
min-height: 13px;
background-position:center;
background-repeat:no-repeat;
vertical-align:-3px;
display:inline-block;
}
.author-info a:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z' fill='%23333'/%3E%3C/svg%3E")}

.time-info span:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z' fill='%23333'/%3E%3C/svg%3E")}

.comment-info a:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7C5,5.89 5.9,5 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.9 12.75,23 12.5,23V23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z' fill='%23333'/%3E%3C/svg%3E")}

.index .label-info-index a:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5,19L8.34,12L3.5,5H14.5C15.17,5 15.72,5.3 16.13,5.86L20.5,12L16.13,18.14C15.72,18.7 15.17,19 14.5,19H3.5Z' fill='%23008080'/%3E%3C/svg%3E")}

.index .label-info-index a.Islam:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z' fill='%23008080'/%3E%3C/svg%3E")}

.index .label-info-index a.teknologi:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' fill='%23ea592d'/%3E%3C/svg%3E")}

.index .label-info-index a.Pendidikan:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18,4V3A1,1 0 0,0 17,2H5A1,1 0 0,0 4,3V7A1,1 0 0,0 5,8H17A1,1 0 0,0 18,7V6H19V10H9V21A1,1 0 0,0 10,22H12A1,1 0 0,0 13,21V12H21V4H18Z' fill='%231a73e8'/%3E%3C/svg%3E")}
@media screen and (max-width:900px) {
.index .blog-posts .post-outer{height:310px;}
}
@media screen and (max-width:800px) {
.index .blog-posts .post-outer{height:375px;padding:10px 5px}
.index #wrapper{padding:70px 5px 5px}
}
@media screen and (max-width:640px) {
.index .blog-posts .post-outer{height:325px;}
}
@media screen and (max-width:480px) {
.index .blog-posts .post-outer{height:270px;}
.index h2.post-title.entry-title{font-size:12px}
}
@media screen and (max-width:420px) {
.index .blog-posts .post-outer{height:250px;}
}
@media screen and (max-width:320px) {
.index .blog-posts .post-outer{width:100%;height:auto;float:none}
.index .post{margin-bottom:0}
.index .info-1{position:relative;}
}

KETERANGAN:

Pada kode CSS ini juga menggunakan icon label otomatis, oleh karena itu Anda perlu menambahkan kode CSS sesuai icon label yang Anda inginkan. Untuk tutorialnya Anda bisa simak di "Cara Membuat Icon Label Otomatis"

Keempat, cari kode <body> jika sudah ketemu letakkan kode b:class tepat dibawahnya

<b:class cond='data:view.isMultipleItems' name='index'/>

Kelima, cari kode <b:includable id='labelsinfo' var='post'> jika sudah ketemu letakkan kode berikut ini tepat diatas kode tersebut

      <b:includable id='labelsinfoindex' var='post'>
  <b:if cond='data:post.labels'>
  <span class='label-info-index'>
  <b:loop values='data:post.labels' var='label'>
 <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' rel='tag'><b:class expr:name='data:label.name'/><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
  </b:loop>
  </span>
  </b:if>
</b:includable>

Keenam, cari kode <b:include data='post' name='labelsinfo'/> jika sudah ketemu hapus saja kode tersebut

Ketujuh, cari kode <div class='post-info info-1'> jika sudah ketemu letakkan kode <b:include data='post' name='labelsinfoindex'/> tepat dibawahnya dan hapus kode <b:include data='post' name='postdateinfo'/>. Kurang lebih akan seperti ini

<div class='post-info info-1'>
        <b:include data='post' name='labelsinfoindex'/>
<b:include data='post' name='postauthorinfo'/>
<b:include data='post' name='postcommentinfo'/>
<b:include data='post' name='postQuickEdit'/>
</div>

Kedelapan, Save Template

Untuk lihat Demonya bisa cek dibawah ini

Demo

Demikianlah tutorial terkait "Cara Mengubah Tampilan List Menjadi Grid Home Page di Template Viomagz" semoga tutorial ini bermanfaat. Amin

KETERANGAN
Tutorial ini hanya mengubah tampilan Grid saja, tidak ada tombol List dan Grid. Nanti saya akan buat artikel sendiri terkait mengubah tampilan Grid menjadi List seperti milik Kak Igniel.

UPDATE 31 Maret 2020

Secara default tutorial diatas masih menampilkan author profil. Jika Anda ingin menghilangkan author profil Anda bisa cari kode <div class='post-info info-1'> dan hapus kode <b:include data='post' name='postauthorinfo'/> yang ada dibawah kode <div class='post-info info-1'>

Selanjutnya tambahkan kode CSS dibawah ini

.index .comment-info{
   margin-right: 15px;
   float:right
}
.index .label-info-index{
   text-align:center;
   float:left;
}

Jika Anda ingin menghilangkan kata "komentar" atau "comment" Anda bisa menghapusnya dengan cara mencari kode <b:includable id='postcommentinfo' var='post'> nanti akan menemukan kata komentar dan comment hapus saja semuanya.

Untuk yang sudah membuat tutorial ini Anda bisa mengganti ukuran font title 14px menjadi 12px` di kode css pada media screen 480px

.index h2.post-title.entry-title{font-size:12px}

serta Anda juga bisa mengubah ketinggiannya yang semula pada kode .index .blog-posts .post-outer di media screen 480 adalah 295px ganti dengan 270px dan di media screen 420 adalah 275px ganti dengan 250px

Semoga bermanfaat.