Cara Membuat Live Preview dan Buy Now Di Sidebar Blogspot Seperti ThemeXpose

Tips blogger kali ini akan memberikan tips mengenai bagaimana cara membuat tombol live preview dan buy template pada sidebar blog. Nah widget ini sebenarnya sangat cocok dipasangkan bagi kalian blogger sekaligus webmaster yang menggunakan blog jual beli template blogger untuk mendapatkan penghasilan. Nantinya pada widget preview template dan buy template di sidebar blog ini akan tampil seperti template pada umumnya seperti misalnya saja templateism.com atau themexpose.

Cara Membuat Live Preview dan Buy Now Di Sidebar Blogspot Seperti ThemeXpose
Tutorial kali ini saya tidak hanya memberikan cara memasang tombol live preview dan buy theme di sidebar saja namun saya juga akan memberikan tips cara membuat tulisan atau tabel keterangan tentang template pada sidebar. Contohnya anda bisa melihat gambar di bawah ini untuk lebih detailnya, dimana pada gambar tersebut ada tombol preview yang berfungsi untuk melihat demo template dan dibawahnya juga ada keterangan untuk melihat template. Selain ada tombol demo ada juga tombol untuk membeli template (buy theme). Pada buy theme ini anda juga bisa menggantinya dengan free download atau menambahkan free download dibawah buy now serta ada juga tabel keterangan yang memperlihatkan fitur kelebihan pada template yang anda bagikan.

Jika kalian masih bingung silahkan anda kunjungi demo template yang sudah dibuatkan sidebar preview dan buy theme now button pada berikut ini.
Apabila anda berminat untuk memasang fitur tombol pada sidebar blog ini maka ikuti langkah-langkahnya pada berikut ini dengan benar.
Langkah pertama silahkan anda buka dan masuk ke dashboard blogger anda, kemudian pilihlah menu template > edit html. Tambahkan kode CSS ini tepat diatas kode ]]></b:skin> atau </b: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}

Langkah berikutnya letakan kode berikut ini tepat diatas kode </head>

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

Setelah itu carilah kode sidebar blog, kodenya akan tampil seperti ini <aside id=’sidebar-wrapper’ atau <div id=’sidebar-wrapper. Jika sudah ditemukan maka tambahkan kode di bawah ini.

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

Kode sidebar biasanya berbeda-beda disetiap template yang digunakan

Simpan template blog anda.

Langkah selanjutnya jika anda ingin menampilkan tombol preview atau demo ini pada sidebar blog anda maka gunakan cara dengan membuat postingan/artikel baru kemudian tambahkan kode script di bawah ini dimana saja bebas untuk peletakannya.

<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>

Jika sudah diletakan maka langsung saja publish artikel tersebut dan lihatlah hasilnya.

Semoga bermanfaat


Gambar Gravatar
"Seseorang Informan yang baru belajar"

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *