Cara Menambahkan Tombol Grid dan List Mode di Template Kompi Flexible
www.azid45.web.id - Cara Menambahkan Tombol Grid dan List Mode di Template Kompi Flexible. Bagi saya template yang keren dan banyak peminatnya itu ada 3 Igni Plex, Viomagz, dan Kompi Flexible. Dari sinilah saya akan bagikan pengalaman saya membuat grid mode di template kompi flexible yang ringan dan mudah untuk di terapkan.
Sebelumnya saya sudah membuat grid mode di template Viomagz serta juga sudah membuat list mode di template Igniplex sekarang saatnya saya juga membuat mode grid di home page template kompi flexible.
Baca Juga: Membuat list mode dan Grid Mode di Igniplex dan Viomagz
Tutorial ini saya tujukan kepada penggemar template kompi flexble yang kebetulan juga bertanya terkait membuat grid mode di template tersebut. Baiklah langsung saja, untuk menampilkan tombol grid mode pada template kompi flexible Anda bisa mengkuti tutorialnya berikut ini:
Baca juga: Membuat Darkmode seperti template linkmagz
Pertama, login blogger, menuju ke menu tema dan pilih Edit HTML
Kedua, cari kode </style> jika sudah ketemu letakkan kode CSS berikut ini tepat diatasnya (bagi Anda yang sudah tau fungsi dari kode ini Anda bisa meletakkan kode tersebut sesuai keinginan Anda)
/* gridmode */
.menu-gridmode {position:relative;padding:20px;background:#124b50;margin-bottom:10px}
.gridmode-switch .switch-title{color:#fff}
.gridmode-switch .slider{border:2px solid #fff}
.gridmode-switch .slider:before{background:#fff}
.gridmode-switch .switch:hover .slider:before{background:#ffffff}
.gridmode-switch{position:absolute;top:10px;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 .menu-gridmode{margin-right:10px;}
body.gridmode .gridmode-switch .switch-title:before{content:"Grid Mode"}
body.home_page.gridmode .post{height:250px;}
body.home_page.gridmode .post-outer{margin:0 10px 20px 0;width:calc(50% - 10px);float:left}
body.home_page.gridmode .post .posts-thumb{width:100%}
body.home_page.gridmode .post h3.post-title{text-align:center;padding:5px 10px}
body.home_page.gridmode .post .read_more{display:none}
@media screen and (max-width: 800px){
body.gridmode .menu-gridmode{margin-right:5px;margin-left:5px}
body.home_page.gridmode .post-outer{margin:5px}
body.home_page.gridmode .post h3.post-title a{font-size:14px}
body.home_page.gridmode .post{height:265px;}
}
@media screen and (max-width: 640px){
body.home_page.gridmode .post{height:215px;}
}
@media screen and (max-width: 320px){
body.home_page.gridmode .post-outer{margin:7px 0;width:100%;float:none}
body.gridmode .menu-gridmode{margin-right:0;}
body.home_page.gridmode .post{height:auto}
}
Kedua, cari kode <body> jika sudah ketemu letakkan kode java script dibawah ini tepat di bawah kode <body>
<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>
Ketiga, cari kode <div id='main-wrapper'> jika sudah ketemu letakkan kode berikut ini tepat dibawah kode <div id='main-wrapper'>
<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>
Keempat, cari kode </body> jika sudah ketemu letakkan kode berikut ini tepat diatas kode </body>
<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>
Terakhir, Save Template Anda.
Demikianlah tutorial saya terkait Cara Menambahkan Tombol Grid dan List Mode di Template Kompi Flexible. Semoga bermanfaat. Amin.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.