Cara Membuat Tampilan Homepage Grid List Pada Template Viomagz

Cara Membuat Tampilan Homepage Grid List Pada Template Viomagz


Pelajar Design - Pada kesempatan kali ini saya akan memberikan sebuah tutorial Cara Membuat Tampilan Homepage Grid List Pada Template Viomagz, Nah pada umumnya semua template bawaan blogger pada menu halamannya masih menggunakan mode biasa atau biasa kita sebut mode list.

Cara Membuat Tampilan Homepage Grid List Pada Template Viomagz

1. Silahkan login ke blogger.com.
2. Masuk ke menu TEMA > Edit HTML.
3. Selanjutnya cari kode ]]></b:skin> dan pastekan kode dibawah ini 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. Selanjutnya silahkan cari kode <body> dan paste kode dibawah 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 kalian cari kode <div class='latest-post-title'> dan 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 terakhir carilah kode </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 RedesignBloggerSetting&&(RedesignBloggerSetting={tombolGridmode:!0}),0==RedesignBloggerSetting.tombolGridmode&&gridModeHide();
//]]></script>
</b:if>

7. Kalau sudah menyelesaikan langkah-langkahnya silahkan simpan dan lihat hasilnya.

Nah, mudah bukan tutorial Cara Membuat Tampilan Homepage Grid List Pada Template Viomagz. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya.

You may like these posts