Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Tampilan Homepage Blog Menjadi Grid


Ikhsancoegraphy - Pada kesempatan kali ini admin akan membagikan kepada kalian bagaimana cara membuat tampilan homepage di blogger menjadi mode grid. Admin disini memakai template viomagz dari mas sugeng.

Kalian bisa mengecek di blog nya mas sugeng, banyak template yang bagus buat blogger kalau kalian belum tau.Blog nya namanya sugeng.id Ok... Sekarang kita lanjut ke tutorialnya ya, cukup mudah kok caranya, simak berikut ini.

Cara Membuat Homepage Template Viomagz Menjadi Grid

  • Pertama yaitu Login ke akun blogger kalian masing - masing terlebih dahulu.
  • Kemudian masuk ke Thema dan Tata Letak.
  • Langkah selanjutnya yang harus kalian lakukan adalah cari kode ]]></b:skin> ,kalau sudah ketemu paste kode yang saya berikan di bawah ini tepat di atasnya.


/* gridmode by Jagoan Redesign*/
.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}
}

  • Kemudian cari kode </body>  dan letakan kode di bawah ini tepat diatasnya.


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

  • Kalian cari lagi kode <div class='latest-post-title'> lalu pastekan di atasnya kode di bawah ini.


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

  • Dan langkah yang terakhir cari kode <body> dan pastekan kode berikut tepat di bawahnya, jangan salah ya.


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

  • Selesai....

Akhir kata

Cukup mudah & gampang kan, cara membuat tampilan homepage blogger template viomagz menjadi grid. Sekian tutorial dari admin, terima kasih 🙏.