Membuat Tombol Download Keren Seperti JalanTikus di blog

Tutorial Cara Membuat Tombol Download di Blogger Responsive

Cara Membuat Tombol Download Seperti Pada Website Jalan Tikus, pada kesempatan kali ini saya akan berbagi tutorial membuat tombol download keren yang akan menampilkan icon aplikasi / game seperti di website jalantikus.

sebelumnya saya juga sudah pernah share beberapa tutorial untuk cara membuat tombol download dan demo di halaman post blogger, untuk melihatnya kalian bisa kunjungi link artikel dibawh ini

Tutorial Blogger Lainnya :

Nah pada tombol download yang satu ini tampilannya cukup berbeda karena akan dipasang Icon / Logo dari aplikasi / game tersebut agar tampilannya lebih menarik, dilengkapi dengan 2 tombol download default dan kalian juga bisa menambahkan beberapa link alternatif didalamnya.
Untuk tutorialnya sangat mudah, kalian tinggal ikuti langkah demi langkah dibawah ini
Demo Tombol Download

Cara Membuat Tombol Download Keren di Blog

Masuk ke menu Template → Edit HTML

Selanjutnya cari kode </head>

Setelah ketemu masukan CSS dibawah ini tepat diatasnya


<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>

ICON APP Itu icon yang akan ditampilkan pada tombol downloadnya, kalian bisa menambah 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 yg sama, nanti bentrok

Save Template

Sekarang kalian tinggal memasukan HTML downloadnya di dalam postingan, caranya :

Masuk ke postingan yang ingin dipasang tombol downloadnya

di dalam postingan kalian pilih mode HTML jangan Compose

Setelah di mode HTML, 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>

COC : Ganti dengan nama icon yang sudah ada di daftar pada css
Clash of Clans : Ganti dengan nama aplikasi
9.24.1 : Ganti dengan versi aplikasi
android : Sesuaikan dengan sistem operasi, kalian bisa menggantinya dengan windows, mac dan blackberry
# (Tanda Pagar) : Ganti dengan link download kalian

Selesai, Sekarang kalian tinggal publikasikan / coba lihat pertinjauan dulu..

Menambahkan Link Download Alternatif

Mungkin di jalantikus tidak ada fitur ini, tapi apa salahnya buat jaga-jaga barang kali link download utama sudah tidak aktif. Untuk menambahkan link download alternatif kalian cukup masukan kode dibawah ini


<div class="link-alternative">
 <a href="#">4shared</a>
 <a href="#">Mediafire</a>
 <a href="#">Zippyshare</a>
 <a href="#">Tusfiles</a>
</div>

Sehingga nanti hasilnya seperti 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 class="link-alternative">
 <a href="#">4shared</a>
 <a href="#">Mediafire</a>
 <a href="#">Zippyshare</a>
 <a href="#">Tusfiles</a>
</div>
</div>

Selesai

Cukup sekian artikel tentang Cara Membuat Tombol Download Keren Seperti JalanTikus ini semoga bermanfaat, jika ada yang tidak dimengerti silahkan bertanya di kolom komentar.