Cara Membuat Tombol Download Keren Seperti JalanTikus

komputerdia.com - Saat ini situs yang mengangkat tema download seakan sudah menjadi daya tarik bagi sebgaian orang, tidak terkcuali kemungkinan besar kalian sedang membangun situs dengan tema seperti itu. Jika menilik situs download terbesar di indonesia saat ini, kita bisa melihat kepopuleran yang diperoleh situs bagas31, Gigapurbalingga, kuyhaandroid, dan juga situs jalan tikus.

Pengertian Download adalah suatu proses transmisi atau pengambilan sebuah file dan data dari internet baik melalui web server, FTP server, mail server, server ataupun sistem lain yang identik ke penyimpnana perangkat komputer.

Dari internet, user/pengguna yang melakukan proses download (unduh) yaitu proses dimana seorang user meminta atau menrequest sebuah file dari sebuah komputer lain (seperti: website,server atau yang sebagainya) kemudian akan menerimanya.

Dengan kata lain, download adalah transmisi file dari internet ke komputer client/pengguna dapat dikatakan juga proses penerimaan atau pengambilan file dari internet/server ke komputer pribadi.

Membicarakan masalah situs download, di artikel kali ini saya akan mencoba menjelaskan bagaimana cara membuat tampilan dan tombol download seperti pada situs Jalan Tikus. Bagi kalian yang ingin membuat nuansa tampilan seperti itu, kalian dapat mengikuti langkah - langkah dibawah ini.

Baca Juga Artikel Menarik Lainnya:

Cara Membuat Tombol Download Keren Seperti JalanTikus

Membuat Tombol Download Seperti Jalan Tikus

Langkah pertama silahkan kalian masuk ke akun blogger
Pilih menu template atau theme kemudian klik tombol Edit Hml .
Setelah berada di halaman edit html, silahkan kalian cari kode </head> dengna menekan tombol Ctrl + F dikeyboard kalian dan ketikkan perintah </head> dan tekan enter.
Seteleh menemukan kode tersebut, letakkan kode dibawah ini tepat diatas kode </head>

<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/AVvXsEglX07YrHqDllwL_8GpX32Thz75Wsq4V4kVTCsZhMMMMlIIsrgrnMi7Dnva5QBHMG6p3YAk9Ev1PWrWBmLsH2VecC3pNA8ZRTBwv9IwgWGN4KnoQikDNiQaqnTeHykY_AOtQ94jL9DFNP-2/s1600/01.png');
}
.icon-app span.WA {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3wYwdkjfUD6u_HHWnUA4wYDwEimRXrYh3W1vLIAYwcyOa-adhASru7-tJ72avZj_KYkf8TPur7bAbLFkJs6igF0fXopHytaJ2QM8J1uIcflefsbTgMee4LyNGRvBW3sI0o_tsENVXJQA/s1600/02.png')
}
.icon-app span.FB {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGN683Ut7DKi67l5VGCAjYO9BzMY5DDSOTrWY6DPrjjt9IXMseBUR2tXGUJJg4bri1VrzGIYCIvYzWAFUYvqgrADlNluMDR5ChA2O5rM_rgeMmNbzKoeWs5X_twDG8-lt4QXKhZqeaA5w/s1600/03.png')
}
.icon-app span.IDM {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2THs1be9V31MplVx6CbuhBjdVhSp5hPAr9bp9owMWVtuLBTJFV9NErU0zhzQiaOPjO83VjfXAMAJZ9cQyWkTgM8wJRzg3p6Tle-pgjN-dQ8TzuzkyTdB8wREmB7OXGIykOfbk0A2xXWUP/s1600/04.png')
}
.icon-app span.WIN7 {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjrQUHD5UkZBxlR7cQ_ZZBYXc8TEz5JZJ6g8VtodJ8bQIOg3BZoZfbGnqNQ9lbnyDr8mEKnS5hhfW3nhHwopGg0CwUjLJox3mQE26JJ7T2L_LmO0woy_LUdd-jeVojnI0tgKDfLG49_HF/s1600/05.png')
}
.icon-app span.WIN10 {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0a5sB4UjurjVnLg-5PY5Vtg9JtrArTMJcRSgydAQeIZNObF0kVV7yoKd5ko2tMYKEREY9li3Wjg9uQ0W2uYXXgLn7_CCCJubBOe3yTwvjGAuVpGzRjPcsSgLSHgtVkyB2h0spW1XmWpUd/s1600/06.png')
}
.icon-app span.WIN8 {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUmqVe301ez-Rnqaue9m8Iq9hwbCRGRgkzGHrvgFlSWUGtnlB36jUD2lWGj07BVgtXzuwKlRiUr5eTuz0Q55DttqSeoz5dinpFxLH_p8AkDU2lgI9hidsiAd1B_KtGOTX-yhDeJifvV40M/s1600/07.png')
}
.icon-app span.IG {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5bBicZQopCKwm5xqwFTbjncDx72S9sIEoDEOM6ZUSwkhkkE9H3h-m9UMgpktarzYbp6u9PxJ71bWn3tfp3qf0hPwll0qzO5q_6O2Rr4zxV1zNtNjXJ0tWyiUaJnRz7teZTn1Qz9q_x2Nl/s1600/07f0d7b69ef071571e4ada2f4d6a053a-instagram-icon-background-by-vexels.png')
}
</style>

Kode warna Biru adalah nama icon yang nantinya akan kalian gunakan pada pembuatan postingan download
Kode warna Merah adalah alamat url gambar icon yang nantinya akan tampil dan bisa kalian gunakan didalam postingan kalian
Jika kalian akan menambahkan icon maka kalian tinggal tambahkan saja kode dibawah ini, dan letakkan sebelum kode </style> diatas.

.icon-app span.IG {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5bBicZQopCKwm5xqwFTbjncDx72S9sIEoDEOM6ZUSwkhkkE9H3h-m9UMgpktarzYbp6u9PxJ71bWn3tfp3qf0hPwll0qzO5q_6O2Rr4zxV1zNtNjXJ0tWyiUaJnRz7teZTn1Qz9q_x2Nl/s1600/07f0d7b69ef071571e4ada2f4d6a053a-instagram-icon-background-by-vexels.png')
}

Untuk ukuran icon, kalian buat dengan ukuran 96 X 96
Setelah gambar dibuat, kemudian kalian upload dan ambil alamat urlnya, lalu tempatkan pada kode yang berwarna merah .
Setelah semua kalian setting, silahkan kalian tekan tombol simpan .
Selanjutnya silahkan kalian coba membuat postingan download kalian, dengan cara masuk ke menu entri baru .
Setelah berada dihalaman posting, kalian pindahkan mode compose ke mode html, dan tempelkan kode dibawah ini

<div id='box-download'>
<div class='box-cover'>
  <div class='icon-app'>
    <span class='WA'/>
  </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="#">Aplikasi Android</a></span>
  </div>
</div>
<div class="link-download">
 <a href="#">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>

Warna biru adalah kode atau nama icon yang kalian buat di bagian CSS tadi
Warna merah adalah informasi dari aplikasi yang kalian posting
Warna hijau adalah nama yang akan muncul di tombol download
Warna coklat adalah link alternatif yang bisa kalian gunakan, jika kalian mempunyai banyak server yang kalian gunakan untuk mengupload aplikasi yang akan kalian posting
Setelah semuanya telah kalian buat, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya
Semoga bermanfaat untuk kalian semuanya

Cara Membuat Tombol Download Keren Seperti JalanTikus

Membuat Tombol Download Seperti Jalan Tikus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Kategori Artikel Pilihan