Bangbil akan share sedikit tutorial tentang Cara Membuat Tombol Demo dan Download Dengan Efek Slide, tombol demo dan download pada umumnya pasti memiliki fungsi yang sama akan tetapi tombol demo dan download ini memiliki tampilan dengan style yang berbeda-beda.
Tentu saja hal seperti ini dilakukan untuk mempercantik/memperindah tampilan blog, supaya blog tidak keliatan biasa-biasa saja dengan tampilan tombol demo dan download bawaan blogger. Nah, efek slide ini juga akan muncul ketika cursor menyetuh tombol demo dan download-nya seperti demo yang kalian lihat pada thumbnail artikel ini.
Tombol demo dan download adalah elemen penting untuk blog, terutama yang berbagi konten seperti template, file, atau software. Selain mempermudah akses pengguna, tombol yang dirancang dengan baik dapat meningkatkan estetika blog, memperpanjang waktu kunjungan, dan bahkan meningkatkan konversi.
Menurut tren desain web 2025, tombol dengan efek animasi seperti slide atau gradient dapat meningkatkan rasio klik hingga 20%. Artikel ini akan memandu kalian langkah demi langkah untuk memasang tombol demo dan download dengan efek slide, Flat UI, dan kotak unduhan dengan counter, lengkap dengan customisasi, praktik terbaik, dan solusi masalah.
Mengapa Tombol Demo dan Download Penting untuk Blog?
Tombol demo dan download tidak hanya berfungsi sebagai tautan ke konten, tetapi juga sebagai elemen desain yang mencerminkan identitas blog kalian. Dengan desain yang menarik, seperti efek slide atau gaya Flat UI, tombol ini dapat membuat blog kalian terlihat lebih profesional dan modern. Berdasarkan Button Design Essentials, tombol dengan animasi (animated buttons) dan sudut membulat (rounded buttons) sedang populer di 2025 karena tampilannya yang dinamis dan ramah pengguna. Selain itu, tombol yang responsif dan mudah diakses di perangkat mobile dapat meningkatkan pengalaman pengguna, yang penting untuk SEO dan retensi pengunjung.
Cara Memasang Tombol Demo dan Download Dengan Efek Slide pada Blog
1. Ketika sudah berada di posisi Blogger.com pergi ke Template lalu Edit HTML
2. Sekarang cari kode ]]></b:skin> , kode bskin ini berisikan kode yang mana akan berdampak pada tampilan suatu blog, oh ya gunakan CTRL + F supaya memudahkan pencariannya.
3. Copy kode di bawah ini dan paste tepat sebelum kode ]]></b:skin>
#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background:
#fdfdfd;
border: 2px solid
#0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid
#efa666;
}
.btn-slide:hover {
background-color:
#0099cc;
}
.btn-slide2:hover {
background-color:
#efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color:
#fdfdfd;
color:
#0099cc;
}
.btn-slide2:hover span.circle2 {
color:
#efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color:
#0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color:
#efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color:
#30abd5/;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color:
#efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color:
#fff;
}
*Untuk kode yang bangbil tandai di atas adalah kode warna, kalian bisa ganti sesuka kalian dengan warna kode lain.
4. Sesudahnya silahkan kalian klik Simpan Template.
5. Nah, sekarang untuk menampilkan kode demo dan download pada postingan, silahkan kalian copy kode html untuk tombol dan downlod dengan efek slide dibawah ini, letakkan pada mode tampilan HTML saat menulis artikel.
<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
|
| Tab HTML |
6. Tambahkan Font Awesome: Jika ikon tidak muncul, tambahkan kode berikut sebelum </head> di template:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Cara Membuat Tombol Demo dan Download Flat UI
|
| Style 1 |
|
| Style 2 |
1. Tombol demo dan download kalian ini menggunakan Font Awesome, jadi silahkan tambahkan kode CSS berikut ini di atas </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
2. Selebihnya caranya masih sama seperti di awal, ini untuk kode di bagian]]></b:skin>
Style 1
/* CSS Button Style 1 by www.arlinacode.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}Style 2
/* CSS Button Style 2 by www.arlinacode.com */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-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)}}3. Ini kode yang diterapkan saat ingin memunculkan tombol demo dan download di artikel blog.
Style 1
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://www.bangbil.com" target="_blank">Demo</a></li>
<li><a class="download" href="https://www.bangbil.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>Style 2
<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="https://www.bangbil.com" target="_blank">Demo Link</a></li>
<li><a class="download" href="https://www.bangbil.com" target="_blank">Download Link</a></li>
</ul>
</div>
<div class="clear"></div>Memasang Tombol Download Box dengan Counter
1. Kode font awesome-nya sebelum </head> (Skip jika sudah ada kodenya di blogmu)
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>2. Tambahkan kode CSS ini sebelum </head>
<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>3. Setelah itu tambahkan kode ini sebelum </body>.
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)}
//]]>
</script> Edit tulisan pada kode yang ditandai, edit juga l=10 angka 10 berarti waktu mundur yang dibutuhkan adalah 10 detik.
4. Kode dalam artikelnya:
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Nama File
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="linkdownloadx" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Namina Responsive Blogger</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
File Size 300MB</span>
</div>
</div>
<div class="catatan-downx">
Jika tidak terdownload otomatis silakan klik download Ulang. Dan jika link rusak silakan lapor melalui halaman Contact Form blog ini.
</div>
</div>Baca Juga: Cara Membuat Daftar Isi Simple di Blog
FAQ
Apakah tombol ini hanya untuk Blogger?
Meskipun tutorial ini untuk Blogger, kode dapat diadaptasi untuk platform lain seperti WordPress, selama mendukung HTML kustom.
Perlukah keahlian coding?
Tidak, tutorial ini dirancang untuk pemula. Cukup salin dan tempel kode, lalu sesuaikan URL.
Bagaimana menyesuaikan tombol dengan tema blog?
Ubah warna di CSS (misalnya, #0099cc untuk tombol slide) dan gunakan ikon yang sesuai dari Font Awesome.
Kesimpulan
Memasang tombol demo dan download dengan efek slide, Flat UI, atau kotak unduhan dengan counter dapat meningkatkan estetika dan fungsionalitas blog kalian. Dengan langkah-langkah di atas, kalian dapat membuat tombol yang menarik dan sesuai dengan tema blog. Kalian bisa loh edit setiap kode warnanya di kode-kode yang terletak di bskin. Cobalah bereksperimen dengan warna, ukuran, dan gaya untuk menemukan kombinasi terbaik. Jika kalian mengalami masalah, gunakan solusi di bagian penyelesaian masalah. Sekian tentang cara
Memasang Tombol Demo dan Download di Blog dengan Berbagai Efek dan Style. Selamat mencoba dan buat blog kalian lebih menarik!
Referensi:
- http://www.arlinadzgn.com/2014/12/memasang-slide-demo-dan-download-button.html
- https://www.arlinacode.com/2016/04/membuat-tombol-demo-dan-download-flat-ui.html
- https://www.naminakiky.com/2018/11/memasang-tombol-download-box-dengan-counter.html
Diperbarui pada 18 April 2025