Button Download Responsive Ala Jalan Tikus
Sepertinya banyak sekali variasi button download blog yang bisa kita terapkan di blog, terutama bagi anda yang sering berbagi baik itu templates,software,aplikasi dan lainnya, tentunya button download harus mencerminkan blog anda hehe.. dan membuat pembaca anda bisa dengan mudah mengklik tombol download,
Kalo button download anda keren maka pengunjungpun akan betah berada di blog anda hehe..tapi gak pasti juga sih, button download saya modifikasi menggunakan box shadow dan text shadow, juga membahkan warning term of use untuk download, button download ini dijamin responsive di beberapa device karena sudah saya coba sebelumnya, silahkan simak dibawah ini
Membuat button download responsive
Silahkan lihat hasilnya, saya menggunakan jss fiddle
Langkah Pertama
Silahkan tambah CSS dibawah ini pada css anda, kalo sudah ada css button silahkan ditambahkan atau ganti dengan css dibawah ini
/* Demang download */
#downloadplay{overflow:hidden;padding:20px;margin:5px;background:#f8f8f8;border:1px solid #ddd;height:70px;max-height:auto}.dp-wrapper{float:left;width:50%}.dp-wrapper cv{font-size:12px;color:#999;width:auto}.imgdp{float:left;margin-right:12px}.imgdp img{width:70px;height:70px}.titledp a{font-size:16px;font-weight:Bold;color:#000}.versidp{font-size:14px;color:#999;padding-left:10px}a.dl{padding:7px;width:15%;max-width:auto;background-color:#008efa;border:1px solid rgba(0,0,0,0);color:#fff;border-radius:4px;font-size:12px;font-weight:Bold;text-align:center;float:right}a.dl:hover{background-color:#0082E5;border-bottom:none;color:#fff}@media only screen and (max-width:640px){.img-pertamax{height:auto}a.dl{width:98%}#downloadplay{height:auto}.dp-wrapper{float:none;width:100%}.imgdp{float:none}ul#relpost_img_sum li{float:left;list-style:none;overflow:hidden;width:90%}}
.warning {
border: 1px solid;
margin: 15px 0px;
padding:15px 20px 15px 55px;
width: auto;
font: 12px verdana;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-shadow: 2px 2px 2px #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 5px;
}
.warning {
border: 1px solid;
margin: 15px 0px;
padding:15px 20px 15px 55px;
width: auto;
font: 12px verdana;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-shadow: 2px 2px 2px #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 5px;
}
.warning { color: #9F6000;
background: #FEEFB3 url('https://sites.google.com/site/problogiz/my-icon/warning.png') no-repeat 10px center; }
Langkah Kedua
Pada saat membuat postingan, buatlah postingan di mode html, dan tambahkan html dibawah ini.
<h3 style="text-align: center;">
Download Background Wanita Cantik</h3>
<div>
<br /></div>
<ul>
<li>Name : <b><a href="http://www.downloaddesain.xyz/2017/10/background-wanita-cantik-hd-untuk.html" target="_blank">Download Background Wanita Cantik</a></b></li>
<li>File Type : .cdr .EPS .AI .PNG (.zip)</li>
<li>File Size : 863 kb</li>
</ul>
<div id="downloadplay">
<div class="dp-wrapper">
<div class="imgdp">
<a href="http://logovectordownload.blogspot.com/"><img height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8leK7UKT3jDOC53rOrYxMZPDnWbuJv6f_D-j_CAQizS001O8U2StQfMoxpBeeN6o9KQs5pXmiENzyUhZoaNWckQ193qInsp2f1dshWyzApWsrNkOttD0zqFFVgfyhQRw_neNXN7IDFLEh/s1600/background+wanita+cantik.jpg" title="Batalyon Raider TNI" width="300" /></a></div>
<span class="titledp"><a href="http://www.downloaddesain.xyz/p/term-of-use.html">Download Background Wanita</a></span><span class="versidp">.cdr .EPS .AI .PNG [zip]</span><br />
<cv>by downloading this file you agree to the <u><a href="http://www.downloaddesain.xyz/p/term-of-use.html" target="_blank">terms of use</a></u></cv></div>
<a class="dl" href="http://www.demangsafelink.xyz/p/convert-your-link.html?id=aHR0cHM6Ly9kcml2ZS5nb29nbGUuY29tL29wZW4/aWQ9MEJ4VGViTGRnZUVCQlptZDZWamRTTlUwNU5FMA==" target="_blank">Download</a>
</div>
<br />
<div class="warning">
By downloading this vector artwork you agree to the following :<br />
<br />
The artwork available for download in our free logo vector library are the intellectual property of the copyright and/or trademark holder, and is offered to you as a convenience for lawful use with proper permission from the copyright and/or trademark holder only. You hereby agree that you agree to the Terms of Use and that the artwork you download will be used for non-commercial use without infringing on the rights of the copyright and/or trademark holder and in compliance with the DMCA act of 1998.<br />
<br />
Before you use or reproduce this artwork in any manner, you agree to obtain the express permission of the copyright and/or trademark holder. Failure to obtain such permission is a violation of international copyright and trademark laws subject to specific financial and criminal penalties
</div>
Silahkan sesuaikan dengan judul postingan,url postingan,url download dan notice warning anda, semoga work dan bermanfaat