bagaimana keren bukan? memang tombol downloadnya saya desain semirip mungkin dengan yang aslinya. sekarang coba perbandingkan dengan yang ada di Google Play Store. dari warna, tampilan,hover, dan juga effek splitnya sangat mirip bukan? dan ingat ini tidak akan membebani loading blog anda karena hanya menggunakan sedikit css dan html. dan jika kalian minat dengan tombol downloadnya kalian bisa ikuti tutorial dibawah ini, cekidot.
TUTORIALNYA:
Baik teman teman kalian hanya membutuhkan 2 paket kode yaitu 1 paket kode html dan 1 paket kode css. pertama yang harus kalian lakukan adalah masuk ke akun blogger kalian dan masuk kemenu Tema lalu ke edit html. silahkan lakukan itu terlebih dahulu.
Jika sudah silahkan copy semua kode css dibawah ini dan paste di atas tag </head>
<style>
/*TOMBOL DOWNLOAD NFSMEDIA*/
.gplaybtndlnfs {
display: inline-block;
font-weight: 400;
font-family: Roboto;
color: #fffimportant;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 7px 6px;
font-size: 14px;
line-height: 1.5;
border-radius: 4px;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.gplaybtndlnfs {
-webkit-transition: none;
transition: none;
}
}
.gplaybtndlnfs:hover {
color: #858796;
text-decoration: none;
}
.gplaybtndlnfs:focus,
.gplaybtndlnfs.focus {
outline: 8;
-webkit-box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}
.gplaybtndlnfs.disabled,
.gplaybtndlnfs:disabled {
opacity: 9;
}
a.gplaybtndlnfs.disabled,
fieldset:disabled a.btn {
pointer-events: none;
}
.gplaybtnscss {
color: #fff;
background-color: #689f38;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.gplaybtnscss:hover {
color: #fff;
background-color: #8bc34a;
}
.gplaybtnscss:focus,
.gplaybtnscss.focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(62, 208, 156, 0.5);
box-shadow: 0 0 0 0.2rem rgba(62, 208, 156, 0.5);
}
.gplaybtnscss.disabled,
.gplaybtnscss:disabled {
color: #fff;
background-color: #33691e;
}
.gplaybtnscss:not(:disabled):not(.disabled):active,
.gplaybtnscss:not(:disabled):not(.disabled).active,
.show>.gplaybtnscss.dropdown-toggle {
color: #fff;
background-color: #33691e;
border-color: #33691e;
}
.gplaybtnscss:not(:disabled):not(.disabled):active:focus,
.gplaybtnscss:not(:disabled):not(.disabled).active:focus,
.show>.gplaybtnscss.dropdown-toggle:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(62, 208, 156, 0.5);
box-shadow: 5em rgba(62, 208, 156, 0.5);
}
.text {
font-family: Calibri;
font-weight: 820;
font-size: 16px;
padding: 0.9rem;
}
</style>Jika sudah, langsung saja kalian terapkan di blog/website kalian. caranya dengan memasukan kode html pemanggil dibawah dan masukkan ke postingan kalian. ingat masuk di html jangan compose.
<a href="#" class="gplaybtndlnfs gplaybtnscss" >
<b class="text">Instal</b>
</a>Atau jika masih bingung silahkan lihat screenshot dibawah
masuk ke menu edit postingan lalu buat postingan lalu masuk ke html jangan compose dan pastekan disana dan jangan lupa ganti tanda # dengan url download kalian. tambahkan <div style="text-align: center;"> diawal dan </div> diakhir, untuk membuat tombol berada ditengah.
tombol download ini sangat bagus untuk diblog/website download aplikasi, karena mirip dengan di toko aplikasi terkenal yaitu Google Play Store. jika merasa kesulitan silahkan tanya dikolom komentar.
tombol download ini sangat bagus untuk diblog/website download aplikasi, karena mirip dengan di toko aplikasi terkenal yaitu Google Play Store. jika merasa kesulitan silahkan tanya dikolom komentar.
PENUTUP:
Baiklah itu dia Cara Membuat Tombol Download Style Google Playstore Web dan artikel kali ini samai disini saja, terimaksih sudah berkunjung, sampai juma di artikel selanjutnya.
Jangan sekali kali mengubah atau memodifikasi kode html dan css diatas!!! karena kami membuat kode diatas juga bukan perkara yang mudah! copas boleh asal credit/sumber jangan dihapus!!! Tutorial asli dari nafas media 10/04/2020.
0 Comments