Membuat Tombol Download Seperti Jalantikus di Blog

Jalantikus merupakan sebuah website yang sudah lama sekali ada di Indonesia dan sampai sekarang Jalantikus masih tetap aktif dan keren dari tampilan dan berbagai hal lainnya tidak memungkinkan kita juga bisa membuat website seperti Jalantikus suatu saat nanti. Tapi kita kesampingkan itu sebentar karena yang akan dibahas saat ini adalah tampilan download pada jalantikus yang bagus.

Selain dari tampilan juga kita bisa menambahkan sendiri icon saat ingin merubah aplikasi yang akan di download tersebut tentu saja ini akan membuat blog kita menjadi bagus meski untuk menerapkanya agak ribet menurut saya sendiri. Tapi bila sudah biasa mungkin akan mudah saja dan tidak akan berkata ribet atau susah.

Membuat Tombol Download Seperti Jalantikus

Pertama buka Blog > Klik Template > Klik Edit HTML.

Kedua tambahkan kode dibawah ini diatas kode "</style"> atau dibawah "<style>".

#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://cdn.staticaly.com/gh/CodingT4/CodingT/bbb78a44/Images/download.png')  
}
.icon-app span.coc {
  background-image:url('https://cdn.staticaly.com/gh/CodingT4/CodingT/7b51a7cc/Images/coc.png');
}
.icon-app span.clash-royale {
  background-image:url('https://cdn.staticaly.com/gh/CodingT4/CodingT/7b51a7cc/Images/clash-royale-icon.png')
}
.icon-app span.get-rich {
  background-image:url('https://cdn.staticaly.com/gh/CodingT4/CodingT/7b51a7cc/Images/get-rich-icon.png')
}
.icon-app span.adobe-cc {
  background-image:url('https://cdn.staticaly.com/gh/CodingT4/CodingT/7b51a7cc/Images/cc-icon.jpeg')
}

Simpan template.

Icon App itu icon yang akan ditampilkan pada tombol downloadnya, bisa menambahkan icon lainnya dengan cara :
Upload gambar yang ingin dijadikan icon.
Copy linknya dan bikin css baru seperti :

.icon-app span.NAMA_ICON {
  background-image:url('LINK_ICON');
}

Untuk nama icon jangan kasih spasi dan jangan ada yang sama, nanti bentrok.

Tapi masih belum selesai sampai disini kita harus menerapkanya dibagian Post.

Pertama masuk ke postingan yang ingin dipasang tombol downloadnya.

Kedua di postingan kalian pilih mode "HTML" jangan "Compose"

Ketiga kalian copy kode dibawah ini.

<div id='box-download'>
<div class='box-cover'>
  <div class='icon-app'>
    <span class='coc'/>
  </div>
  <div class='box-title'>
   <span class='app-title'>Clash of Clans</span>
   <span class='app-version'>9.24.1</span>
   <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>

Ke empat kalian tinggal publikasikan atau coba lihat pertinjauan dulu.

COC : Ganti dengan nama icon yang sudah ada di daftar pada css.
Clas pf Clans : Ganti dengan nama aplikasi.
9.24.1 : Ganti dengan versi aplikasi.
android : Sesuaikan dengan sistema operasi.
# : Ganti dengan link download kalian.

Untuk melihat hasilnya kalian bisa melihat dibawah ini :

See the Pen Download Button Like Jalantikus by CodingT (@CodingT4) on CodePen.

Bagikan Artikel ini