rp0bNChIFHEQLNOWnNlTR7tYV3Qi69riOvEhpJHL
Cara Membuat Tombol Demo dan Download di Sidebar

Cara Membuat Tombol Demo dan Download di Sidebar

Cara Membuat Tombol Demo dan Download di Sidebar - Tombol Demo dan download bisanya terletak pada bagian akhir sebuah artikel, namun sekarang kamu bisa meletakkan kedua tombol tersebut di sidebar bagian atas template blog blogspot.


Membuat tombol download di sidebar ini cocok buat kamu yang memiliki sebuah situs blog download maupun online shop, meskipun trik ini bisa di aplikasikan dengan hal yang lainnya.

Tujuan memindahkan tombol download ke sidebar bukanlah hanya untuk gaya-gayaan saja, namun ini akan membuat tampilan blog anda terlihat lebih profesional, keren, dan lebih menarik. Hal tersebut akan menjadi nilai plus bagi blog kamu.

Cara Membuat Tombol Demo dan Download di Sidebar Blogger

  • Pertama masuk ke halaman akun blogger lalu pilih Tema > Edit HTML kemudian copy kode dibawah lalu letakkan tepat diatas code </b:skin>
    
    /* CSS StoreStyle By Samied*/
    #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}
  • Kedua letakkan kode javascript dibawah tepat diatas kode </body>
    
    <script type='text/javascript'>
    /*<![CDATA[*/
    $(document).ready(function(){
    $('a[name="details"]').before($('#Theme-details').html());
    $('#Theme-details').html('');
    });
    /*]]>*/
    </script>
  • Ketiga cari 'sidebar' atau sidebar-wrapper lalu letakkan kode berikut tepat diatas kode tersebut
    
    <a name='details'/>
    <div class='clear'/>

Perlu kamu ketahui bahwa setiap template berbeda kodenya, carilah dengan teliti kode yang mirip seperti gambar dibawah.

tombol download di sidebar, memindahkan tombol ke sidebar,

  • Terakhir tambahan kode berikut pada bagian akhir artikel sobat sehingga tidak menyebabkan error' nantinya.
    
    <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>
  • Selesai.

Cobalah lihat blog anda dan lihatlah pada bagian sidebar, apakah sudah terpasang rapi atau belum. Apabila belum silahkan editlah pada bagian CSS tadi sesuai dengan selera anda.

Demikian artikel dari saya tentang Cara Membuat Tombol Demo dan Download di Sidebar , semoga bermanfaat, selamat mencoba.
Baca Juga
SHARE
Dimas Arief
Tidak normal tapi spesial. Blogger merangkap content writer yang secara ajaib tersesat di bidang keuangan. Semua tulisan di sini tersedia berkat bantuan kopi tanpa gula.

Related Posts

Subscribe to get free updates

Post a Comment

Iklan Tengah Post

Samied
Administrator

Tidak normal tapi spesial.Semua tulisan di sini tersedia berkat bantuan kopi tanpa gula.