For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat tabel kategori produk di blogger

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 + &quot;_img&quot;' 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 + &quot;_img&quot;' 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 + &quot;_img&quot;' 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 + &quot;_img&quot;' 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 + &quot;_img&quot;' 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 + &quot;_img&quot;' 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



Blogging guide Book
Best Digital Marketing Course/SEO Optimization free to use and implement on your website easily.
Marketing Development
Free Online Marketing Curriculum Development that you can directly adapt and execute on your website.
Link Building
Inexpensive Link Building Curriculum Creation that you can readily modify and install on your website.
On-page SEO
The technique of contribute towards the development web pages in search engines in order to rank
Off-page SEO
The practice of supporting the growth of web pages in search engines to something in promote increased
Affiliate Product
Even if you don't have your own products to sell, there are 7 steps to follow to started selling online.


About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.