Cara Membuat Tombol Download di Sidebar Blogger

Cara Membuat Tombol Download di Sidebar Blogger, ala arlina, idntheme.com, ikramlink, gruptemplate.com
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



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:&#39;\f07a&#39;;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:&#39;&#39;;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:&#39;&#39;;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:&quot;\f14a&quot;;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 😉😊

About the Author

Saya seorang lulusan SMK

Posting Komentar


Cookie Consent
Ikramlink.com serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.