Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini!

Cara Membuat Halaman Produk Menggunakan CSS,HTML dan JavaScript di Blogspot

Cara Membuat Halaman Produk Menggunakan CSS,HTML dan JavaScript di Blogspot Images @rian_seo
Cara Membuat Halaman Produk Menggunakan CSS,HTML dan JavaScript 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.

Cara Membuat Halaman Produk Menggunakan CSS,HTML dan JavaScript di Blogspot
Cara Membuat Halaman Produk Menggunakan CSS,HTML dan JavaScript di Blogspot

Salin terlebih dahulu kode HTML dikotak bawah ini.
<div class="left-column">
<img data-image="black" src="https://im.berrybenka.com/assets/upload/product/zoom/274148_maui_green_FP8G9.jpg" alt="">
<img data-image="blue" src="https://im.berrybenka.com/assets/upload/product/zoom/274148_maui_green_WIU3Z.jpg" alt="">
<img data-image="red" class="active" src="https://im.berrybenka.com/assets/upload/product/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>
/* Basic Styling */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
/* Columns */
.left-column {
  float:left;
  width: 32%;
  position: relative;
}
.right-column {
  float:right;
  width: 65%;
  margin-left: 60px;
}
/* Left Column */
.left-column img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.3s ease;
}
.left-column img.active {
  opacity: 1;
}
/* Product Description */
.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 */
.product-color {
  margin-bottom: 30px;
} 
.color-choose div {
  display: inline-block;
}
.color-choose input[type=&quot;radio&quot;] {
  display: none;
} 
.color-choose input[type=&quot;radio&quot;] + 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=&quot;radio&quot;] + label span {
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
} 
.color-choose input[type=&quot;radio&quot;]#red + label span {
  background-color: #C91524;
}
.color-choose input[type=&quot;radio&quot;]#blue + label span {
  background-color: #314780;
}
.color-choose input[type=&quot;radio&quot;]#black + label span {
  background-color: #323232;
} 
.color-choose input[type=&quot;radio&quot;]:checked + label span {
  background-image: url(images/check-icn.svg);
  background-repeat: no-repeat;
  background-position: center;
}
/* Cable Configuration */
.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: none;
} 
.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: &quot;?&quot;;
  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: 0.5;
  margin-right: 5px;
}
/* Product Price */
.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 jualan 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.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter