Membuat produk detail untuk menampilkan iklan kustom di blogger

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat produk detail atau post produk detail di blogger

Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Produk detail

Apa sih produk detail itu? produk detail berfungsi untuk menampilkan produk dalam bentuk text beserta harga dan juga keterangan alias menampilkan produk dalam tampilan simple namun elegan jika di terapkan pada website kamu sobat, sedangakan pembuatan produk detail ini hanya menggunakan kode CSS saja sobat

Contoh Tampilan

Baiklah sobat jika kamu penasaran dengan bagaimana sih contoh tampilan dari produk post detail ini silahkan periksa dengan mengklik tombol di bawah ini ya sobat

Periksa

Info: Bagaimana sobat contoh tampilannya keren sekali yak ☺️

Cara pembuatan

Nah sekarang saatnya sobat saya akan menjabarkan mengenai bagaimana caranya membuat produk detail di blogger, silahka baca dan ikuti setiap arahan yang admin jabarkan di bawah ini

1. Langkah pertama silahkan login ke blogger menggunakan akun google anda
2. Selanjutnya sobat bisa pergi ke menu Theme atau Tema kemudian pilih menu Edit HTML
3. Langkah selanjutnya silahkan salin kode CSS di bawah ini kemudian taruh di atas kode ]]></b:skin>

/* Product detail by ICloudice.com */ 
.rahPdDet{display:flex;flex-wrap:wrap;gap:20px;font-size:1rem;line-height:1.4} .rahPdDet .p{flex:0 0 calc(50% - 10px);max-width:350px;padding:15px 20px;border-radius:4px;border:1px solid;background-color:#FFEBEE; transition:box-shadow .1s ease, transform .1s ease} .rahPdDet .p:hover{transform:translate(-4px,-4px);box-shadow:4px 4px #08102b} .rahPdDet .rahPdT{padding-bottom:10px; font-weight:500;font-family:'Fira Sans', sans-serif} .rahPdDet .rahPdT::after{content:attr(data-text);font-weight:400;font-size:small; display:inline-block;text-indent:4px;opacity:.6} .rahPdIc{display:flex;gap:10px;align-items:center} .rahPdIc >*{flex:0 0 calc(40% - 5px)} .rahPdIc .rahPdP{font:700 28px 'Fira Sans', sans-serif; color:#F44335} .rahPdIc .rahPdP::before{content:attr(data-text); font-size:small;margin-inline-end:2px} .rahPdIc .rahPdP i{display:block; font-style:normal;font-size:1rem; color:rgb(0 0 0 / 40%)} .rahPdIc .rahPdN{flex-grow:1} .rahPdIc .rahPdN li{display:flex;gap:4px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rahPdIc .rahPdN li::before{content:'-'} @media screen and (max-width:500px){.rahPdDet .p{flex-basis:100%}}.noList, .noList ul, .noList ol{list-style:none;margin:0;padding:0}.cInherit a{color:inherit} .cInherit.u a:hover{text-decoration:underline}.fontSm{font-size:smaller}.strike{text-decoration:line-through}

4. Jika sudah silahkan simoan template dan lanjutkan ke tahapan berikutnya
5. Nah agar tampilan dari produk detail tersebut muncul, silahkan gunakan kode HTML di bawah ini dan taruh di mana kamu ingin menampilkannya

<!--[ Produk Detail by iClouduce ]-->
<div class='rahPdDet cInherit'>
  <a class='p' href='https://wa.me/6285834306926?text=Silahkan%20isi%20data%20dibawah%20ini%0A%0AName%20:%0AAge%20:%0ACountry%20:%0ACity%20:%0AAddres%20:%0A%0AKak%20pengen%20beli%20template%20nya.....' target='_blank'>
    <div class='rahPdT' data-text='- Blogger theme'>ICloudice</div>
    <div class='rahPdIc'>
      <div class='rahPdP' data-text='Rp'>153rb <i class='strike'>185rb</i></div>
      <ul class='rahPdN noList fontSm'>
        <li>Full support 24 jam</li>
        <li>Fast Indexing</li>
      </ul>
    </div>
  </a>
</div>

Info: Jika bingung silahkan taruh kode HTML nya menggunakan fungsi Tambahkan Widget pada menu Tata letak dan pilih Tambahkan widget HTML

ICloudice

153rb 185rb

• Full support 24 jam
• Fast Indexing