Cara Membuat Tampilan Homepage Menjadi Grid List di Viomagz

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Tampilan Homepage Menjadi Grid List di Viomagz, seperti yang kita ketahui saat ini mode tersebut sedang marak-maraknya di dunia design maupun blogger, mode dimana membuat tampilan homepage menjadi lebih keren pastinya. Nah pada umumnya semua template bawaan blogger ini di menu halamannya masih menggunakan mode biasa atau biasa kita sebuah mode list, itu juga tergantung sesuai keinginan dari pembuat template tersebut.


Untuk tutorial kali kita hanya menambahkan beberapa di dalam template tersebut sesuai dengan permintaan melalui email maupun komentar blogger oleh karena itu saya akan membuat tutorial tersebut, cara ini sudah saya terapkan di blog demo saya kamu bisa mengecheck di tombol demo dibawah artikel ini dan jangan lupa untuk membackup terlebih dahulu template kamu.

Cara Membuat Tampilan Homepage Menjadi Grid List di Viomagz

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Selanjutnya cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah tepat DIATAS kode tersebut.

/* gridmode */
.menu-gridmode {position:relative;}
.gridmode-switch .switch-title{color:#333}
.gridmode-switch .slider{border:2px solid #333}
.gridmode-switch .slider:before{background:#333}
.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:#333;border:2px solid #fff}
.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: 300px;}
body.gridmode .img-thumbnail {width: 100%!important;}
body.gridmode h2.post-title {margin-left: 0;text-align: center;}
body.gridmode .info-1, body.gridmode .post-snippet {margin-left: 0;display: none;}
@media screen and (max-width: 800px){
body.gridmode .post-outer{margin:5px;}
body.gridmode h2.post-title {font-size: 16px;}
}
@media screen and (max-width: 480px){
.post{margin-bottom:10px}
.img-thumbnail{width:40%!important;margin:0!important;position:relative!important;height:auto!important;padding-right:10px}
.img-thumbnail img{position:relative!important}
body.gridmode h2.post-title,h2.post-title {font-size: 14px;}
body.gridmode .img-thumbnail{margin:0!important;padding-right:0}
.info-1{margin-left: 0;display: none;}
}
@media screen and (max-width: 320px){
.post-snippet{margin-left: 0;display: none;}
body.gridmode .post-outer{width:100%}
body.gridmode .post{height:auto}
body.gridmode .img-thumbnail{margin:0 0 5px 0}
}

4. Berikutnya cari kode berikut ini <body> dan pastekan tepat DIBAWAH kode tersebut.

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

5. Langkah berikutnya silahkan kamu cari kode berikut ini <div class='latest-post-title'> dan kamu letakkan kode dibawah ini tepat DIATAS kode tersebut.

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

6. Langkah terakhirnya cari kode berikut ini </body> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

<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 JagoanBloggerSetting&&(JagoanBloggerSetting={tombolGridmode:!0}),0==JagoanBloggerSetting.tombolGridmode&&gridModeHide();
//]]></script>
</b:if>

7. Kalau sudah silahkan klik SIMPAN dan Selesai.


Bagaimana mudah bukan untuk tutorial Cara Membuat Tampilan Homepage Menjadi Grid List di Viomagz, untuk kamu yang ingin melihat demonya silahkan klik tombol demo diatas dan apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online saja.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    10 Komentar

    1. Bro ini fungsi nya apa. Tolong jelasin donk

      BalasHapus
      Balasan
      1. Seperti tampilan grid list mas pada umumnya, biar mempunyai 2 bagian homepage, Terima kasih sudah berkunjung di Jagoandzgn

        Hapus
    2. Intinya sih buat mempercantik tampilan blog mas

      BalasHapus
      Balasan
      1. Nah iya mas bisa jadi seperti itu hehehe

        Hapus
    3. Jauh banget yah marginnya kebawah ­čĄö

      BalasHapus
      Balasan
      1. Hehehe iya mas tinggal atur aja cssnya, Terima kasih sudah berkunjung di Jagoandzgn

        Hapus
    4. Biar pas tampilan grid mode margin nya gak banyak bgt jaraknya gimana ya? soalnya keliatan bgt ruang kosong jauh dibawah judul postingan

      BalasHapus
      Balasan
      1. Nanti bakal kita update mas, agar lebih clean Terima kasih sudah berkunjung di Jagoandzgn

        Hapus
    5. Balasan
      1. Siap mas hehehe, Terima kasih sudah berkunjung di Jagoandzgn

        Hapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel