Cara Membuat Widget Post Produk Toko Online Di Blog

Cara membuat widget post produk toko online di blog - Tutorial terpilih kali ini mengenai cara membuat membuat widget post produk toko online di blog. Kami membuat postingan tentang cara membuat widget post produk toko online di blog karena mungkin ada yang mencari informasi cara membuat widget post produk toko online dengan mudah di blog.

Tutorial cara membuat widget post produk toko online di blog bisa kalian pasang di blog mengunakan beberapa kode sederhana di bawah ini. Kode yang di butuhkan untuk memasang membuat widget post produk untuk toko online di blog hanya perlu copy paste dari postingan ini.

HTML CSS Untuk Post Produk Toko 0nline Di Blog

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.

Terimakasih sudah membaca artikel kami tentang Cara Membuat Widget Post Produk Toko 0nline Di Blog. Kami membuat postingan ini karena mungkin ada yang mencari informasi tentang Cara Posting Product Toko Online Platform Blogger Memasang Shopping Cart untuk Blog Toko Online Cara Membuat Blog Toko Online Cara Membuat Toko Online dengan Blogspot Gratis Cara Membuat Widget Post Produk Toko 0nline Di Blog Smoga bermanfaat..