Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat post produk di blogger menggunakan css dan html dengan mudah.
Pada artikel sebelumnya saya sudah membahas tentang cara membuat formulir order checkout menuju email dan cara membuat formulir order checkout menuju whatsapp supaya blog kalian semakin mirip toko online maka dari itu saya buatkan tutorial ini khusus buat kalian yang mau jualan tanpa toko online.
Dengan memasang post produk pada blog kalian sudah pasti ini akan mempermudah kalian dalam memasarkan produk kalian dan memudahkan user dalam memilih produk yang sudah kalian upload ke blog.
Tampilan dari post produk ini sangat menarik dan di tambahkan pula beberapa marketplace yang terkemuka di indonesia seperti shopee, bukalapak, tokopedia, dan lazada. Cara penggunaannya pun sangat mudah kalian hanya meng copy kode html lalu letakan di dalam artikel kalian.
Untuk melihat demonya silahkan klik tombol demo di bawah ini:
Baik bagi yang mau post produk di blogger yang saya bagikan ini bisa ikuti langkah - langkahnya di bawah ini:
Cara Membuat Post Produk di Blogger Menggunakan CSS dan HTML
- Silahkan masuk ke blogger kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>
/* css untuk post produk by telatngoding */
.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 silahkan simpan tema kalian
- Lanjut, salin kode HTML di bawah ini dan letakan di dalam artikel kalian ( tampilan HTML )
<!-- ============= GAMBAR PRODUK ================= -->
<div class='gambar-produk'>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWee3esX3uV98xUUvDNL5ywLL8-hxF6X-AtcpdU4OYqD2TyV_DuhPitMhEhUjUmFkgXF2vMVuRK_kVtdnwAVlqMSyp4CdI7Pd8xU6nC4OvnIYPOoHGt8e1ypXdEbzyp9MhY8FHxw1fdmU/s552/laptop1.jpg' title='judul produk'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWee3esX3uV98xUUvDNL5ywLL8-hxF6X-AtcpdU4OYqD2TyV_DuhPitMhEhUjUmFkgXF2vMVuRK_kVtdnwAVlqMSyp4CdI7Pd8xU6nC4OvnIYPOoHGt8e1ypXdEbzyp9MhY8FHxw1fdmU/s320/laptop1.jpg' title='judul produk'/></a>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijuHBDfL-TPXk1SnndYVSyYVk73Hx6QKPJjYZX_GMdJtJ2Cckij_i22VBV9XSUim9s7DudlukK-e9xV0832bWo87w5NakW1UXz2l6NoX0ar-6WFmZp2LfIEQSSZhQ4vqsn-bsoZDp2g3Q/s960/laptop2.jpg' title='judul produk'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijuHBDfL-TPXk1SnndYVSyYVk73Hx6QKPJjYZX_GMdJtJ2Cckij_i22VBV9XSUim9s7DudlukK-e9xV0832bWo87w5NakW1UXz2l6NoX0ar-6WFmZp2LfIEQSSZhQ4vqsn-bsoZDp2g3Q/s320/laptop2.jpg' title='judul produk'/></a>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi607bzEUGWfKiMZTmkgDtSuCVY8hXVgj9RuPODySwA_yIZOViAY4DehiOnS06Zo3XZA7Uv6JVPzK-dhAE00XOuUDMODDoGTbpYava0u1SISErP8B03GVBDKRKCF7CEAhwyH4xjjgn81Mk/s285/laptop3.jpg' title='judul produk'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi607bzEUGWfKiMZTmkgDtSuCVY8hXVgj9RuPODySwA_yIZOViAY4DehiOnS06Zo3XZA7Uv6JVPzK-dhAE00XOuUDMODDoGTbpYava0u1SISErP8B03GVBDKRKCF7CEAhwyH4xjjgn81Mk/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 ================= -->
<div style='text-align:center'>
<a class="wendy-btn-wa show-form" href="javascript:void" title="Beli Sekarang"><svg viewBox='0 0 24 24'><path d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z'/><line x1='12' x2='12' y1='2' y2='16'/></svg>Beli Sekarang</a></div>
<!-- ============= 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>Lihat baik - baik kode di atas, kode di atas sudah di pasang Tag Comment yang berguna untuk memudahkan dalam mengedit dan menyesuaikan produk kalian.
Baik sekian dulu postingan tentang Cara Membuat Post Produk di Blogger Menggunakan CSS dan HTML jika kalian masih bingung dalam pemasangannya silahkan berkomentar pada kolom komentar. Terimakasih sudah berkunjung dan semoga bermanfaat.