Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog: Baiklah kali ini blog ID Dzgn akan coba membagikan sedikit tutorial untuk Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog,  biasa di gunakan untuk membuat tombol Download, Preview, dan Buy Now, nah buat kamu yang sudah pernah melihat demo/style yang mirip dengan tutorial berikut ini pasti keren bukan, tutorial ini bertujuan untuk menjadikan 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 seperti yang saya katakan tadi prefesional, karena pengunjung akan betah jika blog yang mereka kunjungi memeliki tampilan yang menarik, rapi, juga keren, pengunjung pastinya akan merasa betah Berlama-lama untuk kunjung.

Bagi yang masih bingung dengan tampilan element template seperti gambar di atas, bisa lihat demonya di bawah ini:

Demo

Oky tampa Basa-basi yuk pasang langsung di blog kamu.

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

1. Silahkan buka Blogger>Tema>Edit Html, pada edit html silahkan kamu cari kode ]]></b:skin> lalu silahkan pastekan kode berikut tepat di atasnya, untuk mempercepat pencarian silahkan kamu 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 kamu cari kode </head> pastekan kode berikut tepat di atasnya.

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

3. Nah sekarang silahkan kamu cari markup kode sidebar contohnya: aside id='sidebar-wrapper' atau <div id='sidebar-wrapper jika sudah ketemu sekarang silahkan kamu letakan kode berikut tepat di atasnya.

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

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

Nah kemungkinan contoh peletakan langkah ke 3 persis seperti gambar di bawah ini.

Nah sekarang silahkan kamu save tema.

4. Sekarang pindah, ke menu Postingan buat postingan baru kamu atau Jika kemungkinan kamu ingin menyisipkan tombol ini dalam postingan yang sebelumnya sudah kamu publikasikan, silahkan kamu edit kembali. lalu pindah dari mode Compose ke HTML lalu letakan kode berikut terserah di bagian mana, tapi untuk menjaga postingan agar tetap terlihat seo di mata pencarian google (Search Engine) letakan kode berikut tepat 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 kode di atas akan berpindah secara otomatis ke bagian sidebar blog kamu
Nah ini yang perlu di ketahui, tutorial ini akan otomatis responsive jika template yang kamu gunakan sudah di lengkapi dengan fitur responsive, jadi perlu teliti terlebih dahulu dalam memilih template.

Nah jika kamu ingin yang di tampilkan hanya terlihat text silahkan kamu ganti dengan kode berikut.

<div style="display:none">
<div id="Theme-details">

/* Tulisan yang ingin ditampilkan di sidebar blog. */

<div style="clear:both">
</div>
</div>

Terakhir silahkan kamu Publikasi/simpan lalu pilih pertinjau.
mungkin sampe di sini saja tutorial saya akali ini, semoga bermanfaat ya.

Artikel Terkait