Cara Menciptakan Tombol Demo Dan Download Di Sidebar

Cara Membuat Tombol Demo dan Download Di Sidebar - Tombol Demo dan Download pada Template blog biasa terletak pada selesai sebuah postingan atau artikel, namun ada penemuan lain untuk pengguna blogspot semoga menciptakan tombol tersebut dapat terletak pada sidebar wrapper yang akan di letakkan paling atas.

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

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

Tombol Demo dan Download Di Sidebar :

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

CSS /* 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 instruksi Javascript di bawah ini sempurna di atas instruksi </head>

JS <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 instruksi di bawah ini sempurna di atas instruksi terebut.

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

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

• Yang Terakhir lakukan ini ketika menciptakan postingan anda, sisipkan instruksi di bawah ini pada belahan selesai artikel sehingga tidak mengakibatkan error.

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

• Live Demo

Sekarang silahkan lihat template anda dan lihat pada sidebar apa sudah terpasang dengan rapih atau belum, kalau belum aturlah css pada langkah pertama sehingga sesuai dengan selera anda.

Demikianlah gosip dari ihwal Cara Membuat Tombol Demo dan Download Di Sidebar, kalau menyukai artikel ini anda dapat like, share, and subscribe untuk berlangganan artikel terbaru dari blog ini.
Sumber https://www.mangotep.com/