Cara Mengubah Tampilan Home Page Pada Template Viomagz Menjadi Gird Style

Setelah hampir sebulan gk bikin thread lagi, maka pada kesempatan kali ini saya akan berbagi sedikit trik. Trik ini berkaitan dengan blog tentunya, yap. Mempercantik blog memang idaman banget yak. Kalok blog kece pun pasti sang empunya merasa gimana gitu.

Tampilan blog memang bukan faktor utama bagi sebagian blogger. Tapi pada konteks lain tidak menutup kemungkinan tampilan juga dapat menyampaikan kesan tersendiri? apalagi jika memang tampilannya gk enak dilihat juga yang mandang ogah.

Tapi gak ada salahnya selain konten yang memadai kita juga harus berusaha untuk menyuguhkan penampilan yang apik, agar konten yang ada makin mudah dipahami. ealah, aku ngomong apasih? 😄.

Kenapa saya membuat thread ini? ehh, entah lah. iseng aja.

Melihat master blogger yang terkenal menjual template terbarunya, dengan tampilan yang apik dan langsung boom bak kacang goreng. Dan ternyata banyak juga blogger yang menggunakan temanya. "Hal ini gk membuat saya kaget, iyalah. Karena memang temanya bagus kok (ya iya kan premium 😆)" tapi memang semua tema buatan master blogger satu ini bagus, rapi dan sederhana.

Sebelumnya sudah hadir lebih dulu tema dengan nama Evomagz dengan style magazine yang disebut sebut template sejuta umat. Kini Viomagz yang digadang-gadang sebagai adiknya juga menuai popularitas yang sama (katanya).

Karena sebenarnya ini adalah permintaan teman saya beberapa waktu lalu untuk mengubah tampilannya jadi dua. Jadi saya rubah aja, karena namanya temen ya jadi rubah aja "hitung-hitung amal".

Untuk mengubah tampilan home page jadi gird disini saya hanya menggunakan CSS dan Tag kondisional saja, jadi gk mengubah terlalu banyak. Nah jika sobat awb ingin menerapkanya bisa coba cara ini, tapi ini hanya untuk template yang masih original yak, dalam artian belum banyak mengalami perubahan propertynya, baik class css ataupun htmlnya.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.label-info-th{
    margin-top:10px
}
a.home-link{
    display:none;
}
#blog-pager{
    padding:10px;
}
#blog-pager-older-link{
    float:none;
}
#blog-pager-older-link a{
    background:#43ce8e;
    color:#fff;
    border-radius:5px;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.1);
    box-shadow:0 5px 10px rgba(0,0,0,0.1);
    -webkit-transition:-webkit-box-shadow .5s;
    transition:-webkit-box-shadow .5s;
    transition:box-shadow .5s;
    transition:box-shadow .5s,-webkit-box-shadow .5s;
    transition:box-shadow .5s,-webkit-box-shadow .5s;
    overflow:hidden;
    display:inline-block;
    position:relative;
    cursor:pointer;
    padding:20px 30px;
    margin:0 20px;
}
#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover{
    -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.2);
    box-shadow:0 10px 10px rgba(0,0,0,0.2);
}
.post{
    margin:auto 5px 20px;
    width:calc((100% / 2) - 10px);
    float:left;
    height:420px;
    overflow:hidden
}
.info-1,.info-2,h2.post-title,.post-snippet{
    margin-left:0;
}
.img-thumbnail,.img-thumbnail img{
    width:100%;
    margin-bottom:15px;
}
@media only screen and (max-width:800px){
    .img-thumbnail,.img-thumbnail img{
        width:100%;
        height:165px;
    }
    .post{
        height:auto;
    }
}
@media only screen and (max-width:480px){
    .img-thumbnail{
        width:100%;
        height:auto;
        margin:3px 0 10px 0;
    }
    .img-thumbnail img{
        width:100%;
        height:200px;
    }
    .info-1,.info-2,h2.post-title,.post-snippet{
        margin-left:0;
    }
    .post{
        overflow:hidden;
        width:calc((100% / 1) - 11px);
    }
}
</b:if>
</b:if>

Nah markup diatas itulah yang akan mengubah tampilannya. Markup diatas dapat sobat letakan diatas tag &lt;!--</head>--&gt;&lt;/head&gt; jika sudah klik save dan lihat hasilnya.

Jadi kalo seandainya sudah bosan dengan tampilan tersebut, tinggal hapus saja markup diatas tadi. Gimana mudah kan? Jadi Markup CSS diatas bisa diubah lagi sesuai keingianan sobat. Jadi sesuaikan saja ya. semoga bermanfaat.