Cara Mereka Membuat Tombol Demo dan Download Di Sidebar

Biasanya Button atau tombol demo dan download langsung di sisipkan di dalam posting blog, namun ada juga yang memindahkan tombol demo dan download ini ke sidebar. Sebenarnya diluar sana sudah banyak sih, para blogger memberi tutorial tentang cara membuat tombol demo dan download tersebut. Kali ini saya hanya sekedar menambah referensi di search engine tetang tutorial tersebut barangkali saja bisa nyusul nagkring di page one 😂. Tutorial yang saya share dari mereka hanya khusus untuk platform blogspot.

Sebenarnya kalau membicarakan kelebihan dan kekurangan dari tombol demo dan download di sidebar ini sebenarnya cuma pilihan saja dan tergantung dari file yang akan di share. Jika filenya untuk template banyak yang memilih diletakkan di sidebar. Berbeda dengan file yang berupa pdf atau word ini mungkin lebih baik di taruh di posting sebab membutuhkan akses tampilan mobile friendly artinya bisa juga di download melalui handphone sedangkan untuk share tempalte atau software hanya membutuhkan tampilan dekstop.

Berikut beberapa pilihan dari cara mereka membuat tombol demo dan download keren dengan menggunakan font awesome.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika dalam blog anda sudah menggunakan kode diatas tersebut, lewati saja.
copy paste css dari indietheme berikut ini

<style type='css/text'>
/* move to sidebar */
.theme_name {background: #FAFAFA; padding:0; font-size: 13px;border:1px solid #ebebeb;-moz-box-sizing: border-box;-webkit-box-sizing:border-box;box-sizing:border-box;  float: left;  width: 100%;  position: relative;margin:0 auto 30px}
.theme_name h3 {border-bottom: 1px solid #ebebeb;margin:0;padding:15px;margin:0;font-weight:700;color: #4e5563;font-size: 18px;}
.theme_name ul {padding: 0;margin: 0 auto}
.theme_name li {display: block;float: left;border-bottom: 1px solid #ebebeb;width: 100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.theme_name .style_theme li {border:none}
.detail_block b {border-right: 1px solid #ebebeb;padding: 15px;width: 60px;float: left;text-align: left;color: #4e5563;}
.price.dtext {padding: 15px;float: left;}
ul.style_theme{padding:10px 10px 0}
.style_theme li.on_style,.style_theme li.none_style{background:#31333a;color:#fff;display:block;position:relative;padding:0;margin:0 0 10px;height:50px;line-height:50px}
.style_theme li.none_style{background:#aaa;color:#888}
.style_theme li.on_style a{color:#fff}
.versi_text,.none_versi_text{margin:0 15px;font-weight:700;font-size:14px}
.versi_view a,.versi_down a,.none_view,.none_down,.premi_down a{float:right;text-align:left;height:50px;line-height:50px;display:inline-block;width:50px;text-align:center;font-size:21px;color: rgba(0,0,0,.3)!important}
.versi_view a{background:#ffb54b}
.versi_down a{background:#ec472c}
.premi_down a{background:#10a15b}
.versi_view i:hover,.versi_down i:hover,.premi_down i:hover{color:#fafafa!important}
.none_view{background:#888;cursor:not-allowed;}
.none_down{background:#777;cursor:not-allowed;}
.clrs{font-size:8px;text-transform:uppercase;margin:0 10px;padding:3px 7px 2px;border-radius:99em;color:rgba (0,0,0,.5);}
.nostyle{background:#9a9a9a}
.style1{background:#3c88e6}
.style2{background:#d3ca3a}
.style3{background:#39a35e}
</style>

kemudia cari kode </ head> letakkan script ini tepat diatasnya

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

kemudian cari kode <aside id = 'sidebar-wrapper' atau <div id = 'sidebar-wrapper> karena ada beberapa bentuk tag div id sidebar pada html blog. kemudian letakkan kode berikut diatas kode id sidebar.

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

selanjutnya simpan semua dan berganti ke cara posting, kopi kode dibawah ini

<div style="display: none;"> <div id="Theme_name">  <div id="store-style">  <a class="storebutton but1" href="LINK-TUJUAN" rel="nofollow" target="_blank">Preview</a> <div class="rio-ss idb"> Your description here.</div> </div> <div id="store-style"> <a class="storebutton but2" href="LINK-TUJUAN" target="_blank">IDR 10K Download</a>  <div class="rio-ss"> <span class="storelist">Deskripsi 1</span> <span class="storelist">Deskripsi 2</span> <span class="storelist">Deskripsi 3</span> <span class="storelist">Deskripsi 4</span></div> </div> </div> </div>

lihat
terimakasih indietheme