Jumat, 01 Juni 2018

Cara Membuat Tombol Demo dan Download Di Sidebar

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 pada Template blog biasa terletak pada akhir sebuah postingan atau artikel, namun ada inovasi lain untuk pengguna blogspot agar membuat tombol tersebut bisa terletak pada sidebar wrapper yang akan di letakkan paling atas.

Tutorial yang mamang cari selagi membuat template redesign untuk blog template mamang dan akhirnya menemukan cara yang cocok dan pas yang tidak menimbulkan error dimanapun, dan tentu saja ini sudah responsive dan SEO Serp juga tersedia.

Cara ini cocok sekali untuk anda yang akan menggunakan blogspot dengan tema "Online Shop" sehingga terlihat lebih profesional, kali ini mamang akan membagikan tutorial tersebut tentang bagaimana Cara Membuat Tombol Demo dan Download Di Sidebar.

Tombol Demo dan Download Di Sidebar :


  • Masuk kedalam dashboard blog kemudian pilih Tema > Edit HTML > Lalu copy kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>


/* CSS StoreStyle By Mang Otep*/
#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}

  • Selanjutnya anda letakkan kode Javascript di bawah ini tepat di atas kode </head>


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

  • Langkah Ketiga anda cari "Sidebar" Atau "Sidebar-wrapper" dan letakkan kode di bawah ini tepat di atas kode terebut.


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

Perlu di ketahui bahwa semua template tidak akan sama kodenya, carilah dengan teliti kode yang mirip seperti gambar.

Cara Membuat Tombol Demo dan Download Di Sidebar

  • Yang Terakhir lakukan ini saat membuat postingan anda, sisipkan kode di bawah ini pada bagian akhir artikel sehingga tidak menyebabkan error.


<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.
Sekarang silahkan lihat template anda dan lihat pada sidebar apa sudah terpasang dengan rapih atau belum, jika belum aturlah css pada langkah pertama sehingga sesuai dengan selera anda.

Demikianlah informasi dari Blog Mang Otep tentang Cara Membuat Tombol Demo dan Download Di Sidebar, jika menyukai artikel ini anda bisa like, share, and subscribe untuk berlangganan artikel terbaru dari blog ini.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments