Cara memindahkan tombol download dan demo postingan ke sidebar blog untuk blog yang membagikan template cocok buat Anda, bukan hanya tampilannya saja yang bagus dan uniq, tombol demo dan download ini juga responsive, bagus untuk Anda yang sedang mencari widget tombol dan demo ini. Di bawah ini merupakan ilustrasi atau gambaran tombol demo dan download ini.

Gimana? bagus bukan? yaps pastinya sangat bagus, itu hanya gambaran secara editing tidak nyata, berikut ini adalah gambar yang asli yang bisa Anda lihat sebagai gantinya halaman demo postingan ini.


Tutorial yang saya bagikan kali ini berasal dari blog ID Dzgn, saya juga penggemar blog tersebut, bukan hanya membagikan tutorial yang bermanfaat, blog tersebut juga membagikan template yang SEO dan Responsive.

Baca juga : TOP 10 Template SEO dan Responsive 2017

Berikut ini adalah tutorial menggantikan tombol demo dan download pada blog.

Cara Memindahkan Tombol Download dan Demo ke Sidebar Blog


Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda copy CSS di bawah ini dan Anda letakkan di atas kode ]]></b:skin>

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

Silakan Anda taruh kode Javascript di bawah ini di atas kode </head>

<script type='text/javascript'>

/*<![CDATA[*/

$(document).ready(function(){ 

$('a[name="details"]').before($('#Theme-details').html()); 

$('#Theme-details').html(''); 

}); 

/*]]>*/

</script>

Lalu Anda cari 'sidebar' atau sidebar' dan letakkan kode dibawah ini di atas kode tersebut

<a name='details'/>

<div class='clear'/>

Di setiap template, pasti memiliki kode yang berbeda - beda, jadi silakan Anda cari kode yang Anda bilang mirip dengan kode - kode yang saya berikan


Silakan Anda Save Template Anda

Langkah kedua :

Langkah selanjutnya adalah tata cara penerapan tutorial ini ke blog Anda, berikut tata caranya:
  • Silakan Anda buat Postingan atau Artikel
  • Lalu Anda masuk pada mode HTML yang berada di samping mode Compose
  • Dan  Anda taruh kode dibawah ini di bagian akhir pada postingan Anda
<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>

Jika Anda hanya ingin menampilkan text atau tulisan saja silakan Anda ganti dengan kode di bawah ini

<div style="display:none">

<div id="Theme-details">



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



<div style="clear:both">

</div>

</div>

Silakan Anda lihat hasilnya, demikian tutorial kali ini semoga bermanfaat, jangan lupa Share ya sob!

Source : https://iddzgn.blogspot.co.id/2017/04/cara-memindahkan-element-tombol-download-postingan-ke-sidebar-blog.html