Cara Membuat Tampilan List Grid Latest Post VioMagz v4.7.0

Cara Membuat Tampilan List Grid Latest Post VioMagz v4.7.0 - Tampilan default template VioMagz v.4.7.0 hanya menggunakan tampilan List saja yang menurut Admin sendiri sudah sangat bagus. Namun mengikuti perkembangan blog saat ini, penggunaan tampilan Grid menjadi sangat populer.

Saat ini banyak mulai bermunculan template baru yang didesain menggunakan opsi pilhan apakah ingin menggunakan tampilan list atau menggunakan tampilan grid. Hal ini mendorong Admin untuk mencoba meredesign template VioMagaz agar terlihat mengikuti perkembangan template blog yang ada.

Template VioMagz sudah sangat mantap dan memiliki fitur dan kelebihan tersendiri yang berbeda dengan template yang lain. Untuk itu Admin lebih memilih meredesign template VioMagz v4.7.0 ini ketimbang beralih ke template yang lain.

{tocify} $title={Table of Contents}

Ada beberapa hasil redesign yang sudah dicoba pada template VioMagz yang dapat kalian baca artikelnya di Blog Butta Toa ini seperti menambahkan Table Of Content👀, menambahkan Dark Mode👀 dan lainnya.

A. Apa Itu Tampilan Grid Blog?

Tampilan grid diblog merupakan desain tampilan yang dibuat dan disusun mengikuti garis baik secara horizontal, vertikal maupun diagonal, yang berfungsi untuk mengatur konten artikel yang di ditulis dalam sebuah website. Tampilan grid ini biasanya tersusun dari 2 (dua) atau lebih kolom artikel secara horizontal dan kolom berikutnya akan menyesuaikan vertikal dibawahnya. Hal ini berbeda dengan tampilan List dimana tersusun vertikal kebawah dan hanya 1 (satu) kolom horizontal.

B. Manfaat Tampilan Grid Untuk Blog

Menggunakan tampilan grid pada sebuah blog memiliki manfaat yang baik diantaranya:

1. Blog Mudah Dipahami Pembaca

Tampilan grid memberikan desain yang membuat Blog kalian akan menjadi lebih mudah dipahami pembaca karena informasi yang ingin disampaikan melalui tampilan blog sangat jelas dan terarah. Selain itu, pembaca akan mudah menemukan konten yang dicari karena dengan menggunakan tampilan grid, jumlah artikel yang ditampilkan di HomePage Awal lebih banyak dari pada tampilan list.

2. Konten Artikel Tertata Lebih Rapi

Dengan tampilan grid, artikel yang muncul dan ditampilkan di halaman HomePage akan terlihat lebih rapi karena margin antar setiap artikel terjaga dan teratur sehingga bermanfaat bagi blog yang memiliki banyak konten artikel. Tampilan blog kalian juga akan menjadi lebih dinamis dan memudahkan pengaturan halaman blog untuk menampilkan artikel secara teratur walaupun artikel kian lama bertambah banyak.

3. Menaikkan Rate Blog

Tampilan grid juga bisa membuat pembaca yang mengunjungi blog kalian akan betah bertahan lama melihat dan membaca setiap konten artikel yang mereka cari ataupun artikel yang kalian rekomendasikan. Hal ini tentu saja dapat meningkatkan trafik sekaligus conversion rate blog kalian.

C. Cara Menambahkan Tampilan Grid VioMagz v4.7.0

Untuk menambahkan tampilan grid pada template VioMagz v4.7.0 kalian ikuti langkah-langkah berikut ini:

1. Tempatkan kode script yang ada dibawah diatas/sebelum kode ]]></b:skin>.

/* gridmode */
.menu-gridmode {position:relative;}
.gridmode-switch .switch-title{color:#4169E1}
.gridmode-switch .slider{border:2px solid #4169E1}
.gridmode-switch .slider:before{background:#4169E1}
.gridmode-switch{position:absolute;top:0;right:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:0}
.gridmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:7px;text-transform:uppercase}
.gridmode-switch .switch-title:before{content:"List Mode"}
.gridmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle}
.gridmode-switch .switch input{opacity:0;width:0;height:0}
.gridmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.gridmode-switch .slider:before{position:absolute;content:"";border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s}
.gridmode-switch input:checked+.slider{background-color:#97230a;border:2px solid #4169E1}
.gridmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)}
body.gridmode .gridmode-switch .switch-title:before{content:"Grid Mode"}
body.gridmode .post-outer {width: calc(50% - 10px);float:left;margin: 0 5px 10px 0px;}
body.gridmode .post {margin-bottom: 10px;height: 400px;}
body.gridmode .img-thumbnail-wrap{width: 95%!important;margin-bottom: 10px;margin-right: 15px}
body.gridmode h2.post-title {text-align:left;margin-left:0}
body.gridmode #blog-pager{padding:40px 0}}

Bila script diatas untuk mobile layar 480px kalian merasa dengan tampilan grid, postingan artikel terlalu kecil dan tidak menarik, kalian cukup tambahkan kode script dibawah ini.

@media screen and (max-width: 480px){
.post-snippet{margin-left: 0;margin-right: 0}
body.gridmode .post-outer{width:100%}
body.gridmode .post{height:auto}
body.gridmode .img-thumbnail-wrap{width: 100%!important;margin:0 0 5px 0}
}

Catatan : bila kalian menambahkan scrip responsive mobile tersebut diatas perhatikan tanda ( } ) di kode sebelumnya, kalian harus menghapusnya terlebih dahulu agar script tidak terbaca sebagai script yang berbeda. Kode script diatas agar tampilan responsive pada mobile layar 480px. Perhatikan gambar dibawah ini.

2. Cari lalu tambahkan kode sript dibawah dan letakkan diatas/sebelum kode kode <div class='latest-post-title'>.

<b:if cond='data:view.isMultipleItems'>
<div class='menu-gridmode'>
<div class='gridmode-switch'><span class='switch-title'/><label class='switch'><input aria-label='checkbox' class='gridcheckbox' onclick='gridMode()' type='checkbox'/><span class='slider'/></label>
</div>
</div>
</b:if>

3. Copy script dibawah lalu pastekan setelah/dibawah kode <body>.

<b:if cond='data:view.isMultipleItems'>
<script>
(localStorage.getItem(&#39;modegrid&#39;)) === &#39;gridmode&#39; ? document.querySelector(&#39;body&#39;).classList.add(&#39;gridmode&#39;) : document.querySelector(&#39;body&#39;).classList.remove(&#39;gridmode&#39;)
</script>
</b:if>

4. Tambahkan kode script dibawah lalu letakkan diatas kode </body>.

<b:if cond='data:view.isMultipleItems'>
<script>//<![CDATA[
function LMcheckCheckbox(){document.querySelectorAll(".gridcheckbox").forEach(function(e){"gridmode"===localStorage.getItem("modegrid")?e.checked=!0:e.checked=!1})}function gridMode(){localStorage.setItem("modegrid","gridmode"===localStorage.getItem("modegrid")?"light":"gridmode"),"gridmode"===localStorage.getItem("modegrid")?document.querySelector("body").classList.add("gridmode"):document.querySelector("body").classList.remove("gridmode"),LMcheckCheckbox()}function gridModeHide(){document.querySelectorAll(".gridmode-switch").forEach(function(e){e.parentNode.removeChild(e)})}LMcheckCheckbox(),"undefined"==typeof AzidBloggerSetting&&(AzidBloggerSetting={tombolGridmode:!0}),0==AzidBloggerSetting.tombolGridmode&&gridModeHide();
//]]></script>
</b:if>

5. Cari kode .post-snippet{margin-left:42%} lalu ubah/tambahkan atau ganti dengan script dibawah ini.

.post-snippet{margin-left:0%;margin-right:10px}

6. Selanjutnya cari kode .img-thumbnail-wrap{position:relative;float:left;width:39%;margin-top:3px;overflow:hidden} dan tambahkan margin-right:16px sehingga menjadi kode script seperti dibawah ini.

.img-thumbnail-wrap{position:relative;float:left;width:39%;margin-top:3px;margin-right:16px;overflow:hidden}

Untuk melihat cara menambahkan fitur list grid ini dalam bentuk video, silahkan berkunjung ke Butta Toa Youtube Channel👀.Bila kalian mempunyai masalah dalam membuat tampilan grid list pada template VioMagz v.4.7.0 diatas silahkan berkomentar. Bila bermanfaat, kalian boleh share ke teman-teman yang lain yang memiliki template yang sama. Wassalam.

Share :