Membuat Layout Switch 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.

Apakah sudah bosan dengan tampilan desain template Blog yang biasa saja? Atau anda yang baru saja membuat Blog baru, lalu bingung mencari dan memilih desain template yang cocok ? Jujur saja, saya pribadi sejak awal membuat blog ini, hanya dalam satu hari saja sudah berkali-kali ganti template, dari versi gratisan sampai versi premium yang di bagikan secara gratis oleh beberapa mastah blogger, bisa dikatakan "plagiat desain", tapi alhamdullilah, bukan plagiat konten karya sesama Blogger?不

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.

Untuk membuat tampilan dan tombol Grid dan List Mode pada template kompi flexible, Anda bisa mengkuti tutorialnya berikut ini:

* Pertama, Login ke Blogger Anda, lalu menuju menu tema dan pilih Edit HTML

* Kedua, cari kode </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}
}


* Ketiga, cari kode <body>, lalu letakkan kode script dibawah ini tepat di bawah kode <body>


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


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


* Kelima, 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 NhiddayahBloggerSetting&&(NhiddayahBloggerSetting={tombolGridmode:!0}),0==NhiddayahBloggerSetting.tombolGridmode&&gridModeHide();
//]]></script>
</b:if>

* Terakhir, untuk menampilkan hanya judul artikel saja pada halaman homepage, cari kode:

.home_page .post .post-body{margin:0;padding:10px;position:relative}

Lalu, tambahkan kode: {display:none;}

Akan terlihat seperti baris kode CSS berikut ini:

.home_page .post .post-body{display:none;margin:0;padding:10px;position:relative}

* Selesai, Simpan template..