Cara Memindahkan Tombol Demo dan Download Pada Postingan ke Sidebar Blog

Cara Memindahkan Tombol Demo dan Download Pada Postingan ke Sidebar Blog - 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.

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!

Semoga artikel ini bisa membantu, Terima Kasih telah berkunjung .....

Regards,

Mr Ivanchan

BloggingTips & Triks

Share This :