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 😁
