Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat Tabel harga produk responsif di blogger

views

Hello sobat IcloudZer yang baik hati sekarang ini admin akan memberikan informasi seputar 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 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 CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkan kodennya diatas kode ]]></b:skin>

.rah-all-themes{overflow:hidden}
.rah-all-themes li{transition:all 0.31s ease 0s;float:none;width100%;box-sizing:border-box;margin:0 1.6% 0.8% 1.6%;list-style:none;background-color:#fefefe;border-radius:4px}
.rah-all-themes li:hover{box-shadow:0 0 8px rgba(0,0,0,.15)}.rah-all-themes li img{border-radius:4px 4px 0 0}.rah-external.rah-text::after{content:"\f08e";font-family:FontAwesome;margin:0 0 0 5px;font-weight:300;font-size:12px}
h2 .rah-licensi{text-align:center;color;#f80000;margin:buttom:5px;}.rah-description{padding:5px 15px 15px 15px}.rah-description h2{font-size:14px!important;overflow:hidden;}
.rah-description h2 a{color:#555}
.rah-description h2 a:hover{text-decoration:underline!important}.rah-tag a,.rah-tag{color:#999;font-weight:300;font-size:12px}
.rah-price1{color:#ff002b;font-size:16px;font-weight:700;margin:10px 0}.rah-live-more{font-size:13px;font-weight:700;overflow:hidden}
.rah-preview a,.rah-readmore a{background-color:#f80000;border-radius:3px;box-shadow:0 2px 0 #f80000;color:#fff;margin:1%;display:block;padding:5px;text-align:center;width:47%;box-sizing:border-box}.rah-preview a:hover,.rah-readmore a:hover{opacity:.85}
.rah-preview a{float:left}.rah-readmore a{float:right}.rah-title-shop{padding:10px 15px;margin-top:10%}
@media only screen and (max-width: 1200px) {
.rah-all-themes{margin:0 10px}
.rah-all-themes li{float:none;margin:0 0 20px 0}.rah-title-shop{padding:10px}}

Info: Atau kamu juga bisa menggunakan tag kode <style>

Kode HTML

Langkah selanjutnya kamu bisa menyalin lagi kode HTML dibawah ini kemudian kamu bisa meletakkan sesuai keinginan kamu aja

<h2 class="rah-licensi" id="mscontent">Responsif by Icloudice </h2>
<ul class="rah-all-themes">
<li> <a href="/"> <img class="rahShop" alt="Template Blogger icloudice Terbaru 2021" src="gambar_barang"/> </a> <div class="rah-description"> <h2> <a href="url_barang"> Icloudice.com </a> </h2> <div class="rah-tag"> <a href="/"> News - Magazine <i> by Icloudice </i> </a> </div> <div class="rah-price1"> Rp100,000 </div> <div class="rah-live-more"> <span class="rah-preview"> <a class="rah-external rah-text" href="/" rel="external"> Preview </a> </span> <span class="rah-readmore"> <a href="/"> Read More </a> </span> </div> </div> </li> </ul>

Info: Atau kamunya bisa bisa menggunakan menu Add Widget pada menu Layout diblogger, atau juga bisa meletakkannya didalam artikel blog

Kode Javascript

Langkah selanjutnya adalah kamu bisa menyalin kode Javascript dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>

<script type="text/javascript">
   /*<![CDATA[*/
$(window).rah-inner();});$(document).ready(function(){$('#mscontent').attr('style','display: inline-block !important;visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 12px!important; color: #161617!important').html('Created with <i style="color:#161617;-webkit-animation: icloudiceRing 5s 0s ease-in-out infinite; -webkit-transform-origin: 50% 4px; -moz-animation: icloudiceRing 6s 0s ease-in-out infinite; -moz-transform-origin: 50% 4px; animation: icloudiceRing 6s 0s ease-in-out infinite; transform-origin: 50% 4px;" class="fa fa-heart"></i> by <a href="https://icloudice.com" style="visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 13px!important; color: #161617!important;font-weight: 500!important;">Icloudice</a>');setInterval(function(){if(!$('#mscontent:visible').length)window.location.href='https://icloudice.com'},3000)}); /*]]>*/</script>

Sebagai informasi: Fungsi dari dari kode javascript diatas adalah untuk menyetabilkan performa dari border tabel harga produk diblogger tersebut

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 😁

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

<h2 class="rah-licensi" id="mscontent"> Responsif by Icloudice </h2>
<ul class="rah-all-themes">
<!-- Salin kode nya 👇 --><li>
<a href="/">
<img class="rahShop" alt="Template Blogger Report9 Terbaru 2021" src="gamabr_barang"/>
</a>
<div class="rah-description">
<h2>
<a href="url_barang">
Icloudice.com
</a>
</h2>
<div class="rah-tag">
<a href="/">
News - Magazine
<i>
by Icloudice
</i>
</a>
</div>
<div class="rah-price1">
 Rp100,000
</div>
<div class="rah-live-more">
<span class="rah-preview">
<a class="rah-external rah-text" href="/" rel="external">
Preview
</a>
</span>
<span class="rah-readmore">
<a href="/">
Read More
</a>
</span>
</div>
</div>
</li>
<!-- Kode yang harus disalin and -->
<!-- Letakkan kodennya disini -->
</ul>
Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
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.