Membuat grid kategori di blogger

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat grid kategori keren di blogger

Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Grid kategori

Apa itu grid kategori? grid kategori merupakan suatu informasi mengenai kategori dalam tampilan grid, tanpa batas maksimal untuk menampilkan grid kategori tersebut

Landing page

Penggunaan grid kategori baiknya di terapkan untuk halaman landing page, jika kamu tidak mengetahui apa itu landing page? landing page adalah halaman khusus atau satu halaman khusus yang menampilkan informasi bisnis, produk, organisasi, atau hal lainnya dalam satu halaman tersebut

Support menu layout

Menariknya grid kategori produk ini, nantinya berfungsi pada menu layout alias menu tata letak alias mendukung fitur menu layout, sehingga kamu bisa mengedit gambar ataupun keterangan secara mudah tanpa harus ribet mengedit langsung pada source template

Contoh Tampilan

Jika kamu penasaran dengan contoh tampilan dari grid mode tersebut silahkan periksa menggunakan tombol di bawah ini ok

Periksa

Info: Bagaimana sobat dengan contoh tampilannya keren sekali yak

Cara pembuatan

Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai cara membuat grid kategori silahkan baca dan pelajari melalui artikel ini, dan ikuti setiap arahan yang admin jabarkan di bawah yak

Kode CSS

Langkah pertama seperti biasa, silahkan salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

.rahLKary{display:flex;justify-content:space-between;flex-wrap:wrap;;margin: 0 10px 25px;}
.rahLKary .widget{width:calc((100% - 75px) / 6);float:left;background:#ffffff;margin:8px 0;height:60px;overflow:hidden;display:flex;align-items:center;position:relative;border-radius:50px;box-shadow:-1px 4px 8px 0 rgb(0 0 0 / 0.10);transition:all .3s ease;}
a.paint-title{display:flex;width:100%;box-sizing:border-box;align-items:center;}
.rahLKary .widget:nth-child(1):hover{background:linear-gradient(190deg,#b9c7ff,#1573ff);box-shadow:0px 10px 15px -8px rgb(44 124 243 / 0.76);}
.rahLKary .widget:nth-child(2):hover{background:linear-gradient(190deg,#edc7c7,#fd4785);box-shadow:0px 10px 15px -8px rgb(255 65 65 / 0.76);}
.rahLKary .widget:nth-child(3):hover{background:linear-gradient(190deg,#e8fff5,#0fbc9e);box-shadow:0px 10px 15px -8px rgb(37 195 167 / 0.76);}
.rahLKary .widget:nth-child(4):hover{background:linear-gradient(190deg,#fddbff,#af3fff);box-shadow:0px 10px 15px -8px rgb(182 76 255 / 0.75);}
.rahLKary .widget:nth-child(5):hover{background:linear-gradient(190deg,#ffe8a0,#fd7900);box-shadow:0px 10px 15px -8px rgb(253 130 13 / 0.75);}
.rahLKary .widget:nth-child(6):hover{background:linear-gradient(190deg,#ecf0ff,#4d94ff);box-shadow:0px 10px 15px -8px rgb(91 156 255 / 0.75);}
.rahLKaryimg{position:relative;display:block;overflow:hidden;width:40%;margin:0;}
.rahLKaryimg img{position:relative;display:block;height:40px;width:40px;border-radius:50%;object-fit:cover;margin:0 0 0 6px;padding:6px;}
.rtl .rahLKaryimg img{margin:0 6px 0 0;}
.rtl .rahLKaryTl h2{margin:0 0 0 10px;}
#rahImage1 .rahLKaryimg img{background:rgb(0 114 255 / 13%)}
#rahImage2 .rahLKaryimg img{background:rgb(255 0 0 / 13%)}
#rahImage3 .rahLKaryimg img{background:rgb(0 255 96 / 23%)}
#rahImage4 .rahLKaryimg img{background:rgb(164 0 255 / 13%)}
#rahImage5 .rahLKaryimg img{background:rgb(255 125 0 / 23%)}
#rahImage6 .rahLKaryimg img{background:rgb(0 114 255 / 13%)}
.rahLKaryTl{position:relative;display:block;width:calc(60% - 0px);padding:0;}
.rahLKaryTl h2{display:block;line-height:18px;height:18px;overflow:hidden;font-family:'Cairo',Arial,sans-serif;color:#3e3e3e;font-size:13px;text-align:center;text-transform:capitalize;margin: 0 10px 0 0;}
.paint-title:hover .rahLKaryTl h2{color:#fff;}@media screen and (max-width:880px){.rahLKary .widget{width:calc((100% - 38px) / 3);}}@media screen and (max-width:640px){.rahLKary .widget{width:calc((100% - 6px) / 2);}.rahLKary{margin:0 10px 20px;}}

Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya silahkan salin kode HTML di bawah ini kemudian di bawah tag kode penutup </b:section>

]]></b:skin>

<b:section class='rahLKary cool-53' id='rahLKary' maxwidgets='5' name='Featured Category' showaddelement='no'>
<b:widget id='rahImage1' locked='true' title='Education' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEh12Y1jMFMKThUnenvVtrudE2UkRMdC1WBEnh1vIyhZAfjX3Yk4C-2n6yrpmJJkU_tvmsuhEbRPEALlz9lvQtokMujw5txHeP0s5gbJFnwQi_9GYo7sD5yhxb3e3X8qMQ-R4wA1z5_TkB1JbG0_o_kpBHk6pGSX3nwcLaZitE2WYMeo6caQImSE1gg2Qw</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='rahLKaryimg'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='rahLKaryTl'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='rahImage2' locked='true' title='News Updates' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEhZKuOJ1oXuLBcgZi_o_n46sYClAVCZI6vPWlE6PmKT5ZGCxLYdzsC0LzS2KO5a0fBtvUZDo-O6kbGeBSu7FDFppEdYWHt8XiVUiE6rMah8a1l7oDv6cfHDrhslGjhyO_TADVMiYblrHymyHVLAzsHIs-8QkKNPkOtZBq_XZJNULyqvSeun3nth_QwD7w</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='rahLKaryimg'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='rahLKaryTl'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='rahImage3' locked='true' title='Game' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEjvA06y6Ihb7f3JCvClhQ0uzJSOguGJVtDbyyM2J4d9jG_yHigfohNPpmsKS5S81UNSwxM9Q1m4_ER4OE41xK77PDYKJAG4ke4pSa2FxFyeT3isaKnlu1GK6DUnd9-IaHYFOJK859_znGRZLlxpAlcOES4_hg7x69-Kw9AyuY6GyhIawvMZ6TEImgH2nw</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='rahLKaryimg'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='rahLKaryTl'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='Image4' locked='true' title='Google Lab' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEh-u0bSsyZRJwFuEl2LCPCt8DhxzjLtyrsk84HjdAufg_5sHi-Y_NLp_KOpti-VndB9l5wi963fR2c-0Lji0G9Bpoi79grF2nbMzaBNe-_9Fch7CCOAuJtw59yRCCB2NTkq8YEH9OGBON-nybgchyTocMtY5ayMq0U2pbAgXPnQvRzBkbpMN5QJ-n22xw</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='rahLKaryimg'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='rahLKaryTl'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='rahImage5' locked='true' title='Experiments' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEg-WxNHaSHHoQESx64l9WsyrJ0s_5iR6Z_UkjoLWgdOe9pdim2q5rXicRw-r2oRcbKvraYdVq2QYMojRxYh3tKifiVjRpEo42HvETDDSitVsXq0a18Vjp89fiBALL1oXYhz-DGVzHpCHUMzRL65awFj8aMfwJY5BdibTwOoEKOW2C2E33Nc4y6Z4gG8Ig</b:widget-setting>
<b:widget-setting name='displayHeight'>128</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>128</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='rahLKaryimg'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='rahLKaryTl'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
<b:widget id='rahImage6' locked='true' title='Products' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEjlWPM9PkJjhPmVcjOHfvrL8icybfpUWhlImqGzFg2wDwi0Ex1tVkq1fzSvFdwi874qnIYrd1WAAcyprWj1CRfoBMM_GyU9aSduzJ4qfS6CaMESDKHkmEqnRmlbKTjE6hhn-B953fAB6ZQSqOzodCYFGHWvirT3mWhP9HwnxcjXw83i0v09EFq73ASdmQ</b:widget-setting>
<b:widget-setting name='displayHeight'>82</b:widget-setting>
<b:widget-setting name='sectionWidth'>150</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>82</b:widget-setting>
<b:widget-setting name='link'>/</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<a class='paint-title' expr:href='data:link'>
<div class='rahLKaryimg'>
<b:if cond='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
</div>
<div class='rahLKaryTl'><h2><data:title/></h2></div>
</a>
</b:includable>
</b:widget>
</b:section>

Info: Kemungkinan tag kode penutup </b:section> tersebut sangat banyak, silahkan tentukkan sesuai keinginan kamu aja, karena di mana kamu meletakkannya maka tampilan tabel kategori tersebut akan tampil

Penjelasan

Mengenai kode HTML jika kamu salah dalam menaruh kode maka akan muncul notif error saat kamu menyimpan template, namun jika benar dalam meletakkan kode tampilan tabel kategori akan muncul sesuai peletakan kode, misal kamu menaruh di bawah tag kode penutup </b:section> di footer maka tampilan pun akan muncul di footer, sehingga kamu harus pandai menentukan di mana tampilan seharusnya tampil, semoga bermanfaat