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.

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.
Lalu langkah terakhir adalah menyalin kode JavaScript dibawah ini.
Lalu, jangan lupa klik pritinjau untuk melihat hasilnya, Jika dirasa sudah pas jangan lupa klik " PUBLISH "
Contoh Halaman
Jika ada pertanyaan yang kurang Anda pahami, jangan ragu untuk menulis komentar didalam blog ini, untuk mendapatkan arahan dari admin.
<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 "
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.
Posting Komentar untuk "Cara Membuat Postingan Kusus Produk di Blogspot"
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini