Follow us on Google News Follow Now!

Cara Membuat Post Produk di Blogger Menggunakan CSS dan HTML

Dengan memasang post produk pada blog kalian sudah pasti ini akan mempermudah kalian dalam memasarkan produk kalian dan memudahkan user dalam memilih
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

Cara Membuat Post Produk di Blogger Menggunakan CSS dan HTML

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:

Demo

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://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 ================= -->
<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.

Baca juga :

About the Author

someone who really likes writing articles and various info to you and hopefully useful

Posting Komentar

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.