Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat tabel kategori produk di blogger yang biasanya di tampilkan pada halaman landing page
Info: Baiklah sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Kategori produk
Kategori produk merupakan suatu tampilan yang menampilkan informasi lainnya dari ssuatu produk atau bisnis, dan membahas mengenai tabel kategori produk di blogger admin telah membahas beberapa tampilan yang berbeda semisal tabel daftar produk dan juga tabel harga produk, silahkan di periksa dan di pelajari lebih lanjut
Landing page
Biasanya tabel produk selalu di gunakan dan di tampilkan pada 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
Jika kamu memasang dan menerapkan tabel kategori produk ini, nantinya akan tampil dan muncul pada menu layout alias memutata 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 bagaimanakah contoh tampilan dari tabel kategori produk tersebut, silahkan periksa menggunakan tombol di bawah ini
Info: Bagaimana sobat dengan contoh tampilannya keren sekali yak
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin akan mulai membahas cara membuat tabel kategori produk di blogger, silahakan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini
Kode CSS
Seperti biasa silahkan salin kode CSS di bawah ini, kemudian letakkan di atas kode ]]></b:skin>
.rahTkary{display:flex;justify-content:space-between;margin:0 10px 25px;flex-wrap:wrap;}
.rahTkary .widget{width:calc((100% - 50px) / 3);float:left;background:#fffdfc;padding:0;margin:15px 0;overflow:hidden;position:relative;border-radius:14px;border:1px solid rgb(109 109 109 / 0.10);transition:all .3s ease;}
.rahTkaryimg a{position:relative;display:flex;height:120px;width:120px;margin:40px auto 15px;overflow:hidden;border:1px solid rgb(0 0 0 / 0.06);border-radius:70% 30% 30% 70% / 60% 40% 60% 40%;transition:.5s;box-shadow:0px 0px 6px 3px rgb(33 33 33 / 0.06);align-items:center;}
#Image8 .rahTkaryimg a{background: rgb(255 50 50 / 0.08);}
#Image9 .rahTkaryimg a{background: rgb(124 255 50 / 0.08);}
#Image10 .rahTkaryimg a{background: rgb(50 164 255 / 0.08);}
#Image11 .rahTkaryimg a{background: rgb(219 50 255 / 0.08);}
#Image12 .rahTkaryimg a{background: rgb(255 222 50 / 0.08);}
#Image13 .rahTkaryimg a{background: rgb(50 255 208 / 0.08);}
.rahTkaryimg img{position:relative;width:65%;height:65%;display:flex;object-fit:cover;text-align:center;border-radius:50%;margin:auto;justify-content:center;align-items:center;align-content:center;}
.rahTkaryimg a:hover{border-radius:50%;}
.rahTkaryTl{position:relative;border-radius:21px;width:80%;margin:0 auto;padding:3px 0;}
.rahTkaryTl h2{display:block;width:100%;line-height:18px;font-family:var(--title-font);font-size:17px;font-weight: 700;text-align:center;margin:10px 0;}
.rahTkaryTl h2 a{color:#3e3e3e;}
.rahTkaryimg a:hover,.rahTkaryTl h2 a:hover{opacity:0.8;}
.rahTkary-caption{position:relative;display:block;font-size:13px;font-weight:600;color:#3e3e3e;text-align:center;margin:0 10px 30px;opacity: 0.7;}.rahTkary .widget{width:calc((100% - 30px) / 3);margin:8px 0;}@media screen and (max-width:640px){.rahTkary .widget{width:100%}
.rahTkary{margin:0 10px;}}Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya silahkan salin lagi kode HTML di bawah ini kemudian letakkan di bawah tag kode penutup </b:section>
<b:section class='rahTkary rahcool-53' id='rahTkary1' maxwidgets='8' name='Featured Category' showaddelement='no'>
<b:widget id='Image8' locked='true' title='Blogging guide Book' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEjFaRO_6NNbpF98pPTT7W-sQAYUMw-3-GwiOj8P7gQM2gdEnfeeT6v3LDbFGhcJKgyGQJASkqCp7f2_vI7c_6LdYxZrdTTwB0adVf4ltv80q8CwQygMjoofdVAPFtCXuiHRaAhmSe5vN65UO1JlDW6ClSQb00IOnEUzRaoOJ46C0azD0ejAV8vuZFJSvQ=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</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'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>Best Digital Marketing Course/SEO Optimization free to use and implement on your website easily.</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='rahTkaryimg'><a expr:href='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'/></a></div>
<div class='rahTkaryTl'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='rahTkary-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image9' locked='true' title='Marketing Development' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEi1CteF3_knrz7n6EioTBLtr6clqd63vhBCT_ULnZ0Gkd1tZP_8TwhthZELFRJpmnDG26Yc2gFZITjraWfSOOk7V2tlUxS6-WsWJ938s2-bHdV0a8iiTJnJJxfegBK0NbVEaoD3bNKrVHBzwI0XGWM-Mvwm9UAUMnT7QfrAbTZMP_LndohOTUXQPdN5eg=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</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'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>Free Online Marketing Curriculum Development that you can directly adapt and execute on your website.</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='rahTkaryimg'><a expr:href='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'/></a></div>
<div class='rahTkaryTl'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='rahTkary-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image10' locked='true' title='Link Building' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEiu1lbTDSXwyTnvFImhSNDpbPzQ1b_1tgMkkhTfUdDOJS31VQWF9MINGklQeDaxcsMXSj0vMxkZNN_6EY4XZpwez6hqf38_OprCCrEpNo8Ekudte-u3TQJ0T4OJpghbPmuZAYLU7ENeFMJBe3Pu0kc6H1a2j1oLdC8uxz_5yFwNezPYddvxf6QfZzv_Fw=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</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'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>Inexpensive Link Building Curriculum Creation that you can readily modify and install on your website.</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='rahTkaryimg'><a expr:href='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'/></a></div>
<div class='rahTkaryTl'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='rahTkary-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image11' locked='true' title='On-page SEO' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEgMx_Dj2YUwXvKu4QSqEiw89lL6ptoDQG8weOAtle4UsbydvWmnzl-vwyvoRtqt4O372Ian75YtacvMybVKQVnpYiD0GBZ2iMawu_pHGLBmemiA1F2GtsP21F_1ZLCHiPyHyqAIHswy0E2eX5RKwTkfYy78KZiJrTArmuuBX9lIGqIfhxwbAU-wIDKfiA=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</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'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>The technique of contribute towards the development web pages in search enginesin order to rank</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='rahTkaryimg'><a expr:href='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'/></a></div>
<div class='rahTkaryTl'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='rahTkary-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image12' locked='true' title='Off-page SEO' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEh5WKcVb8zQqJnQLX-LA36Q0IIm-_5upuuv-YlmFGg2Jf3ou0bbd-OfrrijCskFYhF8x-wc8Yfc5qHtR7j73gIIzD6Nw8ovCc3LfkRc1mPfN8bDMDfLY-CnUd8Nuba-STkBs-kn4OJYBx9HCG2uw2E_mYzU452JgL_9Sgb-rMKLfXOvpto5mX4XGbK53Q=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</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'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'>The practice of supporting the growth of web pages in search engines to something in promote increased</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='rahTkaryimg'><a expr:href='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'/></a></div>
<div class='rahTkaryTl'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='rahTkary-caption'><data:caption/></div>
</div>
</b:includable>
</b:widget>
<b:widget id='Image13' locked='true' title='Affiliate Product' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEhu_ovZd5OEZgXWY9_eSwXndtP-M_c44UfFwpN0i3Ugruzd9i7ChN-Cd0Wr924TXThV4UBtJvr9Dcmy3sTrpO0Tt4ETbeOHV_jvq2oQsW1c6f-RDxOeVGiHOSWr4YanVkfVlerWayjbQpD5ClVGJOeCLeB54Z51WOSMTt16e8-Einbd0HQzjYs78nv6DQ=s96</b:widget-setting>
<b:widget-setting name='displayHeight'>96</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'>96</b:widget-setting>
<b:widget-setting name='link'>/search/</b:widget-setting>
<b:widget-setting name='caption'><![CDATA[Even if you don't have your own products to sell, there are 7 steps to follow to started selling online.]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'><b:include name='content'/></b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div class='rahTkaryimg'><a expr:href='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'/></a></div>
<div class='rahTkaryTl'><h2><a expr:href='data:link'><data:title/></a></h2></div>
<div class='rahTkary-caption'><data:caption/></div>
</div>
</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
Best Digital Marketing Course/SEO Optimization free to use and implement on your website easily.
Free Online Marketing Curriculum Development that you can directly adapt and execute on your website.
Inexpensive Link Building Curriculum Creation that you can readily modify and install on your website.
The technique of contribute towards the development web pages in search engines in order to rank
The practice of supporting the growth of web pages in search engines to something in promote increased
Even if you don't have your own products to sell, there are 7 steps to follow to started selling online.