Cara membuat produk list (responsif) diblogger

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

Visit Site

Tuliskan Keterangan Produk kamu disini

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

1. Login keakun blogger kamu
2. Pergi ke template kemudian pilih edit HTML
3. Salin dan tempelkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

.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

4. Selanjutnya kamu bisa menyalin kode HTML dibawah ini untuk menampilkan produk listnya

<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

5. 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