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('modelist')) === 'listmode' ? document.querySelector('body').classList.add('listmode') : document.querySelector('body').classList.remove('listmode') </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('modegrid')) === 'gridmode' ? document.querySelector('body').classList.add('gridmode') : document.querySelector('body').classList.remove('gridmode') </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.
contact atau 089677337414 - Terima kasih.