Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

Baca Juga

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog: Baiklah kali ini blog akan coba membagikan sedikit tutorial untuk Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog,  biasa di gunakan untuk menciptakan tombol Download, Preview, dan Buy Now, nah buat kau yang sudah pernah melihat demo/style yang menyerupai dengan tutorial berikut ini niscaya keren bukan, tutorial ini bertujuan untuk menimbulkan blog terlihat lebih Rapi, Keren, dan terlihat lebih Prefesional tentunya. memindahkan element tombol download postingan ke sidebar blog sudah banyak yang menggunakanya terbukti blog mereka menjadi lebih keren rapi, dan tentunya saja menyerupai yang aku katakan tadi prefesional, alasannya yaitu pengunjung akan betah kalau blog yang mereka kunjungi memeliki tampilan yang menarik, rapi, juga keren, pengunjung pastinya akan merasa betah Berlama-lama untuk kunjung.

Bagi yang masih galau dengan tampilan element template menyerupai gambar di atas, dapat lihat demonya di bawah ini:
Demo
Oky tampa Basa-basi yuk pasang pribadi di blog kamu.

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

1. Silahkan buka Blogger>Tema>Edit Html, pada edit html silahkan kau cari isyarat ]]></b:skin> kemudian silahkan pastekan isyarat berikut sempurna di atasnya, untuk mempercepat pencarian silahkan kau klik tombol

CTRL

+

F

pada keyboard kamu.

 /* 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}

2. Nah kalo sudah selesai, selanjutnya silahkan kau cari isyarat </head> pastekan isyarat berikut sempurna di atasnya.

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

3. Nah kini silahkan kau cari markup isyarat sidebar contohnya: aside id='sidebar-wrapper' atau <div id='sidebar-wrapper kalau sudah ketemu kini silahkan kau letakan isyarat berikut sempurna di atasnya.

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

Tag markup awalan isyarat sidebar tidak selalu sama, dalam template mempunyai strukture isyarat yang berbeda-beda, maka dari itu kenali terlebih dahulu tag kodenya dengan teliti.

Nah kemungkinan referensi peletakan langkah ke 3 persis menyerupai gambar di bawah ini.

Nah kini silahkan kau save tema.
4. Sekarang pindah, ke hidangan Postingan buat postingan gres kau atau Jika kemungkinan kau ingin menyisipkan tombol ini dalam postingan yang sebelumnya sudah kau publikasikan, silahkan kau edit kembali. kemudian pindah dari mode Compose ke HTML lalu letakan isyarat berikut terserah di bab mana, tapi untuk menjaga postingan semoga tetap terlihat seo di mata pencarian google (Search Engine) letakan isyarat berikut sempurna paling bawah postingan (akhir).

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

Nah nantinya isyarat di atas akan berpindah secara otomatis ke bab sidebar blog kamu
Nah ini yang perlu di ketahui, tutorial ini akan otomatis responsive kalau template yang kau gunakan sudah di lengkapi dengan fitur responsive, jadi perlu teliti terlebih dahulu dalam menentukan template.

Nah kalau kau ingin yang di tampilkan hanya terlihat text silahkan kau ganti dengan isyarat berikut.

<div style="display:none"> <div id="Theme-details"> /* Tulisan yang ingin ditampilkan di sidebar blog. */ <div style="clear:both"> </div> </div>

Terakhir silahkan kau Publikasi/simpan kemudian pilih pertinjau.
mungkin sampe di sini saja tutorial aku akali ini, semoga bermanfaat ya.