For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat produk detail untuk menampilkan iklan kustom di blogger

Menampilkan iklan menggunakan produk detail, tampilkan iklan kustom anda didalam website

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

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>
  4. /* 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}
  5. Jika sudah silahkan simoan template dan lanjutkan ke tahapan berikutnya
  6. Nah agar tampilan dari produk detail tersebut muncul, silahkan gunakan kode HTML di bawah ini dan taruh di mana kamu ingin menampilkannya
  7. <!--[ 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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
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.
Site is Blocked
Sorry! This site is not available in your country.