join grup whatsapp Join

HTML CSS untuk post produk

html css untuk halaman post produk blogger, buat toko online mu sendiri dengan checkout via whatsapp dan email
HTML CSS untuk post produk

Hallo semua pada kesempatan kali ini saya akan membagikan HTML CSS untuk post produk untuk mempercantik tampilan toko online kalian.

pada postingan sebelumnya saya sudah pernah membagikan formulir order via whatsapp dan email di blogger. agar tampilannya semakin menarik dan lebih mirip dengan toko online maka itu saya buatkan post produk ini untuk kalian.

tutorial ini sebenarnya juga di reguest oleh ADI melalui via email, beliau mengirimkan sketsanya ke saya namun agak extrim coretannya jadi saya pakai fealing saja.

HTML CSS untuk post produk
reguest oleh ADI

jadi untuk kalian yang sudah pernah memasang atau yang belum pernah memasang script formulir order via whatsapp dan email di blogger yang saya bagikan beberapa waktu lalu, silakan kalian pasang ulang scriptnya, karena scriptnya sudah saya update agar bisa saling terhubung ke halaman post produk ini.

untuk demonya kalian bisa melihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

HTML CSS Untuk Post Produk

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

/* css untuk post produk by wendy code */
.gambar-produk{float:left;width:40%;margin:0 25px 0 0}
.produk-kanan{float:right;width:55%}
.gambar-produk img{width:100%;margin:15px 0;border-radius:5px;box-shadow:0 2px 8px 0 rgb(60 64 67 / 11%)}
.gambar-produk a:nth-child(n+2) img{width:35%!important;height:100px!important;object-fit:cover;float:left;margin-right:10px}
.deskripsi-produk{overflow:hidden;width:100%;padding:20px 0;border-top:1px solid #eee}
.status-produk{margin:10px 0 20px;font-size:13px;background:#f4f5f9;display:inline-block;color:#444;padding:3px 15px;border-radius:5px}
.produk-kanan #beli-sekarang{color:#fff;font-weight:600;padding:10px 25px;display:inline-block;border-radius:5px}
.input-field{position:relative;margin:15px 0}
.input-field textarea{font-size:15px;padding:15px 0 15px 15px;display:block;width:94%;border:1px solid #f4f5f9;border-radius:7px}
.input-field textarea:focus{outline:none}
.input-field textarea:focus{border:2px solid #f89000!important}
.produk-kanan #beli-sekarang{background:#f89000;text-decoration:none}
.produk-kanan #beli-sekarang:hover,.marketplace a:hover{opacity:.8}
.harga-produk #harga{color:#f89000;font-weight:700;font-size:25px}.harga-produk strike{opacity:.5}
.marketplace{margin:20px 0 30px; display:flex;flex-wrap:wrap; line-height:1.6em}
.marketplace > *{display:block}
.marketplace > small{width:100%; margin-bottom:10px}
.marketplace > a{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px; margin:0 8px 8px 0;border:1px solid #ddd;border-radius:3px}
.marketplace > a:last-of-type{margin-right:0}
.marketplace > a img{width:20px;height:20px;display:block}
@media screen and (max-width:768px){
.produk-kanan{width:100%;float:none}
.gambar-produk a:nth-child(n+2) img,.gambar-produk{width:100%;float:left}
}

/* table produk */
table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent}
table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}
table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0}
table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}
table tr:nth-child(2n+1) td{background-color:rgba(0,0,0,.01)}
.table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}

/* rating produk */
.rating-produk i.icon-star-angka{font-weight:400;font-size:12px;margin-left:5px;vertical-align:1px}
.rating-produk{padding:0;width:55%;float:left;box-sizing:border-box;margin-top:10px}
b.widget-rating{display:block;margin-bottom:10px}
i.icon-star,.icon-star{font-weight:400;font-style:normal;display:inline-block}
i.icon-star:before,.icon-star:before{content:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23ffc53e'/%3E%3C/svg%3E") no-repeat}
i.icon-star.silver:before,i.icon-star.silver:before{content:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23a9acad'/%3E%3C/svg%3E") no-repeat}

/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode table th,.darkMode table td{border-color:rgba(255,255,255,.1)}
.darkMode table{background-color:#1e1e1e;color:#fefefe}
.darkMode .input-field textarea,.darkMode .status-produk{border-color:rgba(255,255,255,.1);background:#2d2d30;color:#fefefe}

jika sudah silakan klik simpan, dan di bawah ini adalah kode html untuk halaman post produk kalian.

<!-- ============= GAMBAR PRODUK ================= -->
<div class='gambar-produk'>
<a href='https://1.bp.blogspot.com/-u89gx1q6IXY/YMIESySAl7I/AAAAAAAACw0/P6IRBEthPjQXAldPn8ND8EyBM7BWKelwwCNcBGAsYHQ/s552/laptop1.jpg' title='judul produk'><img src='https://1.bp.blogspot.com/-u89gx1q6IXY/YMIESySAl7I/AAAAAAAACw0/P6IRBEthPjQXAldPn8ND8EyBM7BWKelwwCNcBGAsYHQ/s320/laptop1.jpg' title='judul produk'/></a>

<a href='https://1.bp.blogspot.com/-Zb0gqlEfIqA/YMIETCPrEkI/AAAAAAAACw4/kM3dHf2mTEUf7rLbz7WqTcny3wIA4aBFgCNcBGAsYHQ/s960/laptop2.jpg' title='judul produk'><img src='https://1.bp.blogspot.com/-Zb0gqlEfIqA/YMIETCPrEkI/AAAAAAAACw4/kM3dHf2mTEUf7rLbz7WqTcny3wIA4aBFgCNcBGAsYHQ/s320/laptop2.jpg' title='judul produk'/></a>

<a href='https://1.bp.blogspot.com/-rRkTgEviFeI/YMIES3xLqAI/AAAAAAAACww/oe64D2ob0IYBttqo2FCVsMqZpaPUc7fFgCNcBGAsYHQ/s285/laptop3.jpg' title='judul produk'><img src='https://1.bp.blogspot.com/-rRkTgEviFeI/YMIES3xLqAI/AAAAAAAACww/oe64D2ob0IYBttqo2FCVsMqZpaPUc7fFgCNcBGAsYHQ/s0/laptop3.jpg' title='judul produk'/></a>
  
</div>
<!-- ============= GAMBAR PRODUK ================= -->
<div class='produk-kanan'>
<!-- ============= STATUS PRODUK ================= -->  
<div class='status-produk'>Promo</div>
<!-- ============= STATUS PRODUK ================= --> 
<!-- ============= HARGA PRODUK ================= -->
<div class='harga-produk'>
<strike>Rp.4.500.000</strike><br/>
<span id='harga'>Rp.3.000.000</span>
</div>
<!-- ============= HARGA PRODUK ================= -->
<!-- ============= RATING PRODUK ================= -->
<span class='rating-produk'>
<b class='widget-rating'>    
<i class='icon-star'></i>
<i class='icon-star'></i>
<i class='icon-star'></i>
<i class='icon-star'></i>
<i class='icon-star silver'></i>
<i class='icon-star-angka'>4.0</i></b>
</span>
<!-- ============= RATING PRODUK ================= -->
<!-- ============= CATATAN PEMBELI ================= -->
<div class='input-field'>
<textarea id='catatan' maxlength='100' placeholder='Catatan'></textarea>
</div>
<!-- ============= CATATAN PEMBELI ================= -->
<a href='javascript:void' class='tombol-bukatutup' id='beli-sekarang' title='Beli Sekarang'>Beli Sekarang</a>
<!-- ============= MARKETPLACE ================= -->
<div class='marketplace'>
<small>atau Belanja melalui '<b>Market Place</b>' favorit anda :</small>
<a title='Tokopedia' href='#' target='_blank' rel='noopener'>
<img src='https://cdn.statically.io/favicons/tokopedia.com'></a>
<a title='Bukalapak' href='#' target='_blank' rel='noopener'>
<img src='https://cdn.statically.io/favicons/bukalapak.com'></a>
<a title='Shopee' href='#' target='_blank' rel='noopener'>
<img src='https://cdn.statically.io/favicons/shopee.co.id'></a>
<a title='Lazada' href='#' target='_blank' rel='noopener'>
<img src='https://cdn.statically.io/favicons/lazada.co.id'></a>
</div>
<!-- ============= MARKETPLACE ================= -->
</div>
<!-- ============= DESKRIPSI PRODUK ================= -->
<div class='deskripsi-produk'>
<h3>Deskripsi Produk</h3>
<!-- ============= TABLE PRODUK ================= -->
<table cellpadding='0' cellspacing='0' style='text-align: left;'>
<tbody>
<tr><td><b>Stok</b></td> <td>3889</td></tr>
<tr><td><b>Merek</b></td> <td>Tidak Ada Merek</td></tr>
<tr><td><b>Dikirim Dari</b></td> <td>Jakarta Barat DKI</td></tr>
<tr><td><b>Ukuran</b></td> <td>38 - 42</td></tr>
<tr><td><b>Warna</b></td> <td>Hitam, Army</td></tr>
</tbody>
</table>
<!-- ============= TABLE PRODUK ================= -->
<!-- tuliskan deskripsi produk kalian di sini-->
</div>

pada kode di atas sudah saya beri tag comment jadi harusnya kalian akan paham gimana cara editnya untuk menyesuaikan produk kalian, namun jika ada pertannya silakan tinggalkan komentar di bawah ini.

ok sekian HTML CSS untuk post produk yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

14 komentar

  1. Mas request cara membuat tombol download pop up yg bisa disisipkan iklan
    1. Kaya gimana itu mas? Ada contohnya gk
    2. Idnxmus.com template can you share for our blog
    3. I never share a template if it's not mine
  2. Seperti digambar ini mas
    https://1.bp.blogspot.com/-LQt2MiEdpYM/YMMTFiV6pbI/AAAAAAAACDc/oVdhHz3IEBYVgcFTcjdZJoXsCWjl1UAQgCNcBGAsYHQ/s1080/IMG_20210611_153712.jpg
    1. Melanggar kebijakan adsanse itu mas, bisa kena banned kalau pasang iklan seperti itu
    2. Kalo iklan IMGID gak apa2?
    3. Sama aja mas, iklan itu tidak boleh di buat pop up gitu
  3. Bro please, I'm using snapnews v3 template, can you help me with the html post code for the "products" posts?

    1. this can be used by all templates, the tutorial on this blog is not only for 1 template
  4. mas, untuk tombol beli sekarangnya biar muncul form, pakai apa ya?
    1. Ini hanyalah tampilan saja utk fungsi silakan kunjungi post sebelumnya, link sudah di berikan di atas jd bisa di baca dari awal
  5. kenapa ya gan malah postingannya kebawah ga tertata gitu berantakan, gimana cara rapihin ya?
    1. iya kak, karena widget gini tidak 100% bakal rapih di setiap template, jd bisa d rapihkan dengan inspek element, biasanya hanya perlu menyesuaikan margin padding nya aja


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english