Cara Membuat Menu Live Preview dan Buy Now di Sidebar pada Blogger

 

Hiiro Dev - hallo teman - teman, sudah lama nih saya gak nulis artikel, mungkin kedepannya saya akan lebih sering memposting artikel karena nganggur juga wkwk..

Ok tanpa basa - basi disini saya akan menjelaskan bagaimana Cara Membuat Menu Live Preview dan Buy Now di Sidebar atau di sebelah kiri bagian widget yaa.. jadi blognya akan cocok untuk berjualan juga seperti berjualan template, script atau yang lainnya.

Langkah - langkahnya sebagai berikut..

1. Langkah Pertama

Masuk ke Dashboard Blog lalu pilih menu Template/Tema di bagian Sesuaikan kalian pilih Edit Html, namun sebelum itu backup terlebih dahulu template kalian agar nanti jika terjadi error kalian bisa kembalikan seperti semula dan mulai coba lagi tutorialnya dengan cara klik cadangkan/pulihkan --> lalu Download Template.

Jika sudah di backup setelah itu pilih menu Edit Html, kemudian cari kode ini ]]></b:skin> atau </style> lalu jika ketemu kalian copy dan pastekan kode di bawah ini tepat di atasnya.

 /* CSS StoreStyle */
#store-style{overflow:hidden;font-family:'Open Sans',sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px}
#store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}.rio-ss{padding-top:15px;overflow:hidden}.idb{line-height:1.5;padding:25px 0 5px}
#store-style .storebutton:hover{background:#333;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px}
.storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:left}
.storelist:last-child{border-bottom:none}
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px} 

Selanjutnya cari kode </head> jika kode tersebut tidak di temukan cari kode yang lebih umum seperti ini <head/> kemudian letakkan kode di bawah ini tepat di atasnya.

 
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){
$('a[name="details"]').before($('#Theme-details').html());
$('#Theme-details').html('');
});
/*]]>*/
</script> 

Masih di dalam Edit Html, kalian harus mencari kode sidebar blog seperti ini <aside id='sidebar-wrapper' atau <div id='sidebar-wrapper . Setelah di temukan copy dan pastekan kode dibawah ini tepat di atas kode sidebar tersebut.

 <a name='details'/>
<div class='clear'/> 

Dengan begini langkah pertama sudah selesai, jika di rasa sudah tidak ada error maka kita bisa langsung lanjut ke langkah selanjutnya.

2. Langkah Kedua

Untuk langkah kedua ini kita tinggal membuat postingan seperti biasa produk apa yang mau kita jual beserta keterangannya, setelah membuat postingan kita ubah ke mode penulisan html bukan compose yaa. Lalu kalian copy dan pastekan kode di bawah kedalam postingan kalian tadi bagian paling bawah.

 <div style="display:none">
<div id="Theme-details">
<div id="store-style">
<center><a class="storebutton but1" href="#LINK-DEMO" target="_blank">Live Preview</a></center>
<div class="rio-ss idb">
See it live with all the features that exist, both on the homepage and the page posts.</div>
</div>
<div id="store-style">
<center><a class="storebutton but2" href="#LINK-PURCHASE" target="_blank">$5.20 - Buy Now</a></center>
<div class="rio-ss">
<span class="storelist">Support Template Update</span>
<span class="storelist">Remove Footer Credits</span>
<span class="storelist">For Unlimited Domains</span>
<span class="storelist">No Encrypted Scripts</span>
<span class="storelist">Support Color Change</span>
<span class="storelist">And Much More...</span>
</div>
</div>
<div style="clear:both">
</div>
</div>
</div> 

Langkah terakhir kalian tinggal publikasikan hasilnya pastikan menu Live Preview dan Buy Now sudah di bagian sidebar dan tersusun rapi.

Keterangan :

#LINK-DEMO = masukan url link demo

#LINK-PURCHASE = masukan url link kontak atau form pembelian

Sekian untuk artikel kali ini semoga tutorial ini berguna untuk kalian yang ingin membangun sebuah website blogger dengan menambahkan sistem jual beli, semoga bermanfa'at..