Skip to main content

Recent Disqus

Click Here On Load Disqus

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

Cara Membuat Tombol Grid dan List Mode di Homepage Seperti Igniel.com
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


Demikianlah artikel tutorial terkait Cara Membuat Tombol Grid dan List Mode di Homepage Seperti Igniel.com di Template Viomagz. Semoga bermanfaat. Amin
Reactions
PERHATIAN:Jika anda mendownload di blog ini, maka anda akan di redirect terlebih dahulu ke laman Short Safelink untuk keamanan blog. Oleh karena itu jika terjadi error 404 maka terjadi kesalahan dalam klik di laman redirect atau terjadi refresh laman redirect. Untuk mengatasinya anda bisa mengulang kembali klik file yang akan anda download di blog ini. Dan Jika anda ingin bertanya atau bantuan bisa kontak kami dengan Klik Disini atau nomor berikut 089677337414 - Terima kasih.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar
TFGbRFL5YFd6TZXvTFXbTmA7YXzUZG0TPXbTCI==