Cara Merubah Home Page Viomagz Menjadi Grid- VioMagz merupakan template blogger yang paling banyak diminati oleh para blogger, karena template VioMagz merupakan template premium.

Pada umum nya Template VioMagz menggunakan tampilan list atau mendatar ke bawah, nah pada kesempatan kali ini saya ingin berbagi Cara Mengubah Tampilan template VioMagz Menjadi Grid Pada Halaman Home Page.

Sepertinya tampilan halaman blog grid menjadi incaran banyak blogger.

Tampilan grid memberikan kesan modern dan juga terlihat rapih bagi para pengunjung blog.

Saya sendiri ketika melihat halaman grid rasanya ingin berlama-lama disana. Ntah mengapa tampilan grid membuat saya sebagai pengunjung merasa betah dan nyaman.

Namun bagaimana dengan template Viomagz karya mas Sugeng? Apakah bisa?

Tentu saja bisa.

Pada dasarnya template Viomagz memiliki tampilan list post yang menurut saya pribadi sudah sangat keren, akan tetapi banyak sekali para blogger yang mencari cara untuk mengganti tampilan tersebut.

Ntah karena alasan apa. Sebenarnya mereka bisa mendapatkan template dengan tampilan grid dan masih karya mas Sugeng yaitu template Link Magz.

Di artikel ini saya tidak akan merubah secara keseluruhan struktur template tapi hanya menambahkan beberapa css dan tag conditional yang telah tersedia di template Viomagz.

Cara Merubah Homepage Viomagz Menjadi Grid

Silahkan kamu login terlebih dahulu ke blogger.com
Setelah itu lanjut untuk mengedit html pada tema
Tambahkan CSS dibawah ini tepat di atas kode </style> jika menggunakan template VioMagz Premium kamu bisa masukan pada kolom yang di sediakan

/*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.Blog: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.Template: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.Bahastuntas: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;}
}

Kemudian cari kode <body> dan letakan kode ini tepat dibawahnya

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

Terakhir adalah cari kode <b:includable id='labelsinfo' var='posts'> dan letakan kode ini tepat diatasnya

<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>