Cara Membuat Tombol Download Dengan Gaya Split Di Blogger | nafasmedia
Bagi kalian yang penasaran apa itu tombol download dengan gaya split, yaitu adalah tombol yang apabila kalian klik akan menampilkan outline atau akan muncul garis mengelilingi tombol download tersebut, tombol ini banyak digunakan oleh para pemilik website landing dan sebagai contoh kalian bisa melihat tombol yang digunakan situs safelinkku. scrol kebawah dan coba kalian lihat tombol submitnya. coba tekan dan kalian akan melihat outline biru yang mengelilinginya. Jika kalian penasaran dengan tombol yang akan kita buat, kalian bisa melihat demo codepen dibawah ini.
Bagaimana? tertarik untuk membuatnya? jika ia silahka ikuti langkah langkah dibawah ini. tapi sebelum nya tombol download yang akan kita buat membutuhkan icon download yang menggunakan font awesome. jadi silahkan pasang dahulu Font Awesomenya. saya asumsikan kalian sudah memasangnya, dan saya yakin sebelum kalian memasangnya didalam template kalian sudah terpasang font awesome, karena kebanyakan sih begitu. Apabila template kalian menggunakan font material design atau menggunakan svg, silahkan ganti icon download Font Awesome dengan font material design atau svg. saya yakin kalian sudah tau cara menggantinya. Baiklah teman teman cekidod.
TUTORIALNYA:
Baik, seperti biasa silahkan masuk keakun blogger kalian masing masing dan masuk kemenu template lalu edit template. Jika sudah copy dahulu code css dan pastekan diatas kode </style>. disini saya hanya memberikan tombol yang berwarna hijau, karena identik dengan tombol download. jika kalian mau tombol download yang lain silahkan tanyakan di kolom komentar biar saya kasih tau caranya disana.
/*button nafasmedia*/
.nfsmediabtnsplit {color:#fff;display: inline-block;font-weight: 400;font-family: Fira Code;color: #858796;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: 0.375rem 0.75rem;font-size: 1rem;line-height: 1.5;border-radius: 0.35rem;-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, bordercolor 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) {.nfsmediabtnsplit {-webkit-transition: none;transition: none;}}.nfsmediabtnsplit:hover {color: #858796;text-decoration: none;}.nfsmediabtnsplit:focus, .btn.focus {outline: 0;-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);}.nfsmediabtnsplit.disabled, .btn:disabled {opacity: 0.65;}a.nfsmediabtnsplit.disabled,fieldset:disabled a.btn {pointer-events: none;}.my-2 {margin-top: 0.5rem !important;}.my-2 {margin-bottom: 0.5rem !important;}.nfsbtn-icon-split {padding: 0;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.nfsbtn-icon-split .icon {background: rgba(0, 0, 0,0.15);display: inline-block;padding: 0.375rem 0.75rem;}.nfsbtn-icon-split .text {color:#fff!important;display: inline-block;padding: 0.375rem 0.75rem;}.nfsbtn-icon-split.btn-sm .icon, .btn-group-sm > .nfsbtn-icon-split.nfsmediabtnsplit .icon {padding: 0.25rem 0.5rem;}.nfsbtn-icon-split.btn-sm .text, .btn-group-sm > .nfsbtn-icon-split.btn.text{padding: 0.25rem 0.5rem;
}.nfsbtn-icon-split.btn-lg .icon, .btn-group-lg > .nfsbtn-icon-split.nfsmediabtnsplit .icon {padding: 0.5rem 1rem;}.nfsbtn-icon-split.btn-lg .text, .btn-group-lg > .nfsbtn-icon-split.nfsmediabtnsplit .text {padding: 0.5rem 1rem;}.text-white-50 {color: rgba(255, 255, 255, 0.5) !important;}
/*btn succes*/
.nfsbtn-success{color:#fff;background-color:#1cc88a;border-color:#1cc88a}.nfsbtn-success:hover{color:#fff;background-color:#17a673;border-color:#169b6b}.nfsbtn-success.focus,.nfsbtn-success:focus{-webkit-box-shadow:0 0 0 .2rem rgba(62,208,156,.5);box-shadow:0 0 0 .2rem rgba(62,208,156,.5)}.nfsbtn-success.disabled,.nfsbtn-success:disabled{color:#fff;background-color:#1cc88a;border-color:#1cc88a}.nfsbtn-success:not(:disabled):not(.disabled).active,.nfsbtn-success:not(:disabled):not(.disabled):active,.show>.nfsbtn-success.dropdown-toggle{color:#fff;background-color:#169b6b;border-color:#149063}.nfsbtn-success:not(:disabled):not(.disabled).active:focus,.nfsbtn-success:not(:disabled):not(.disabled):active:focus,.show>.nfsbtn-success.dropdown-toggle:focus{-webkit-box-shadow:0 0 0 .2rem rgba(62,208,156,.5);box-shadow:0 0 0 .2rem rgba(62,208,156,.5)}
Jika sudah silahkan simpan template dan kita akan menerapkan tombol download nya ke postingan atau halaman.. silahkan kembali ke dashboard blogger dan masuk ke menu postingan untuk membuat postingan Atau masuk ke menu halaman untuk membuat halaman dan mencobanya terlebih dahulu apakah sudah berhasil atau belum.
Apakah sudah masuk ke halaman edit postingan? jika sudah silahkan masuk ke mode html jangan compose. lalu copy kode dibawah dan pastekan disana.
<a href="#" class="nfsmediabtnsplit nfsbtn-success nfsbtn-icon-split">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<span class="text">Download</span></a>Langsung saja kalian publikasikan dan lihat hasilnya. Saya yakin kalian sudah berhasil dan apabila tidak muncul iconnya berarti templlate kalian belum terpasang Font Awesome.
PENUTUP:
Bagaimana keren bukan tombol download yang kita buat kali ini, Apabila terjadi error atau kode bertabrakan silahkan tanyakan ke colom komentar. Mungkin segini saja yang bisa saya sampaikan pada postingan kali ini, Sampai jumpa di next Artikel.
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 18/04/2020