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.

Semoga tutorial yang saya berikan dapat bermanfaat.
DONASI Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.bangopit.id. Terima kasih.

4 Komentar

Peraturan Berkomentar
1. Jangan menggunakan kata-kata kotor dan kasar
2. Jangan menyertakan link dalam berkomentar
3. Jangan membahas keluar topik, jika keluar topik sebaiknya gunakan Contant Form yang disediakan

  1. Mohon maaf sedikit berbelok dari topik pembahasan. Yang ingin saya tanyakan, dengen adanya penambahan script tersebut apakah aman buat speed blog?

    Btw, cara ini pasti banyak dicari para pelaku pasar yang bermain onlineshop.

    Tambahan gan, mungkin akan lebih bagus jika diberikan juga demo nya. Karena saya penasaran dengan hasil script tsb..

    BalasHapus
    Balasan
    1. Tentunya speed blog akan sedikit lamban, karena adanya penambahan kode CSS.

      Di artikel selanjutnya akan saya sediain demonya

      Hapus
  2. Meskipun mungkin akan mengalami penurunan kecepatan pemuatan web, tetapi bagi para pengunjung terutama pembeli pastinya akan sangat terbantu karena lebih memudahkan daripada harus menghubungi si penjual

    BalasHapus
    Balasan
    1. cara mengatasinya cssnya di minify mas

      Hapus

Posting Komentar

Peraturan Berkomentar
1. Jangan menggunakan kata-kata kotor dan kasar
2. Jangan menyertakan link dalam berkomentar
3. Jangan membahas keluar topik, jika keluar topik sebaiknya gunakan Contant Form yang disediakan

Lebih baru Lebih lama