Cara membuat tombol Preview dan Buy Now di Sidebar Kiri Blog

Anda punya blog untuk bisnis online ? Anda punya blog share template ? Bagaimana cara anda memasang tombol Preview dan Buy Now atau tombol lainnya sesuai dengan blog yang anda kelola?.

Kalau pertanyaan di atas ada pada blog anda maka, untuk mempercantik blog atau memudahkan pengunjung dalam membeli apa yang anda jual atau bagikan maka, silahkan baca terus artikel ini sampai selsesai.

Ada beberapa tips memasang tombol Preview dan Buy Now agar mudah atau gampang digunakan oleh pengunjung blog yang ingin melihat contoh produk anda, dan kalau mereka tertarik pasti akan membelinya. Letak tobol Preview dan Buy Now atau demo paling bagus berada di ;

1. Sidebar bagian kiri

2. Di bagian atas setelah gambar yang digunakan untuk postingan

Kedua tata letak untuk tombol Preview dan Buy Now yang saya sebutkan di atas sangat strategis dan paling cepat diklik oleh pengunjung blog karena sangat mudah ditemukan. Untuk membuat tombol Preview dan Buy Now di sidebar kiri adalah sebagai berikut:

Langkah Pertama

Masuk ke dasbord blog klik tab Template. Agar lebih aman saat mengotak atik kode di dalam halaman HTML blog, lebih baik anda simpan terlebih dahulu template milik anda dengan cara klik Cadangkan / Pulihkan > Unduh template Lengkap.

Setelah itu klik tombol Edit HTML, kemudian cari dan letakkan kode di bawah ini tepat di bawah kode ]]></b:skin> atau </style>.

/* 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> 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 halaman HTML blog, cari kode sidebar blog. Biasanya kode tersebut seperti ini <aside id='sidebar-wrapper' atau <div id='sidebar-wrapper . Setelah ditemukan, copy dan paste kode di bawah ini tepat di atas kode sidabar tersebut.

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

Langkah pertama telah selesai, jangan lupa simpan template lalu lihat blog anda. Jika tidak ada masalah lanjut ke langkah kedua.

Langkah Kedua

Pada langkah kedua ini adalah langkah dimana ketika anda ingin membuat postingan yang di dalamnya terdapat tombol Preview dan Buy Now. Ketika anda telah selesai menulis, meng-upload gambar (jika ada) pada mode Compose, maka letakkan kode di bawah ini tepat di akhir postingan anda dengan mode penulisan HTML.

<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 adalah publikasikan postingan anda. Perhatikan sidebar bagian kiri !! Tombol Preview dan Buy Now telah terpasang dengan rapi di sana.

Catatan

Biasanya kode sidebar berbeda antara satu template blog dengan template blog lainnya, cari kode sidebar sesuai dengan template blog anda

Pada halaman postingan, anda bisa mengganti "Live Preview" dan "Buy Now" dengan kata yang sesuai dengan blog yang anda kelola.