Skip to main content

Cara Membuat Tombol Grid Mode dan List Mode di Template IgniPlex dan Viomagz

Cara Membuat Tombol Grid Mode dan List Mode di Template IgniPlex dan Viomagz

www.azid45.web.id - Cara Membuat Tombol Grid Mode dan List Mode di Template IgniPlex dan Viomagz. Pada kesempatan kali ini saya akan share membuat tampilan dari grid mode menjadi list mode atau sebaliknya dengan menggunakan script Darkmode linkMagz. Script tersebut memang sudah saya modif agar bila Anda menggunakannya di darkmode tidak bertabrakan.

Baiklah langsung saja, disini saya akan mengkhususkan pada dua template terkenal yaitu Viomagz dan Igniplex. Untuk penjelasannya bisa simak tutorialnya dibawah ini


Membuat List mode di Template Igniplex


Secara default template igniplex menggunakan postingan bentuk grid, oleh karena itu kita tinggal menambahkan kode CSS dan bantuan java script untuk menambahkan mode list postingan. Untuk membuat list mode di template igniplex Anda bisa mengikuti langkah-langkah berikut ini:

Pertama, masuk blogger

Kedua, pilih theme - Edit HTML

Ketiga, cari kode </b:skin> jika sudah letakkan kode berikut diatas kode ]]></b:skin>

/* listmode */
.menu-listmode {position:relative;height:25px;padding:5px 10px;background:#fff;margin-bottom:5px;}
.listmode-switch .switch-title{color:#333}
.listmode-switch .slider{border:2px solid #756d6d}
.listmode-switch .slider:before{background:#009688}
.listmode-switch{position:relative;float:right;top:0;right:0;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}
.listmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:7px;text-transform:uppercase}
.listmode-switch .switch-title:before{content:"Grid Mode"}
.listmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle}
.listmode-switch .switch input{opacity:0;width:0;height:0}
.listmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.listmode-switch .slider:before{position:absolute;content:"";border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s}
.listmode-switch input:checked+.slider{background-color:#333;border:2px solid #fff}
.listmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)}
body.listmode .FeaturedPost .widget-content .snippet-thumbnail{width:100%}
body.listmode .post .snippet-thumbnail{width:40%;float:left;padding:5px}
body.listmode .blog-posts{display:block;grid-template-columns:1fr}
body.listmode .post-outer{display:block;flex-wrap:nowrap;margin-bottom:10px}
body.listmode .post-outer .post{display:block;flex-wrap:nowrap}
body.listmode .listmode-switch .switch-title:before{content:"List Mode"}

Keempat, cari kode <body> dan letakkan kode script berikut ini tepat dibawah kode <body>

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

Kelima, cari kode <div id='igniel'> jika sudah ketemu letakkan kode berikut ini tepat dibawah kode <div id='igniel'>

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

Keenam, cari kode </body> jika sudah ketemu letakkan kode javascript berikut tepat diatasnya

<b:if cond='data:view.isMultipleItems'>
<script>//<![CDATA[
function LMcheckCheckbox(){document.querySelectorAll(".listcheckbox").forEach(function(e){"listmode"===localStorage.getItem("modelist")?e.checked=!0:e.checked=!1})}function listMode(){localStorage.setItem("modelist","listmode"===localStorage.getItem("modelist")?"light":"listmode"),"listmode"===localStorage.getItem("modelist")?document.querySelector("body").classList.add("listmode"):document.querySelector("body").classList.remove("listmode"),LMcheckCheckbox()}function listModeHide(){document.querySelectorAll(".menu-listmode").forEach(function(e){e.parentNode.removeChild(e)})}LMcheckCheckbox(),"undefined"==typeof IgniPlexSetting&&(IgniPlexSetting={tombolListmode:!0}),0==IgniPlexSetting.tombollistmode&&listModeHide();
var LMScrollTop=function(){var o=document.querySelector(".totop");window.addEventListener("scroll",function(){300<=window.scrollY?o.classList.add("is-visible"):o.classList.remove("is-visible")})};"undefined"==typeof IgniPlexSetting&&(IgniPlexSetting={scrollToTop:!0}),1==IgniPlexSetting.scrollToTop&&LMScrollTop();
//]]></script>
</b:if>

Ketujuh, Simpan Template

sampai tahap ini Anda sudah bisa membuat list mode di Igniplex. Untuk menambahkan Darkmode Anda bisa mengikuti tutorial ini "Cara Membuat Darkmode di Igniplex".

Membuat Gridmode di Template Viomagz


Secara default template Viomagz tampil sebagai list postingan untuk itu kita tinggal membuat grid tampilan. Caranya Anda bisa simak langkah-langkah berikut ini:

Pertama, login Blogger

Kedua, menuju menu theme pilih Edit HTML

Ketiga,  cari kode ]]></b:skin> dan letakkan kode berikut ini tepat diatasnya

/* 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}
}

Keempat, cari kode <body> jika sudah ketemu letakkan kode berikut ini tepat dibawahnya

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

Kelima, cari kode <div class='latest-post-title'> jika sudah ketemu letakkan kode berikut ini tepat diatasnya

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

Keenam, cari kode </body> jika sudah ketemu letakkan kode 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>

Ketujuh, Simpan Template

Sampai sini Anda sudah bisa menampilkan grid mode dan list mode. Untuk membuat darkmode Anda bisa melihat tutorial tentang "Cara Membuat Darkmode di Viomagz"

Demikian artikel tentang Cara Membuat Tombol Grid Mode dan List Mode di Template IgniPlex dan Viomagz. Semoga bermanfaat. Amin

Update 26 Maret 2020

Untuk template Viomagz akan menampilkan margin yang terlalu renggang. Untuk mengatasi hal tersebut Anda bisa mengubah kode CSS body.gridmode .post {height:300px} menjadi 265px, 270px, atau sesui dengan keinginan Anda. Gunakan @media screen and (max-width: 800px){body.gridmode .post{height:265px}} dengan mengganti 265px dengan angka yang Anda inginkan pada batas tinggi 800px

Ganti saja 800px sesuai batas yang Anda inginkan, biasanya 1024px, 800px, 640px, 480px dan 320px.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar
Close Disqus
Close Translate