Membuat tombol download unik dan menarik juga jadi bagian untuk menarik pengunjung situs. Kadang, tombol yang tidak jelas memberi kesulitan bagi visitor untuk mendapatkan apa yang mereka cari dan meninggalkan blog yang dikunjungi.
Lalu bagaimana solusinya?. Solusinya ya membuat tombol download yang menarik, jelas, dan memudahkan pengunjung. Seperti tampilan papan google play atau play store yang kotak downloadnya bersih. Atau, coba perhatikan tombol milik jalantikus.com, sangat clean namun jelas dan memberikan informasi-informasi yang dibutuhkan oleh visitor.
Cara buatnya tidak sulit kok. silahkan lihat langkah-langkah sederhananya di bawah ini.
Cara Membuat HTML dan CSS Kotak Download JalanTikus
Cara memasang kode HTML dan CSS kotak download sudah tersedia cukup banyak di situs-situs tutorial. Khusus di artikel ini, tombol yang akan dibuat menyerupai tombol milik jalantikus.com atau googleplay dan play store yang clean. Langkah-langkahnya sangat mudah dan sederhana. Silahkan ikuti tutorialnya.
Membuat dan memasang CSS Tombol Download
Pada tutorial ini, sebenarnya kita tidak membuat lagi, tapi biar kata kuncinya cukup, tak apalah menyematkan kata "membuat". Source code diambil dari mastamvan.
Pertama, salin kode css yang sudah di sediakan di bawah ini.
CSS Code - Download Button
/* Button Download ala Jalan Tikus */
#box-download,
#box-download .box-cover,
#box-download .box-cover .box-title {
position: relative
}
#box-download .box-cover .icon-app,
#box-download .link-download {
position: absolute
}
#box-download,
#box-download .box-cover,
#box-download .box-cover .icon-app span,
#box-download .box-cover .box-title,
#box-download .label-grup,
#box-download .link-download a {
display: block
}
#box-download,
#box-download .box-cover .icon-app span,
#box-download .link-download a {
width: 100%
}
#box-download,
#box-download .link-download a {
border-radius: 0.230769230769231em
}
#box-download {padding: 1.15384615384615em;box-sizing:border-box;margin:0.384615384615385em 0;overflow:hidden;min-height:116px;border:1px solid #ddd;font-size:13px!important;max-width:100%;background:#FFF}
#box-download a{text-decoration:none}
#box-download .box-cover{min-height:6.61538461538462em;margin-right:10.0769230769231em}
#box-download .box-cover .icon-app{width:75px;height:75px;top:0;left:0}
#box-download .box-cover .icon-app span{background-size:100%;background-repeat:no-repeat;height:100%}
#box-download .box-cover .box-title{margin-left:6.15384615384615em}
#box-download .box-cover .box-title .app-title{font-weight:bold;color:#252525;font-size:150%}
#box-download .box-cover .box-title .app-version{font-size:90%;color:#727171}
#box-download .label-grup a{color:#666;font-size:12px}
#box-download .box-cover .box-title .tag-os{overflow:hidden;display:inline-block;vertical-align:middle;width:20px;height:20px;background-image:url(https://rawgit.com/mastamvan/image/master/device.png);background-repeat:no-repeat;background-size:100%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
#box-download .box-cover .box-title .tag-os.android{background-color:#6ab344}
#box-download .box-cover .box-title .tag-os.windows{background-position:0 33.33%;background-color:#1f9cf4}
#box-download .box-cover .box-title .tag-os.mac{background-color:#606060;background-position:0 66.67%}
#box-download .box-cover .box-title .tag-os.blackberry{background-color:#000000;background-position:0 99.99%}
#box-download .link-download{max-width:9.61538461538462em;text-align:center;top:1.15384615384615em;right:1.15384615384615em;width:30%}
#box-download .link-download a{padding:0.769230769230769em 0;margin-bottom:0.769230769230769em;text-transform:uppercase;color:#fafafa;font-weight:bold;font-size:100%}
#box-download .link-download a:nth-child(1){background:#008efa}
#box-download .link-download a:nth-child(2){background:#6ab344;margin:0}
.link-alternative{position:relative;display:block;font-size:11px;padding:0.909090909090909em 0 0}
.link-alternative:before{content:'Alternative:'}
.link-alternative a{padding:0 0.384615384615385em 0;border-right:1px solid #bbb;color:#008efa}
.link-alternative a:last-child{border:none}
@media screen and (max-width:400px){
#box-download .box-cover,
#box-download .box-cover .icon-app,
#box-download .box-cover .box-title,
#box-download .link-download {
margin:0 auto
}
#box-download .box-cover .icon-app {
position:relative
}
#box-download .link-download {
position:relative;
width:100%;
right:auto;
margin-bottom:0.769230769230769em
}
#box-download .box-cover .box-title .app-title,
#box-download .box-cover .box-title .app-version,
#box-download .box-cover .box-title .label-grup,
.link-alternative,
.link-alternative:before {
display:block;
text-align:center;
}
}
/* Ikon Aplikasi - tambahkan sesuai kebutuhan */
.icon-app span {background-image: url('https://rawgit.com/mastamvan/image/master/download.png')}
.icon-app span.coc {background-image: url('https://rawgit.com/mastamvan/image/master/coc.png');}
.icon-app span.clash-royale {background-image: url('https://rawgit.com/mastamvan/image/master/clash-royale-icon.png')}
.icon-app span.get-rich {background-image: url('https://rawgit.com/mastamvan/image/master/get-rich-icon.png')}
.icon-app span.adobe-cc {background-image: url('https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg')}
/* source code: mastamvan.blogspot.com */Paste kode CSS pada notepad atau bisa langsung di terapkan pada blog. Caranya:
- Login di Blogger.com
- Klik Theme / Template, Lalu tanda panah kebawah pada Customize / Kustom. Pilih Edit HTML
- Cari kode ]]></b:skin>. Lalu, Paste / Tempel kode CSS di atasnya
Membuat dan memasang HTML Tombol Download
Untuk menampilkan tombol download dalam artikel blog seperti situs jalantikus, ada tambahan kode HTML yang harus disematkan pada postingan.
Sebelumnya, siapkan Notepad untuk menyimpan kode HTML agar mudah bila ingin digunakan berkali-kali. Salin kode HTML di bawah ini lalu paste ke Notepad.
HTML Code - Download Button
<div id="box-download">
<div class="box-cover">
<div class="icon-app"><span class="kurirmu"></span></div>
<div class="box-title">
<span class="app-title">Kurirmu Apps</span>
<span class="app-version">V. 0.2.4 (<10 MB)</span>
<span class="label-grup"><span class="tag-os android"></span> Aplikasi Pesan-antar <a href="#">(System requirements)</a></span>
</div>
</div>
<div class="link-download">
<a href="#" rel="noopener" target="_blank">Download</a>
<a href="#" rel="noopener" target="_blank">Google Play</a>
</div>
<div class="link-alternative">
<a href="#" rel="noopener nofollow" target="_blank">4shared</a>
<a href="#" rel="noopener nofollow" target="_blank">Mediafire</a>
<a href="#" rel="noopener nofollow" target="_blank">Zippyshare</a>
<a href="#" rel="noopener nofollow" target="_blank">Tusfiles</a>
</div>
</div>
Kode HTML di atas masih bisa dikustom sesuai kebutuhan. Bagian-bagian yang bisa diubah adalah:
- kode span class="kurirmu" adalah kode yang memanggil ikon aplikasi/software. Pengaturannya ada pada kode CSS. Ganti kurirmu dengan kode yang diinginkan. Pastikan kode yang ingin digunakan sudah tersedia di pengatuan CSS-nya.
- kode span class="tag-os android" adalah kode yang memanggil ikon operation system seperti Mac (iOS) atau Android. Silahkan ganti kode "android" sesuai spesifikasi aplikasi. Pada kode CSS di atas, sudah tersedia ikon untuk Mac (tag-os mac), android (tag-os android), windows (tag-os windows), dan blackberry (tag-os blackberry)
- Untuk mengaktifkan Link, silahkan mengganti simbol hastag (#) dengan link tujuan atau sumber download.
- Nama Aplikasi pada bagian "app-title"
- Versi aplikasi pada bagian "app-version"
- Bagian link alternative bisa digunakan bila memiliki sumber yang lebih dari satu.
Bagaimana cara memasang kode html tombol download dalam postingan blog?
Mudah. Cukup buka postingan yang ingin disematkan tombol download. Ubah ke mode HTML atau HTML view. Lalu, tempatkan ke bagian yang di inginkan. Klik Update atau Publish bila postingan baru.
Semoga artikel blogging ini bermanfaat dan menjadi jawaban bagi yang ingin membuat dan memasang kode HTML dan CSS tombol download seperti di situs jalantikus. Silahkan berkomentar bila ada yang belum jelas.
Post a Comment