Codepelajar – product post adalah artikel blog yang secara khusus dibuat untuk mempromosikan dan menjual produk Anda kepada pembaca. Ini berarti, artikel tersebut akan berfokus pada manfaat, fitur, dan keunggulan produk secara rinci. Dalam product post, Anda akan memiliki kesempatan untuk menggambarkan produk secara menyeluruh dan memberikan informasi yang berguna kepada calon pembeli.
Cara Membuat Product Post Blogspot
Buka Blogspot > tema > edit html salin CSS di bawah ini dan tempel di atas kode ]]></b:skin> atau code di atas </style>
• • •
/* css untuk post produk by code pelajar */
.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}
• • •
Salin kode dibawah ini dan tempatkan apda postingan atau halaman yang ingin ditampilkan produknya
• • •
<!-- ============= 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>
• • •
Edit bagian yang diperlukan dan sesuaikan dengan produk yang akan dijual agar lebih menarik pelanggan
Artikel ini sangat cocok jika dikaitkan dengan https://codepelajar.com/2023/09/01/formulir-order-whatsapp-dan-email/
Oke mungkim segitu saja yang dapay saya sampaikan semoga artikel ini dapat bermanfata bagi Anda, terimakasih sudah berkunjung.
