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

Membuat border harga produk responsif di blogger

Hello sobat IcloudZer yang baik hati sekarang ini admin akan memberikan informasi dunia blogging serta tips tips seputar penyempurnaan pada tampilan blog untuk mempercantik tampilan blog tersebut

Seperti sekarang ini admin akan membahas bagaiamana caranya membuat border produk atau tabel produk dengan tampilan keren di blogger

Info: Okay Bagi kamu yang sudah penasaran yuk langsung aja kita mulaikan pembahasannya

Border Produk

Sebenarnya admin juga pusing memberikan judul dari artikel kali ini, yang penting kode ini nantinya akan membuat suatu tampilan produk disertai dengan harga dan informasi lainnya bisa kamu tampilkan pada kolom Border tersebut

Fungsi

Sebenarnya sih fungsi dari Border produk ini apa sih? Okay kamunya jangan bimbang ya admin akan menjelaskan sedikit mengenai fungsi dari tabel harga produk di blogger ini!

Fungsi dari Border tabel harga produk ini bisa kamu gunakan untuk menampilkan suatu promosi dan didalamnya kamu bisa menampilkan informasi produk seperti gambar, deskripsi barang, harga, dan lainnya, so jika kamu menggunakannya mudah mudah mudahan bermanfaat lah, yang penting kamunya bersyukur aja sih, soalnya mungkin cuma Icloudice yang memberikan informasi seperti ini

Warning: Jika kita keluar sedikit dari tajuk pembahasan kita kali ini, mengapa sih iklan yang ditampilkan pada blog Icloudice sangat riweh sekali? hehehehe soalnya setiap konten yang admin berikan berkualitas premium, dan penghasilan blog itu didapat dari iklan, ya sudah pasti jika kamu ingin berterimakasih kamu bisa Lo mengklik ikannya okay 😁, jadi cayang deh Ama kamu hahaha, becanda kok, serius juga GPP

Cara pembuatan

Okay lanjut, tanpa berlama-lama lagi admin bakalan menjabarkan bagaiamana sih caranya membuat tabel harga produk yang keren diblogger, harap disimak secara baik dan benar ya agar tidak salah paham

Kode Javascript

Langkah pertama yang bisa kamu lakukan adalah silahkan salin kode Javascript dibawah ini kemudian kamu bisa meletakkannya diatas kode </head>

<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahProduct53.js'></script>

Sebagai informasi: Jangan sesekali mengubah ataupun mengedit kode entar tampilan dari border produknya tidak akan berfungsi

Kode HTML

Langkah selanjutnya kamu bisa menyalin lagi kode HTML dibawah ini kemudian kamu bisa menggunakan nya saat memposting artikel menggunakan mode HTML, atau sesuai keinginan kamu aja

<ul class="rahPtable">
<li>
 <a href="/">
<img alt="Template Blogger mirip xmlthemes" src="https://i.imgur.com/FIm8RDk.png"/>
 </a>
 <div class="rahPtable_desk">
<h2>
 <a href="#">
Template Blogger mirip xmlthemes.com
 </a>
</h2>
<div class="rahPtable_tag">
 <a href="https://www.xmlthemes.com/">
 Template blogger terlaris nomor 1
<i>
 lagi Diskon 50%
</i>
 </a>
</div>
<div class="rahPtable_price">
 Rp.153.000
</div>
<div class="rahPtable_btn">
 <span class="preview">
<a class="external text" href="https://themes.icloudice.com" rel="external">
 Preview
</a>
 </span>
 <span class="readmore">
<a href="https://wa.me/message/GP2QOWTKWGEVM1">
 Buy
</a>
 </span>
</div>
 </div>
</li>
</ul>

Info: Ataupin kamu bisa menggunakan menu Add Widget pada menu Layout diblogger, atau juga bisa meletakkannya didalam template blog, jika di mungkinkan, haha 😁

Penjelasan Kode

Bagaiamana jika kamu ingin menampilkan produk lebih dari satu, maka kamu bisa menyalin kode HTML dari tag kode <li sampai kode </li>, dan letakkan diatas kode </ul>, atau kamu bisa menggunakan kode seperti dibawah ini

<ul class="rahPtable">
<li>
 <a href="/">
<img alt="Template Blogger mirip xmlthemes" src="https://i.imgur.com/FIm8RDk.png"/>
 </a>
 <div class="rahPtable_desk">
<h2>
 <a href="#">
Template Blogger mirip xmlthemes.com
 </a>
</h2>
<div class="rahPtable_tag">
 <a href="https://www.xmlthemes.com/">
 Template blogger terlaris nomor 1
<i>
 lagi Diskon 50%
</i>
 </a>
</div>
<div class="rahPtable_price">
 Rp.153.000
</div>
<div class="rahPtable_btn">
 <span class="preview">
<a class="external text" href="https://themes.icloudice.com" rel="external">
 Preview
</a>
 </span>
 <span class="readmore">
<a href="https://wa.me/message/GP2QOWTKWGEVM1">
 Buy
</a>
 </span>
</div>
 </div>
</li>
<li>
 <a href="/">
<img alt="Template Blogger mirip xmlthemes" src="https://i.imgur.com/FIm8RDk.png"/>
 </a>
 <div class="rahPtable_desk">
<h2>
 <a href="#">
Template Blogger mirip xmlthemes.com
 </a>
</h2>
<div class="rahPtable_tag">
 <a href="https://www.xmlthemes.com/">
Template blogger terlaris nomor 1
<i>
 lagi Diskon 50%
</i>
 </a>
</div>
<div class="rahPtable_price">
 Rp.153.000
</div>
<div class="rahPtable_btn">
 <span class="preview">
<a class="external text" href="https://themes.icloudice.com" rel="external">
 Preview
</a>
 </span>
 <span class="readmore">
<a href="https://wa.me/message/GP2QOWTKWGEVM1">
 Buy
</a>
 </span>
</div>
 </div>
</li>
<li>
 <a href="/">
<img alt="Template Blogger mirip xmlthemes" src="https://i.imgur.com/FIm8RDk.png"/>
 </a>
 <div class="rahPtable_desk">
<h2>
 <a href="#">
Template Blogger mirip xmlthemes.com
 </a>
</h2>
<div class="rahPtable_tag">
 <a href="https://www.xmlthemes.com/">
Template blogger terlaris nomor 1
<i>
 lagi Diskon 50%
</i>
 </a>
</div>
<div class="rahPtable_price">
 Rp.153.000
</div>
<div class="rahPtable_btn">
 <span class="preview">
<a class="external text" href="https://themes.icloudice.com" rel="external">
 Preview
</a>
 </span>
 <span class="readmore">
<a href="https://wa.me/message/GP2QOWTKWGEVM1">
 Buy
</a>
 </span>
</div>
 </div>
</li>
<li>
 <a href="/">
<img alt="Template Blogger mirip xmlthemes" src="https://i.imgur.com/FIm8RDk.png"/>
 </a>
 <div class="rahPtable_desk">
<h2>
 <a href="#">
Template Blogger mirip xmlthemes.com
 </a>
</h2>
<div class="rahPtable_tag">
 <a href="https://www.xmlthemes.com/">
Template blogger terlaris nomor 1
<i>
 lagi Diskon 50%
</i>
 </a>
</div>
<div class="rahPtable_price">
 Rp.153.000
</div>
<div class="rahPtable_btn">
 <span class="preview">
<a class="external text" href="https://themes.icloudice.com" rel="external">
 Preview
</a>
 </span>
 <span class="readmore">
<a href="https://wa.me/message/GP2QOWTKWGEVM1">
 Buy
</a>
 </span>
</div>
 </div>
</li>
<li>
 <a href="/">
<img alt="Template Blogger mirip xmlthemes" src="https://i.imgur.com/FIm8RDk.png"/>
 </a>
 <div class="rahPtable_desk">
<h2>
 <a href="#">
Template Blogger mirip xmlthemes.com
 </a>
</h2>
<div class="rahPtable_tag">
 <a href="https://www.xmlthemes.com/">
Template blogger terlaris nomor 1
<i>
 lagi Diskon 50%
</i>
 </a>
</div>
<div class="rahPtable_price">
 Rp.153.000
</div>
<div class="rahPtable_btn">
 <span class="preview">
<a class="external text" href="https://themes.icloudice.com" rel="external">
 Preview
</a>
 </span>
 <span class="readmore">
<a href="https://wa.me/message/GP2QOWTKWGEVM1">
 Buy
</a>
</span>
</div>
</div>
</li>
</ul>

Contoh Tampilan

Nah untuk mengurangi rasa penasaran kamu, baikah sekarang admin akan memberikan contoh tampilan dari border tabel harga produk diblogger tersebut, berikut ini contoh tampilannya

Info: Okay sobat bagaiamana dengan contoh tampilannya keren bukan, hehehe 😁

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
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.