Cara Membuat Tombol Download Seperti Jalantikus - Rafsablog.id

Cara membuat tombol download seperti jalantikus - Tombol download yang tersedia di internet memang sangat banyak sekali yang bisa di terapkan di blog kesayangan kita. Tapi ada yang menarik dari salah satu situs download aplikasi terbesar yang saya ketahui yaitu jalantikus. Di situs jalantikus terdapat tombol keren dengan dua pilihan download untuk aplikasi android (APK), pertama download via play store dan yang ke dua download apk.

Lalu saat saya membuka grup Blogger Indonesia di facebook, saya secara tidak sengaja menemukan ada yang membagikan artikel blog mastamvan yang membahas tentang cara membuat tombol download seperti di jalantikus. Karena sangat menarik akhirnya saya membuka artikel tersebut dan saya praktekan di blog saya ini.

Setelah beberapa saat ada yang menanyakan bagaimana cara membuat tombol download google play store. Akhirnya saya membuat artikel ini tentang cara membuat tombol download seperti jalantikus. Sebenarnya Anda bisa membuat tombol download sendiri menggunakan CSS jika Anda menguasai CSS.

Tapi bagaimana jika Anda belum menguasai CSS? Di artikel ini Anda tinggal mengcopy dan paste saja, alias tidak ngoding dari awal. Dan saya dapat kodenya dari blog mastamvan yang beralamat mastamvan.blogspot.co.id. Oke langsung saja.

Cara Membuat Tombol Download Seperti Jalantikus

Langkah 1: Pertama Anda buka dan login dulu di blogger.com.

Langkah 2: Lalu anda masuk pada mebu Template/Tema lalu klik Edit HTML.

Langkah 3: Kemudian cari kode </head> untuk mencari kode tekan tombol "CTRL+F" pada keyboard.

Langkah 4: Jika kode </head> sudah ketemu, selanjutnya anda copy kode CSS di bawah ini lalu pastekan di atas 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.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://assets.jalantikus.com/assets/cache/300/300/apps/2015/02/18/cc-icon.jpeg')
}
</style> Untuk menambahkan app icon lainnya, sebelumnya Anda upload gambar dulu sebagai icon, lalu ambil link urlnya atau Anda bisa "copy image address" pada play store kemudian tambahkan CSS baru pada template/tema.

.icon-app span.NAMA_ICON {
  background-image:url('LINK_ICON');
} Lalu ntuk nama_icon jangan ada yang sama dan jangan memakai spasi.
Langkah 5: Save Template

Lalu bagaimana cara memasukkan kode downloadnya ke artikel agar menjadi tombol download seperti jalantikus? Caranya mudah sekali, berikut langkah-langkahnya.

Langkah 1: Pertama Anda masuk/edit postingan yang ingin Anda masukkan tombol download seperti di jalantikus.

Langkah 2: Lalu ubah mode Compose menjadi HTML.

Langkah 3: Setelah masuk pada mode HTML, lalu anda copy kode di bawah, dan pastekan kode tersebut sesuai keinginan tata letak Anda.
<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>
coc: Ganti coc dengan app icon yang sudah Anda tambahkan di kode CSS tadi.
Clash of Clans: Ganti dengan nama aplikasi sesuai keingan Anda.
9.24.1: Ganti dengan versi aplikasi
Android: Sesuaikan dengan sistem operasi pada aplikasi, Anda bisa menggantinya sesuai keinginan Anda.
#: Tanda # (pada) adalah link download aplikasi, Anda bisa menggantinya sesuai link aplikasi yang Anda inginkan.
Langkah 4: Setelah menempatkan kode download seperti jalantikus, lalu bisa Anda Publikasikan.

Mungkin itu dulu artikel kali ini tentang cara membuat tombol download seperti jalantikus.