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
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 + "_img"' 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 + "_img"' 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 + "_img"' 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 + "_img"' 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 + "_img"' 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 + "_img"' 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
Posting Komentar