Cara Membuat Tombol Download Dan Demo Di Sidebar Blog

Cara Membuat Tombol Download Dan Demo Di Sidebar Blog - Halo sobat Expxo, kali ini admin mau berbagi Cara Membuat Tombol Download Dan Demo Di Sidebar Blog seperti yang admin pakai pada postingan download. Kalian juga bisa menemukan tombol download pada blog - blog lain seperti IdnTheme, dan juga blog - blog lain yang menyediakan preview, buy now dan yang lainnya.

Tidak lain dengan menggunakan tombol download dan demo di bagian sidebar agar tampilan blog lebih profesional dan menarik dan tentunya menjadikan nilai lebih bagi blog sobat.
Jika sobat tertarik ingin memasang tombol download dan demo di bagian sidebar blog, silahkan perhatikan dan ikuti langkah - langkahnya di bawah ini.

Menambahkan CSS

Masuk ke blogger kalian masing - masing dengan Gmail,
Selanjutnya pilih menu Tema ~ Edit HTML
Ketikkan CTRL + F di keyboard untuk mempermudah pencarian dan masukkan kode ]]><b:skin> ada kan, lalu copy dan pastekan kode CSS dibawah ini tepat diatas ]]></b:skin>

/* Button-Side Style By EXPXO.NET */
#store-style{background:#f6f8f9;display:block;overflow:hidden;padding:20px;margin:0 0 20px 0}
.rio-ss{overflow:hidden;line-height:normal;margin:0;background:#fff;display:block;padding:10px;width:100%;float:left;color:#888}
#store-style .storebutton{display:block;position:relative;background:#ff6550;color:#fff;text-align:left;font-size:1rem;margin:0;padding:16px 20px;border-radius:4px;overflow:hidden;box-shadow:0 1px rgba(0,0,0,.1);transition:all .3s}
#store-style .storebutton.but2{background:#3498db}
#store-style .storebutton:hover{background:#e55b48;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.04), 0 6px 6px rgba(0,0,0,0.1);}
#store-style .storebutton.but2:hover{background:#2f89c5}
#store-style .storebutton:after,#store-style .storebutton.but2:after{content:'\f105';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;bottom:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:12px 20px;font-family:fontawesome;transition:all .3s;font-size:1.4rem}
#store-style .storebutton:hover:after,#store-style .storebutton.but2:hover:after{background:rgba(255,255,255,.15);-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
.but1,.but2{padding:14px}
.storelist{background:#fff;display:flex;padding:10px 5px;width:100%;float:left;color:rgba(0,0,0,0.5);font-weight:700;border-bottom:1px dashed rgba(0,0,0,0.05);transition:all .6s}
.storelist:last-child{border-bottom:0}
.storelist:before{content:'\f00c';font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:normal;padding:5px;margin:0 5px 0 0;transition:all .6s}
.storelist:hover:before{color:#e67e22;}

Memasang FontAwasome
Memasang Fontawasome hanya jika di blog sobat belum terpasang Fontawasome, tapi kalau di blog sobat sudah terpasang Fontawasome lewati saja tahap ini.

Ketikkan CTRL + F di keyboard untuk mempermudah pencarian dan masukkan kode </head> ada kan, lalu copy dan pastekan kode Fontawasome dibawah ini tepat diatas </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Memasang JavaScript

Ketikkan CTRL + F di keyboard untuk mempermudah pencarian dan masukkan kode </head> ada kan, lalu copy dan pastekan kode Fontawasome dibawah ini tepat diatas </head>

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

Memasang Kode HTML

Disini sobat harus mencari kode markup sidebar seperti <asside id='sidebar-wrapper'> atau <div id'sidebar-wrapper'>
Jika sudah ketemu letakan kode Html dibawah ini tepat di bawah kode <asside id='sidebar-wrapper'> atau <div id'sidebar-wrapper'>

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

Nanti hasilnya akan seperti ini

<aside id='sidebar-wrapper'>
<div class='sidebar-container'>
<a name='details'/>
<div class='clear'/>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='sidebar-sticky' id='sidebar-sticky' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Terpopuler' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'>

Atau seperti ini

Cara Menampilkannya Di Sidebar

Pilih salah satu postingan yang akan di pasang tombol download dan demo
Pindah mode dari Compose ke HTML
Copy kode di bawah ini dan pastekan tepat di bagian bawah atau ahir postingan sobat

<div style="display: none;"><div id="Theme-details"><div id="store-style"><a class="storebutton but1" href="LINK-TUJUAN" rel="nofollow" target="_blank">Preview</a><div class="rio-ss idb">Your description here.</div></div><div id="store-style"><a class="storebutton but2" href="LINK-TUJUAN" target="_blank">IDR 10K Download</a><div class="rio-ss"><span class="storelist">Deskripsi 1</span><span class="storelist">Deskripsi 2</span><span class="storelist">Deskripsi 3</span><span class="storelist">Deskripsi 4</span></div></div></div></div>

Sobat bisa merubah di bagian yang admin warnai dengan kebutuhan sobat
Kenapa harus di akhir postingan blog? Supaya postingan sobat tetap Seo di mata google

Nah tombol download demo di sidebar blog sobat sudah jadi, jika sobat ingin memodifikasi warna dan sebagainya sobat bisa rubah di bagian CSS.

Jika sobat mengikuti langkah dengan benar maka tidak terjadi error dalam pemasangan.

Tambahan buat sobat expxo yang setia, jika sobat ingin merubah warna dengna Gradient seperti yang terpasang pada blog, tambahkan kode di bawah ini di bagian CSS


linear-gradient(-45deg, #kode warna, #kode warna, #kode warna, #kode warna, #kode warna, #kode warna, #kode warna);background-size: 400% 400%;-webkit-animation: Gradient 1s ease infinite;-moz-ani

Tambahkan di bagian Background atau Hover pada kode CSS tersebut.

Cara ini sebenarnya sudah lama dan sering kita jumpai di blog - blog yang sudah besar dengan type blog Download, dan sebagainya.

Demikian Cara Membuat Tombol Download Dan Demo Di Sidebar Blog, jika ada yang salah mohon koreksinya dan di tunggu komentarnya.

Contoh Demo

Deskripsimu disini.

Terserah ditulis apa

Deskripsi 1Deskripsi 2Deskripsi 3Deskripsi 4