Hello sobat IcloudZer kali ini admin akan berbagi informasi seputar blogging serta perkembangan dunia blogging saat ini, dalam membahas bagaiamana caranya membuat produk list diblogger, atau bagaiamana caranya membuat Tabel harga produk diblogger
Info: Jika kamunya sudah penasaran dengan pembahasan kita ini, yuk langsung aja kita mulai membahasnya bersama sama
List Produk
Apa sebenarnya list produk itu? Sebenarnya list produk ini bertujuan untuk membuat sebuah promosi dengan menampilkan keterangan pada suatu halaman didalam produk list ini, Kamu bisa menampilkan keterangan apapun dan promosi apaupun dengan menggunakan produk list ini
Contoh Tampilan
Admin juga akan memberikan sebuah contoh tampilan dari produk listnya agar kamu lebih yakin dengan pembahasan kita kali ini, berikut ini adalah contoh tampilan dari produk list tersebut
Harga Produk
$3
/Bulan
Icloudice.com
Read Review- Deskripsi Produk kamu
- Deskripsi Produk kamu
- Deskripsi Produk kamu
- Deskripsi Produk kamu
- Deskripsi Produk kamu
Info: Bagaiamana sobat IcloudZer dengan tampilan produknya keren sekali yak
Cara Pembuatan
Baiklah tanpa berlama lama lagi admin akan menjabarkan bagaiamana caranya membuat produk list diblogger, simak dan pelajari artikel ini hingga selesai agar bisa lebih paham ok
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian letakkan diatas kode ]]></b:skin>, berikut Kode CSS nya
.rah-product-deals{margin:0 auto;display:block;position:relative;widht:100%;max-width:970px;}
.rah-product-deals h4{font-size: 1.65em !important;margin:0 0 .25em!important;display:inline;font-family: 'Archivo Narrow', sans-serif;font-weight: 700;line-height: 1.2em;}
.post-body .rah-product-deals .rah-deal-desc {margin-left:5px;}
.rah-product-deals .rah-deal{background:#fff;box-shadow: 0 2px 9px 0 rgb(202 202 202 / 50%);border-radius: 8px;justify-content:space-between;margin-top:20px;position:relative;box-sizing:border-box;display:flex;align-items: center;padding:24px;}
/*.rah-deal .rah-deal-column{flex-direction: column;flex-wrap:wrap;justify-content: center;box-sizing:border-box;padding:24px 15px;display:flex;}*/
.rah-deal .rah-deal-column {display:block;}.rah-deal .rah-inLeft{
/* flex-basis:150px; */width:100%;max-width:170px;}.rah-deal .rah-inPrice{
/* flex-basis:110px; */padding:0 20px;width:100%;max-width:110px;}.rah-deal .rah-inCenter{flex-grow:2;}.rah-deal .rah-inRight{
/*flex-basis:160px;*/text-align:center}.rah-deal-column .rah-deal-thumb {display:flex;align-items: flex-start;}.rah-deal-column .rah-deal-thumb img {width:150px;height:auto; box-shadow:none}.rah-deal-column .rah-deal-button{display:none;background-color: #f80000;color: #fff!important;width:150px;height:40px;font-weight:700;border-radius:99em;display:flex;align-items:center;justify-content: center;background-image: linear-gradient(to top,rgba(255,255,25,.35),transparent);transition: all 400ms ease-in-out;text-decoration:none;margin:0 auto .75rem;}.rah-deal-column .rah-deal-price{display:flex;flex-direction: column;justify-content: center;align-items: center;text-align:center;color:#f80000;}.rah-deal-column .rah-deal-price .rah-start_text,.rah-deal-column .rah-deal-price .rah-per_text{font-size:15px;opacity:.76}.rah-deal-column .rah-deal-price .rah-price_text{font-size:200%;font-family: 'Archivo Narrow', sans-serif;color:#f80000;font-weight:700;margin:.25em auto;}.rah-deal-column .rah-deal-coupon{color:#6485f1;font-size:76%;font-weight: 700;line-height:1.2em;}.rah-deal ul{margin:.5rem 0 0;padding:0;list-style: none;}.rah-deal ul li{position:relative;padding-left: 25px;margin-bottom:.35em;}.rah-deal ul li:before {box-sizing: border-box;content: ' ';background-image: url(data:image/svg+xml;charset=utf,%3Csvg%20viewBox%3D%220%200%2012%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M2.97%2010.002l.848%201.011%208.061-9.61-.848-1.011-8.061%209.61zM0%206.462l2.97%203.54.848-1.012-2.97-3.54L0%206.46z%22%20fill%3D%22%231789d5%22%20fill-rule%3D%22evenodd%22%2F%3E%20%3C%2Fsvg%3E);background-repeat: no-repeat;background-position: center center;background-size: 12px 12px;font-size: 21px;display: inline-flex;width: 21px;height: 21px;position:absolute;top: 0;left: 0;}
@media screen and (max-width:768px){.rah-product-deals .rah-deal{flex-wrap: wrap;}.rah-deal .rah-deal-column {flex-grow: 2;flex-basis: 50%;}.rah-deal .rah-inRight {padding-top:20px;}}
@media screen and (max-width:480px){.rah-deal .rah-inCenter {padding-top:20px;padding-bottom:20px;}.rah-deal .rah-inCenter, .rah-deal .rah-inRight {flex-basis:100%;padding-top:0;}.rah-deal-column .rah-deal-thumb {justify-content: center;}}
@media screen and (max-width:320px){
.rah-deal .rah-deal-column {flex-basis:100%;align-items: center;justify-content: center;}.rah-deal .rah-inLeft, .rah-deal .rah-inPrice {max-width:100%;}.rah-deal .rah-inPrice {padding-top: 20px;padding-bottom: 20px;}}Info: Kamu bisa menggunakan juga tag <style> untuk menjalankan kode CSS nya
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML berikut ini yang bertujuan untuk menampilkan tampilan dari produk list nya, berikut ini adalah Kode HTML nya
<div class="rah-product-deals">
<section class="rah-deal">
<div class="rah-deal-column inLeft">
<div class="rah-deal-thumb">
<img alt="Judul Gambar" src="link_gambar_anda"/>
</div>
</div>
<div class="rah-deal-column inPrice">
<div class="rah-deal-price">
<div class="rah-start_text">
Mulai dari
</div>
<div class="rah-price_text">
Rp50.000
</div>
<div class="rah-per_text">
/Bulan
</div>
</div>
</div>
<div class="rah-deal-column inCenter">
<div class="rah-deal-item">
<h4 class="rah-deal-title">
Icloudice.com
</h4>
<span class="rah-deal-desc">
<a href="link_produknya" target="_blank">
Read Review
</a>
</span>
</div>
<ul class="rah-deal-attributes">
<li title="Tuliskan deskripsi produk anda">
Tuliskan deskripsi produk anda
</li>
<li title="Tuliskan deskripsi produk anda">
Tuliskan deskripsi produk anda
</li>
<li title="Tuliskan deskripsi produk anda">
Tuliskan deskripsi produk anda
</li>
<li title="Tuliskan deskripsi produk anda">
Tuliskan deskripsi produk anda
</li>
</ul>
</div>
<div class="rah-deal-column inRight">
<a class="rah-deal-button" href="/" rel="nofollow noopener" target="_blank">
<span class="button__text">
Visit Site
</span>
</a>
<div class="rah-deal-coupon">
Tuliskan deskripsi produk lebih detail anda
</div>
</div>
</section>Info: Kamu bisa meletakkan Kode HTML diatas sesuai keinginan kamu aja, semisal kamu bisa meletakkannya pada mode "Add Widget" atau menaruhnya pada sidebar blog
Peletakkan Kode
Sebagai rekomendasi atau saran untuk meletakkan kode HTML nya kamu bisa mencoba mode Add Widget pada menu Layout, atau juga kamu bisa menggunakan Kode HTML tersebut pada atau didalam patingan Artikel saat kamu mengepost sebuah artikel pada mode HTML dan bukan pada mode Compose okay
Menampilkan produk lainnya
Jika kamu ingin menampilkan produk list lainnya kamu bisa menggunakan kode HTML yang telah admin sediakan diatas, dengan disertai isi keterangan produk yang berbeda beda okay
Langkah langkah
Admin juga akan membuatkan langkah langkah dalam membuat produk list ini okay
- Login keakun blogger kamu
- Pergi ke template kemudian pilih edit HTML
- Salin dan tempelkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>
- Selanjutnya kamu bisa menyalin kode HTML dibawah ini untuk menampilkan produk listnya
- Jika sudah mengikuti langkah langkah yang saya jabarkan diatas, dan kemudian kode juga sudah terpasang, kamu bisa menyimpan Template kamu tersebut, dan lihat bagaiaman tampilan drari produk listnya
.rah-product-deals{margin:0 auto;display:block;position:relative;widht:100%;max-width:970px;}
.rah-product-deals h3{display:none;text-align:center;margin:1.5em auto!important;color:#f80000!important;}
.rah-product-deals h4{font-size: 1.65em !important;margin:0 0 .25em!important;display:inline;font-family: 'Archivo Narrow', sans-serif;font-weight: 700;line-height: 1.2em;}
.post-body .rah-product-deals .rah-deal-desc {margin-left:5px;}
.rah-product-deals .rah-deal{background:#fff;box-shadow: 0 2px 9px 0 rgb(202 202 202 / 50%);border-radius: 8px;justify-content:space-between;margin-top:20px;position:relative;box-sizing:border-box;display:flex;align-items: center;padding:24px;}
/*.rah-deal .rah-deal-column{flex-direction: column;flex-wrap:wrap;justify-content: center;box-sizing:border-box;padding:24px 15px;display:flex;}*/
.rah-deal .rah-deal-column {display:block;}.rah-deal .rah-inLeft{
/* flex-basis:150px; */width:100%;max-width:170px;}.rah-deal .rah-inPrice{
/* flex-basis:110px; */padding:0 20px;width:100%;max-width:110px;}.rah-deal .rah-inCenter{flex-grow:2;}.rah-deal .rah-inRight{
/*flex-basis:160px;*/text-align:center}.rah-deal-column .rah-deal-thumb {display:flex;align-items: flex-start;}.rah-deal-column .rah-deal-thumb img {width:150px;height:auto; box-shadow:none}.rah-deal-column .rah-deal-button{display:none;background-color: #f80000;color: #fff!important;width:150px;height:40px;font-weight:700;border-radius:99em;display:flex;align-items:center;justify-content: center;background-image: linear-gradient(to top,rgba(255,255,25,.35),transparent);transition: all 400ms ease-in-out;text-decoration:none;margin:0 auto .75rem;}.rah-deal-column .rah-deal-price{display:flex;flex-direction: column;justify-content: center;align-items: center;text-align:center;color:#f80000;}.rah-deal-column .rah-deal-price .rah-start_text,.rah-deal-column .rah-deal-price .rah-per_text{font-size:15px;opacity:.76}.rah-deal-column .rah-deal-price .rah-price_text{font-size:200%;font-family: 'Archivo Narrow', sans-serif;color:#f80000;font-weight:700;margin:.25em auto;}.rah-deal-column .rah-deal-coupon{color:#6485f1;font-size:76%;font-weight: 700;line-height:1.2em;}.rah-deal ul{margin:.5rem 0 0;padding:0;list-style: none;}.rah-deal ul li{position:relative;padding-left: 25px;margin-bottom:.35em;}.rah-deal ul li:before {box-sizing: border-box;content: ' ';background-image: url(data:image/svg+xml;charset=utf,%3Csvg%20viewBox%3D%220%200%2012%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M2.97%2010.002l.848%201.011%208.061-9.61-.848-1.011-8.061%209.61zM0%206.462l2.97%203.54.848-1.012-2.97-3.54L0%206.46z%22%20fill%3D%22%231789d5%22%20fill-rule%3D%22evenodd%22%2F%3E%20%3C%2Fsvg%3E);background-repeat: no-repeat;background-position: center center;background-size: 12px 12px;font-size: 21px;display: inline-flex;width: 21px;height: 21px;position:absolute;top: 0;left: 0;}
@media screen and (max-width:768px){.rah-product-deals .rah-deal{flex-wrap: wrap;}.rah-deal .rah-deal-column {flex-grow: 2;flex-basis: 50%;}.rah-deal .rah-inRight {padding-top:20px;}}
@media screen and (max-width:480px){.rah-deal .rah-inCenter {padding-top:20px;padding-bottom:20px;}.rah-deal .rah-inCenter, .rah-deal .rah-inRight {flex-basis:100%;padding-top:0;}.rah-deal-column .rah-deal-thumb {justify-content: center;}}
@media screen and (max-width:320px){
.rah-deal .rah-deal-column {flex-basis:100%;align-items: center;justify-content: center;}.rah-deal .rah-inLeft, .rah-deal .rah-inPrice {max-width:100%;}.rah-deal .rah-inPrice {padding-top: 20px;padding-bottom: 20px;}}Info: Kamu juga bisa menggunakan Tag <style> untuk menaruh kode CSS tersebut
<div class="rah-product-deals">
<section class="rah-deal">
<div class="rah-deal-column inLeft">
<div class="rah-deal-thumb">
<img alt="Judul Gambar" src="link_gambar_anda"/>
</div>
</div>
<div class="rah-deal-column inPrice">
<div class="rah-deal-price">
<div class="rah-start_text">
Mulai dari
</div>
<div class="rah-price_text">
Rp50.000
</div>
<div class="rah-per_text">
/Bulan
</div>
</div>
</div>
<div class="rah-deal-column inCenter">
<div class="rah-deal-item">
<h4 class="rah-deal-title">
Vultr
</h4>
<span class="rah-deal-desc">
<a href="link_produknya" target="_blank">
Read Review
</a>
</span>
</div>
<ul class="rah-deal-attributes">
<li title="Tuliskan deskripsi produk anda">
Tuliskan deskripsi produk anda
</li>
<li title="Tuliskan deskripsi produk anda">
Tuliskan deskripsi produk anda
</li>
<li title="Tuliskan deskripsi produk anda">
Tuliskan deskripsi produk anda
</li>
<li title="Tuliskan deskripsi produk anda">
Tuliskan deskripsi produk anda
</li>
</ul>
</div>
<div class="rah-deal-column inRight">
<a class="rah-deal-button" href="/" rel="nofollow noopener" target="_blank">
<span class="button__text">
Visit Site
</span>
</a>
<div class="rah-deal-coupon">
Tuliskan deskripsi produk lebih detail anda
</div>
</div>
</section>Info: Kamu bisa menggunakan mode Add Widget pada menu Layout
