Cara Membuat Tombol Grid dan List Mode di Homepage Seperti Igniel.com

www.azid45.web.id - Cara Membuat Tombol Grid dan List Mode di Homepage Seperti Igniel.com. Pada kesempatan kali ini saya akan share membuat tombol grid mode dan list mode di homepage yang digunakan oleh Kak Igniel.

Sebenarnya bisa jadi tutorial ini sudah banyak yang share akan tetapi bagi saya kurang memuaskan pasalnya pada javascript masih di enyscript jadi saya tidak bisa memahami struktur kode sebagai bahan pembelajaran.

Oleh karena itu saya berusaha mencari kode java script yang tidak di enyscript dan pada akhirnya ketemu juga. Ada dua blog yang saya jumpai yaitu blog tutorial yang berbahasa Inggris, dan blog Indonesia yang menggunakan tombol grid mode ini akan tetapi scriptnya tidak terenyscript. (saya sengaja tidak menyebutkan blog tersebut karena lupa tautannya. hehehe)

Bagi saya ini adalah sebuah kebanggaan tersendiri dan dengan javascript yang tidak terenyscript ini Anda bisa memahami struktur kodenya dan bisa mengubahnya dan mempelajarinya sesuai keinginan Anda.

Baca juga: cara membuat tombol grid-list mode redisgn darkmode template LinkMagz

Baiklah untuk membuat tombol grid-list mode di homepage seperti igniel.com Anda sebelumnya Anda harus mengubah blog Anda menjadi Grid Post sebagai default posting di homepage. Jika Anda belum membuatnya Anda bisa menuju tutorial ini "Cara Mengubah List Post menjadi Grid Post di Homepage".

Secara umum tutorial ini menggunakan template Viomagz 3.3 jadi Anda jika ingin membuat sesuai tutorial ini akan tetapi Anda tidak menggunakan template Viomagz teresebut Anda bisa menyesuaikakn kode CSS-nya dengan bantuan inspect. Kalau belum mengetahui kinerja inspect Anda bisa simak "7 Manfaat Inspect Element Untuk Web Developer" pada blog https://www.tukangredesign.com

Membuat tombol grid-list mode di homepege seperti igniel.com pada template Viomagz

Jika blog Anda sudah dijadikan default Grid Post Anda bisa simak tutorial dibawah ini:

Pertama, login Blogger

Kedua, menuju menu Tema - Edit HTML

Ketiga, letakkan kode CSS berikut ini tepat di akhir  kode Grid Post  "/*POST GRID*/" yang sudah Anda buat.

/** s-view **/
.s-view{text-align:left;padding:10px;background:#588be4;border-radius:5px;margin-bottom:10px;font-size:14px;color:#fff;box-sizing:border-box;width: 98%;transition: all .5s ease;}
.s-view svg {fill:#fff;width:22px;height:22px;margin-right:7px;vertical-align:-7px;}
.s-view .s-btn{display:inline-block;margin-right:5px;padding:0px 5px 0px 26px;background-color:#fff;color:#657786;border-radius:3px;border:1px solid rgba(0,0,0,0.1);cursor:pointer;font-weight:500;}
.s-view #grid {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3' fill='%23657786'/%3E%3C/svg%3E");
background-repeat: no-repeat;
float:right;
}
.s-view #list {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z' fill='%23657786'/%3E%3C/svg%3E");
background-repeat: no-repeat;
float:right;
}
.s-view .s-btn.active{border:transparent;background:transparent;color:#fff}
.s-view #grid.active {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3' fill='%23fff'/%3E%3C/svg%3E");
}
.s-view #list.active {
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z' fill='%23fff'/%3E%3C/svg%3E");
}
@media screen and (max-width:800px) {
.s-view {
width: 100%;
}
}

/** LIST MODE **/
.blog-posts.list .post-outer{width:100%;height:auto;padding-bottom:10px}
.blog-posts.list .post-outer .post{height:auto;margin:0}
.blog-posts.list .post-outer .img-thumbnail{float:left;width:40%;padding-bottom:0;height:auto}
.blog-posts.list h2.post-title{float:right;text-align:left;width:60%;margin-bottom:0;position:absolute}
.blog-posts.list .post-outer .post .post-bottom{width:60%;right:0;bottom:-5px}
.blog-posts.list .post-info.info-1{width:60%;text-align:left;margin-right:-10px;right:0;bottom:0}
@media screen and (max-width:480px) {
.blog-posts.list .post-outer .img-thumbnail {
padding-top: calc(30% - 22px);
border-radius:0px;
height:15px;
}
.blog-posts.list .post-outer {
padding-bottom: 7px;
margin: 0;
}
}
@media screen and (max-width:320px) {
.blog-posts.list .post-info.info-1{display:none;}
}

KETERANGAN

Tujuan peletakan ini adalah agar template tidak berantakan. Kurang lebih peletakkannya seperti dibawah ini

@media screen and (max-width:320px) {
.index .blog-posts .post-outer{width:100%;height:auto;float:none}
.index .post{margin-bottom:0}
.index .info-1{position:relative;}
} Ini kode akhir grid post

/** s-view **/ ini kode awal tombol grid-list mode
.s-view{text-align:left;padding:10px;background:#588be4;border-radius:5px;margin-bottom:10px;font-size:14px;color:#fff;box-sizing:border-box;width: 98%;transition: all .5s ease;}
.s-view svg {fill:#fff;width:22px;height:22px;margin-right:7px;vertical-align:-7px;}

Adapun untuk mengubah warnah bisa cek kode ini

background:#588be4 kode "#588be4" adala kode warna untuk background warna biru. Anda bisa mengubah kode tersebut sesuai kebutuhan

color:#fff kode "#fff" adalah kode warnah tulisannya (warna putih). Jika tidak sesuai Anda bisa menggantinya.

Keempat, cari kode <div class='latest-post-title'> jika sudah ketemu hapus saja kode seperti dibawah ini

<div class='latest-post-title'>
	<h2><b:switch var='data:blog.locale'><b:case value='id'/>Postingan Terbaru<b:default/>Latest Posts</b:switch></h2>
  </div>

Setelah itu tambahkan kode berikut ini

<b:if cond='data:view.isMultipleItems'>
<div class='s-view'>
<svg viewBox='0 0 24 24'><path d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/></svg>Artikel Terbaru!<span class='s-btn active' id='grid' onclick='sViewGrid()'>Grid</span><span class='s-btn' id='list' onclick='sViewList()'>List</span>
</div>
    </b:if>

Kelima, cari kode </body> dan letakkan kode java script berikut ini tepat diatas kode tersebut

<b:if cond='data:view.isMultipleItems'>
  <script>/*<![CDATA[*/
function sViewGrid(){
  document.getElementsByClassName('blog-posts')[0].classList.remove('list')
  document.getElementById('grid').classList.add('active')
  document.getElementById('list').classList.remove('active')
}
function sViewList(){
  document.getElementsByClassName('blog-posts')[0].classList.add('list')
  document.getElementById('grid').classList.remove('active')
  document.getElementById('list').classList.add('active')
}
/*]]>*/</script>
    </b:if>

Keenam, Save Template

Gimana mudah bukan?, kalo ada yang ditanyakan bisa menghubungi saja melalui FB Azid Zainuri.

Untuk demonya klik tombol dibawah ini

Demo

Demikianlah artikel tutorial terkait Cara Membuat Tombol Grid dan List Mode di Homepage Seperti Igniel.com di Template Viomagz. Semoga bermanfaat. Amin