Cara Mudah Membuat Home Page Atau Tampilan Blog Menjadi Grid Style

Hallo sobat Expxo, pada kesempatan kali ini admin akan berbagi tutorial Cara Membuat Home Page Atau Tampilan Blog Menjadi Grid Style, di dalam dunia blogger salah satu kunci sukses ialah tampilan blog itu sendiri karena dengan tampilan yang mrapih dan tertata dengan sempurna itu bisa menaikan jumblah visitor, sebab dengan tampilan blog yang tertata rapih dan dinamis dan seo friendly pula itu semua mempunyai daya tarik yang luar biasa terhadap visitor.

Sesuai judul, admin kali ini akan membahas tentang Cara Membuat Home Page Atau Tampilan Blog Menjadi Grid Style, sebagai percobaan admin menggunakan template Viomagz. Kenapa Viomagz? karena admin juga menggunakan template Viomagz.
Cara Membuat Tampilan Blog Menjadi Grid Style
1. Masuk ke blogger kalian masing - masing dengan Gmail,
2. Selanjutnya pilih menu Tema ~ Edit HTML
3. Ketikkan CTRL + F di keyboard untuk mempermudah pencarian dan masukkan kode </head> atau  &lt;!--</head>--&gt;&lt;/head&gt;
4. Copy kode di bawah ini dan pastekan di atas kode </head> atau  &lt;!--</head>--&gt;&lt;/head&gt;

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

}

.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);

    }

}

</style>

</b:if>



</b:if>

5. Simpan template dan lihat hasilnya
Banyak cara untuk melakukan Grid Style tapi menurut admin cara ini paling mudah dan gampang, karena jika sobat sudah bosan dengan tempilan Grid sobat hanya perlu menghapus kode tersebut dan tampilan homepage blog sobat akan kembali seperti semula.

Sebelum melakukan ini usahakan template sobat belum banyak perubahan pada kode template sobat

Jika sobat ingin tampilan blog sobat seperti semula sobat hanya perlu menghapus kode yang sudah di pastekan di atas kode </head>

Seperti itulah Cara Mudah Membuat Home Page Atau Tampilan Blog Menjadi Grid Style, jika ada pertanyaan silahkan berkomentar di bawah.

Lapak Info

Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.

Facebook

WhatsApp

Instagram

Bagikan Artikel ini