cara membuat tombol download keren seperti jalan tikus
Situs ini menggunakan web dengan versi AMP yang jika diakses, loading pasti cepet banget. Ditambah lagi dengan tampilan yang minimalis dan simpel yang membuat para pembaca jadi betah untuk berlama-lama membaca tulisan disitus tersebut.
Situs jalan tikus ini memiliki desain yang berbeda dengan situs lain. Mulai dari tulisan, menu, dan tombol downloadnya. Nah, pernah gak sih kamu nyobain atau lihat desain tombol download yang digunakan oleh situs itu?
Tombol yang di desain dengan sangat rapih dan elegan ini bikin para blogger lain ingin mencobanya. Tombol download ini dibuat dilaman web, yang kemudian ditaruh di dalam artikel dengan beberapa kode pemanggil supaya loading tidak lambat.
Untuk cara pemasangan tombol download inipun tidaklah sulit. Kamu hanya perlu memasukan beberapa baris kode dibawah ini ke dalam laman blog kamu. Penasaran sama penampakannya ? Lihat gambar dibawah ini.
Nah, itulah cuplikan gambar pada tombol downloadnya. Keren dan elegan bukan? Kalau kamu ingin mencobanya, ikuti langkah-langkah dibawah ini.
Cara Memasang Tombol Download Keren Seperti Jalan Tikus
1. Sebelum lanjut, siapkan terlebih dahulu icon aplikasi yang akan kamu gunakan.
2. Login ke akun Blogger kamu dan masuk ke dasbor dan kemudian masuk ke menu Theme ---> Edit HTML.
3. Cari kode </head> (gunakan CTRL + F untuk mencari kodenya) kemudian copy semua kode dibawah ini dan tempel telat berada diatas kode tadi.
<style type="text/css"> #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:50.0769230769231em;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}} /*ICON APP*/ .icon-app span{ background-image:url('https://rawgit.com/mastamvan/image/master/download.png') } .icon-app span.BBM { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZjM393NO_D1cd2BX34fKMhtFX1S_EKt5VEp4S-m3Y_dbaW-5OI9iPe2r35ylp2ZWfv0yAy_DSzpYf8-RF5quEtXGSL5XSz4I_yZhKSU4a99xygXEbmu7cbBofnoG5f5v4MvptRZ5kDTOR/s1600/01.png'); } .icon-app span.WA { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Jnhd6Xx9CZ9gjgZ3ogQosKzo9CMXnxMMg3U8KehAXM0A7XEkK_h_CxI-8WEQnxiGpnx2S8-Eu0r_I3xNict4KUphOPrJbVEgBpA2kyqqWca85N5Sp-JHC5H9lO-joVBa0KAkX7Qr5hFP/s1600/02.png') } .icon-app span.FB { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwTWNhvtwy4xkSm0YB1yZon7FFMxEPkHdASRk0OSdVj8f7B0WwkVH4sK40t584b7DJdGS8kdAtZ5X0RrizLIwyvEbafWJIBzbEvTmP2HyKbK98JyHl5k3d2O3qauMIE492RZ6DvyPHMaN/s1600/03.png') } .icon-app span.IDM { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH1LhXneOm39MT2cylcrBoZKimzK8ER936NgNx9eXn2IzQvbNk9Oxd-oxJl4B6i6AJcnOfLbAZjW7yT8Ish6ty5DA99JCBW56_ylkt9M0qUNWXUCdOzcahmwOCe5lUhaFUTuldZ_mj9HxO/s1600/04.png') } .icon-app span.WIN7 { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhduuhWyhiY-jZnHvc_Uq448MDC_Dco5YnoUurmK1M_bdoqvg-jCtyCVqYHD_U_FwRV-8Tzi8G9L_VLuCYSieaVWUz_IbRlBU5NdHYPF6tJtDPcvMBeXr6hUWtxmeE2JnCyETqfTgRnhMui/s1600/05.png') } .icon-app span.WIN10 { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezQcZQCqec1hMK0FiOPnp0anmyBeq9rteQ38w0Ueczea2RZPFJPYsf5-ksxMUNOu051JynkaiOC2wpHQiUKydSfo0636V3HuCOrAKvrleSpG0qEgsUAKB39V-1yOkW5eKg0aOfoEsxXLO/s1600/06.png') } .icon-app span.WIN8 { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHMRlSktT5nb2R7Nm-_NejFH6iZ_rDHAooWQXdm2ZTsvreWEBsPhQFYoQJKlpwQL-v2mZBZg82JPXrv2I41CpvU2mXSw3G3eUcLz3YX0vb_mkjJGJSZQ4gmpZckMDloaDbaz-rU2k6Kri/s1600/07.png') } .icon-app span.IG { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCcYS6qZ8Qp1nh9KLqufp3XPO7TIuCgDU_37OySvoKIyJ4pR6ir3h3DPMia9wm-NkX_iXSRE4YYrrlTj8im1M2MrVizdSYui_cYAqtR9q5r8hRm0TqWj3oa381OMqJalLsluvuYTVxOmv/s1600/07f0d7b69ef071571e4ada2f4d6a053a-instagram-icon-background-by-vexels.png') } </style>
Ganti url img dengan url aplikasi yang ingin kamu pakai. Dan kalau kamu ingin menambahkan icon App lain, tambahkan kode dibawah ini diatas </style>.
.icon-app span.IG {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCcYS6qZ8Qp1nh9KLqufp3XPO7TIuCgDU_37OySvoKIyJ4pR6ir3h3DPMia9wm-NkX_iXSRE4YYrrlTj8im1M2MrVizdSYui_cYAqtR9q5r8hRm0TqWj3oa381OMqJalLsluvuYTVxOmv/s1600/07f0d7b69ef071571e4ada2f4d6a053a-instagram-icon-background-by-vexels.png') }Ganti nama icon-app dengan aplikasi yang ingin digunakan. Dan ganti juga url gambarnya.
4. Jika semuanya sudah ditempel, klik simpan perubahan dan masuk ke dalam postingan atau entri baru untuk membuat tombol downloadnya.
5. Setelah kamu masuk ke dalam postingan, pindahkan mode Compose ke mode HTML. Dan masukan kode dibawah ini ke dalam postingan kamu.
<div id="box-download">
<div class="box-cover">
<div class="icon-app">
<span class="WA">
</span></div>
<div class="box-title">
<span class="app-title">WhatsApp</span>
<span class="app-version">9.24.1</span><br />
<span class="label-grup"><span class="tag-os android"></span> <a href="Taruh link informasi aplikasi disini">Aplikasi Android</a></span>
</div>
</div>
<div class="link-download">
<a href="Taruh link download aplikasi disini">Download</a>
<a href="#">Google Play</a>
</div>
<div class="link-alternative">
<a href="#">4shared</a>
<a href="#">Mediafire</a>
<a href="#">Zippyshare</a>
<a href="#">Tusfiles</a>
</div>
</div>! Ganti tulisan "WA" dengan nama aplikasi yang ingin ditampilkan. Ganti juga url link diseriap tag <a href="#">...</a> dengan url atau link download aplikasi kamu.
5. Jika semuanya sudah selesai klik simpan dan coba pratinjau artikel tadi. Untuk demonya, kamu bisa klik tombol dibawah ini
Atau Kamu juga bisa lihat demonya di artikel saya yang satu ini.