Cara Membuat Postingan Kusus Produk di Blogspot

Kali ini saya akan membagikan salah satu desain tampilan contoh halaman produk jualan online kusus blogspot menggunakan CSS,HTML & JavaScript.

Langkah ini berguna untuk Anda yang ingin membuat halaman jualan didalam artikel blogspot agar terlihat lebih rapi dan keren.

Baca juga: Cara Membuat Postingan Produk Jualan Blogspot valid Scema Markup

Sebelum menuju langkah ini, Anda harus sudah paham sedikit tentang masalah kode CSS dan HTML untuk lebih mudah melakukannya.

Tampilan disini saya menyesuaikan template yang saya gunakan, jadi usahakan atur sendiri untuk lebar dan tinggi tampilannya sesuai template Anda.

Membuat Halaman Produk Jualan Online di Blogspot

Buka Blogger > Dashbor > Halaman / Page.

Salin terlebih dahulu kode HTML dikotak bawah ini.

<div class="left-column">
<img data-image="black" src="/zoom/274148_maui_green_FP8G9.jpg" alt="">
<img data-image="blue" src="/zoom/274148_maui_green_WIU3Z.jpg" alt="">
<img data-image="red" class="active" src="/zoom/274148_maui_green_LL0SG.jpg" alt="">
</div>
<div class="right-column">
<div class="product-description">
<span>Hijab</span>
<h1>Hijab Style 2019</h1>
<p>Koleksi scarf yang sangat cantik dan cocok menemani dress polosmu, pilihan warna yang memukau akan memberikan kesan manis pada tampilan specialmu.</p>
</div>
<div class="product-configuration">
<div class="product-color">
<span>Model</span>
<div class="color-choose">
<div>
<input data-image="red" type="radio" id="red" name="color" value="red" checked>
<label for="red"><span></span></label>
</div>
<div>
<input data-image="blue" type="radio" id="blue" name="color" value="blue">
<label for="blue"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
</div>
<div class="cable-config">
<span>Size Style</span>
<div class="cable-choose">
<button>M</button>
<button>L</button>
<button>XL</button>
</div>
<a href="#link_cara_pembayaran">How to configurate your buy?</a>
</div>
</div>
<div class="product-price">
<span>148$</span>
<a href="#link_bayar" class="cart-btn">Add to cart</a>
</div>
</div>

Penjelasan :

• Ganti tanda berwarna merah dengan link milik Anda sendiri.

Salin lagi kode CSS dibawah ini, untuk merapikan tampilannya.

<style>
html,body{height:100%;width:100%;margin:0;font-family:'Roboto',sans-serif}.left-column{float:left;width:32%;position:relative}.right-column{float:right;width:65%;margin-left:60px}.left-column img{width:100%;position:absolute;left:0;top:0;opacity:0;transition:all .3s ease}.left-column img.active{opacity:1}.product-description{border-bottom:1px solid #e1e8ee;margin-bottom:20px}.product-description span{font-size:12px;color:#358ed7;letter-spacing:1px;text-transform:uppercase;text-decoration:none}.product-description h1{font-weight:500;color:#43484d;letter-spacing:-2px;margin-top:20px}.product-description p{font-size:16px;font-weight:300;color:#86939e;line-height:24px}.product-color{margin-bottom:30px}.color-choose div{display:inline-block}.color-choose input[type="radio"]{display:none}.color-choose input[type="radio"]+label span{display:inline-block;width:40px;height:40px;margin:-1px 4px 0 0;vertical-align:middle;cursor:pointer;border-radius:50%}.color-choose input[type="radio"]+label span{border:2px solid #fff;box-shadow:0 1px 3px 0 rgba(0,0,0,0.33)}.color-choose input[type="radio"]#red+label span{background-color:#c91524}.color-choose input[type="radio"]#blue+label span{background-color:#314780}.color-choose input[type="radio"]#black+label span{background-color:#323232}.color-choose input[type="radio"]:checked+label span{background-image:url(images/check-icn.svg);background-repeat:no-repeat;background-position:center}.cable-choose{margin-bottom:20px}.cable-choose button{border:2px solid #e1e8ee;border-radius:6px;padding:13px 20px;font-size:14px;color:#5e6977;background-color:#fff;cursor:pointer;transition:all .5s}.cable-choose button:hover,.cable-choose button:active,.cable-choose button:focus{border:2px solid #86939e;outline:0}.cable-config{border-bottom:1px solid #e1e8ee;margin-bottom:20px}.cable-config a{color:#358ed7;text-decoration:none;font-size:12px;position:relative;margin:10px 0;display:inline-block}.cable-config a:before{content:"?"height:15px;width:15px;border-radius:50%;border:2px solid rgba(53,142,215,0.5);display:inline-block;text-align:center;line-height:16px;opacity:.5;margin-right:5px}.product-price{display:flex;align-items:center}.product-price span{font-size:26px;font-weight:300;color:#43474d;margin-right:20px}.cart-btn{display:inline-block;background-color:#7dc855;border-radius:6px;font-size:14px;color:#FFFFFF!important;text-decoration:none;padding:10px 30px;transition:all .5s}.cart-btn:hover{background-color:#64af3d}
</style>

Letakan kode CSS diatas dalam edit HTML / langsung dalam mode HTML post blogger.

Lalu langkah terakhir adalah menyalin kode JavaScript dibawah ini.

<script>
$(document).ready(function() {
  $('.color-choose input').on('click', function() {
      var headphonesColor = $(this).attr('data-image');
      $('.active').removeClass('active');
      $('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
      $(this).addClass('active');
  });
});
</script>

Dan meletakannya dalam mode HTML post / dalam kode file template blogger diatas kode </head> atau </body>

Lalu, jangan lupa klik pritinjau untuk melihat hasilnya, Jika dirasa sudah pas jangan lupa klik " PUBLISH "

Contoh Halaman

Akhir Kata

Itulah beberapa cara termudah yang dapat Anda ikuti untuk membuat halaman tampilan produk di blogspot terlihat lebih keren.

Jika ada pertanyaan yang kurang Anda pahami, jangan ragu untuk menulis komentar didalam blog ini, untuk mendapatkan arahan dari admin.

Berbagi :