Apa kamu membuat sebuah blog untuk memasarkan suatu produk?, misalnya kamu menjual template, maka kamu butuh yang namanya tombol live preview / demo dan buy untuk menyakinkan pembeli kamu, bahwa seperti inilah template yang saya jual.Jika kamu setuju, kamu perlu memasang tombol preview dan buy di sidebar kiri blog. Tujuan memasang tombol ini ialah agar memudahkan pembeli kamu untuk melihat dan membeli karya kamu dan letaknya yang sangat strategis, selain itu, juga nyaman untuk dilihat. Lalu bagaimana cara memasangnya?, ikuti langkah demi langkah dibawah ini!
Cara Memasang Tombol Preview dan Buy.
1. Buka dashboard Blogger kamu.2. Plih menu Tema > Edit HTML.
3. Tempel kode di bawah tepat di bawah kode ]]></b:skin> atau </style>, untuk mempermudah klik CTRL + F.
/* Button Preview and Buy www.bangopit.id */
#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}4. Tempelkan kode dibawah, diatas kode </head>, untuk mempermudah klik CTRL + F.
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){
$('a[name="details"]').before($('#Theme-details').html());
$('#Theme-details').html('');
});
/*]]>*/
</script>5. Langkah kelima ini cukup sulit jadi baca dengan teliti, cari kode sidebar template kamu, biasanya kodenya seperti berikut: <aside id='sidebar-wrapper' atau <div id='sidebar-wrapper, jika tidak ketemu cari kode yang mirip, atau kamu bisa menanyakannya kepada pembuat template kamu.
6. Lalu, tempel kode dibawah, diatas kode <aside id='sidebar-wrapper' atau <div id='sidebar-wrapper.
<a name='details'/>
<div class='clear'/>Cara Membuat Artikel dengan Preview dan Buy.
1. Setelah kamu selesai membuat artikel, ubah mode penulisan dari Compose ke HTML. Lalu, tempel kode dibawah, tepat dibagian akhir artikel kamu.
<div style="display:none">
<div id="Theme-details">
<div id="store-style">
<center><a class="storebutton but1" href="#LINK-Preview" 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-Buy" 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>
a. Ganti #LINK-Preview dengan tautan live preview dan Live Preview dengan kata yang kamu suka.
b. Ganti #LINK-Buy dengan tautan halaman pembelian dan $5.20 - Buy Now dengan kata yang kamu suka.
2. Sekarang publikasikan artikel kamu dan lihat hasilnya.b. Ganti #LINK-Buy dengan tautan halaman pembelian dan $5.20 - Buy Now dengan kata yang kamu suka.
Semoga tutorial yang saya berikan dapat bermanfaat.
