Cara Membuat Tombol Download di Sidebar Blogger

Membuat tombol download di sidebar, trik ini cocok digunakan untuk yang mempunyai situs download maupun yang mempunyai situs shop online, ya walaupun sebenarnya trik ini bisa diaplikasikan dengan hal yang lain menurut saya,

untuk demonya bisa dilihat disemua post ditombol dibawah ini

• Demo

Baik untuk yang ingin membuat tombol download disidebar bisa mengikuti tutorialnya.

Pertama kalian buka blogger >> Tema >> EditHTML
selanjutnya kalian copy CSS Berikut taruh dibagian <style>

/* CSS Store Style */
#store-style{position:relative;background:#f8f8f8;display:block;overflow:hidden;padding:20px;margin:0 0 20px 0}
#store-style:nth-child(3):before{content:'\f07a';font-family:fontawesome;font-size:4rem;position:absolute;bottom:20px;right:20px;color:rgba(0,0,0,0.05)}
.rio-ss{overflow:hidden;line-height:normal;margin:0;display:block;padding:10px;width:100%;float:left;color:#000;font-size:14px;font-weight:700}
#store-style:hover:nth-child(3):before{;animation:swing 2s infinite}
#store-style .storebutton{display:block;position:relative;background:#00b894;color:#fff;font-weight:700;text-align:center;font-size:1rem;margin:0;padding:16px 20px;border-radius:5px;overflow:hidden;box-shadow:0 3px 0 #009e7f;text-shadow:0 1px 1px rgba(0,0,0,0.1);transition:all .1s}
#store-style .storebutton:before{content:'';display:block;position:absolute;background:rgba(255,255,255,0.5);width:60px;height:100%;left:0;top:0;opacity:.5;filter:blur(30px);transform:translateX(-100px) skewX(-15deg)}
#store-style .storebutton:after{content:'';display:block;position:absolute;background:rgba(255,255,255,0.2);width:30px;height:100%;left:30px;top:0;opacity:0;filter:blur(5px);transform:translateX(-100px) skewX(-15deg)}
#store-style .storebutton:hover:before{transform:translateX(300px) skewX(-15deg);opacity:.6;transition:.7s}
#store-style .storebutton:hover:after{transform:translateX(300px) skewX(-15deg);opacity:1;transition:.7s}
#store-style .storebutton.but0{background:#3366ff;box-shadow:0 3px 0 #3366ff;color:#fff}
#store-style .storebutton.but2{background:#ff1a1a;box-shadow:0 3px 0 #ff0000}
#store-style .storebutton:hover{background:#01d3aa;color:#fff}
#store-style .storebutton.but0:hover{background:#809fff;color:#fff}
#store-style .storebutton.but2:hover{background:#ff4d4d}
#store-style .storebutton:active{box-shadow:0 1px 0 rgba(0,0,0,0.1);transform:translateX(0px) translateY(2px)}
.but0.but1,.but2{padding:14px}
.storelist{display:flex;padding:12px 5px;width:100%;float:left;color:#000;font-weight:700;line-height:28px;transition:all .6s}
.storelist:before{content:"\f14a";font-style:normal;padding:5px;margin:0 5px 0 0;transition:all .6s;font-family:fontawesome;speak:none;font-weight:400;font-variant:normal;text-transform:none;line-height:1;color:#ff1a1a;margin-right:.5em;width:25px;height:25px;font-size:21px;-webkit-font-smoothing:antialiased}

Selanjutnya kalian cari sidebar-wrapper didalam template kalian dan taruh tepat didalam makrup sidebar-wrapper kalian.

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

Setelah selesai kalian perlu menaruh Script berikut sebelum tag </body>

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

Setelah semuanya beres, kalian tambahkan script ini didalam post yang kalian ingin menambahkan tombol download perpost nya.

<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<a class="storebutton but0" href="http://www.ikramlink.com" target="_blank">Demo</a>

<a class="storebutton but1" href="http://www.ikramlink.com" target="_blank">Download</a>

<a class="storebutton but2" href="http://www.ikramlink.com" target="_blank">Buy $9.95</a>
<div class="rio-ss">
<span class="storelist">Remove Footer Credits</span>
<span class="storelist">One Time Payment</span>
<span class="storelist">No Encrypted Scripts</span>
<span class="storelist">Lifetime Premium Support</span>
<span class="storelist">For Unlimited Domains</span>
<span class="storelist">Lifetime Template Updates</span></div>
</div>
</div>
</div>

Save dan liahat hasilnya.

kalian bisa rubah css nya dengan blogger kalian, semoga artikel kali ini bermanfaat 😉😊