Membuat Layout Grid Dan List Mode
Membuat tampilan Grid dan List Mode, membuat blog menjadi berbeda dan terlihat lebih keren dibandingkan dengan desain template blog lain. Selain tampilan sangat baik, Grid dan List Mode juga mempengaruhi kecepatan loading blog menjadi lebih cepat.
Admin mau bercerita sebentar, bolehlah ya? Sebelum mengelola Blog ini, Nias Blog adalah punya saya juga yang sekarang menggunakan template desain versi Fletro Blogger Template Premium milik Jago Desain Blog yang sangat keren desainnya menurut saya, mungkin dan insya Allah kalau ada rejeki lebih akan beli template tersebut, pernah juga beli Taemplate Viomagz, desain buatan Mas Sugeng, hanya beberapa minggu pakainya, ganti lagi pakai Template LinkMagz super wuzz loadingnya. Sekarang pakai Template Premium Kompi Flexible v8.50 ini saja yang sudah dibeli dari salah satu mastah Blogger, Pak Adhy Suryadi.
Admin mau bercerita sebentar, bolehlah ya? Sebelum mengelola Blog ini, Nias Blog adalah punya saya juga yang sekarang menggunakan template desain versi Fletro Blogger Template Premium milik Jago Desain Blog yang sangat keren desainnya menurut saya, mungkin dan insya Allah kalau ada rejeki lebih akan beli template tersebut, pernah juga beli Taemplate Viomagz, desain buatan Mas Sugeng, hanya beberapa minggu pakainya, ganti lagi pakai Template LinkMagz super wuzz loadingnya. Sekarang pakai Template Premium Kompi Flexible v8.50 ini saja yang sudah dibeli dari salah satu mastah Blogger, Pak Adhy Suryadi.
</style> jika sudah ketemu letakkan kode CSS berikut ini tepat diatasnya (bagi yang tahu fungsi dari kode ini, bisa meletakkan kode tersebut sesuai keinginan):
/* Grid dan List Mode */
.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}
}
<body>, lalu letakkan kode 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>
<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>
</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 NhiddayahBloggerSetting&&(NhiddayahBloggerSetting={tombolGridmode:!0}),0==NhiddayahBloggerSetting.tombolGridmode&&gridModeHide();
//]]></script>
</b:if>
.home_page .post .post-body{margin:0;padding:10px;position:relative}{display:none;}
Akan terlihat seperti baris kode CSS berikut ini:
.home_page .post .post-body{display:none;margin:0;padding:10px;position:relative}
Posting Komentar
Komentar spam & rasis akan di hapus oleh Admin.