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>