Cara Membuat Tombol Download Keren Seperti Jalan Tikus di Blog

Jalan Tikus merupakan sebuah situs website yang berisi tentang software dan games gratis, aplikasi android/apk, tips - trik, berita seputar gadget dan informasi teknologi  di dunia. Pada tampilan webiste jalan tikus, kebanyakan artikelnya selalu menampilkan tombol download keren. Tombol download yang ada di website tersebut justru menjadi salah satu hal yang menarik untuk dilihat. Apalagi dengan adanya tombol download keren responsive di blog dapat membuat tampilan menjadi lebih menarik dari pada hanya tulisan biasa saja.

Maka dari itu, kali ini akan membahas bagaimana cara membuat tombol download keren ala Jalan Tikus di Blog. Cara dibawah ini saya dapatkan dari blognya Mas Tamvan dan Sotazone. Untuk lebih jelasnya silahkan simak langkah-langkah dibawah untuk membuat tombol download keren di blog ala jalan tikus.

Membuat Tombol Download Keren di Blog

Tombol Download Keren Seperti Jalan Tikus di Blog

1. Loggin ke akun Blogger.

2. Pilih menu Tema > Edit HTML. Selanjutnya Anda cari kode </head> atau kode <head/>
3. Masukkan kode dibawah ini tepat sebelum kode yang dicari 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.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>

Anda juga bisa menambahkan icon lainnya dengan cara menambahkan kode berikut:

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

NAMA_ICON silahkan diubah, tapi jangan gunakan spasi.

Klik save template.

Masukkan Kode HTML Didalam Postingan Blog

Setelah Anda memasukkan kode untuk memunculkan tombol download, selanjutnya adalah tinggal menerapkan kode tombol download didalam postingan. Caranya adalah sebagai berikut:

1. Buat postingan.
2. Didalam postingan tersebut, Anda pilih mode HTML.
3. Setelah itu, masukkan kode dibawah ini:

<div id='box-download'>
<div class='box-cover'>
  <div class='icon-app'>
    <span class='clash-royale'/>
  </div>
  <div class='box-title'>
   <span class='app-title'>Clash Royale</span>
   <span class='app-version'>1.23.4</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="Masukkan link download disini">Download</a>
 <a href="Masukkan link download disini">Google Play</a>
</div>
</div>

• Ubah clash-royale dengan icon yang sebelumnya sudah Anda tambahkan tadi.

• Ubah juga Clash Royale dengan nama icon yang Anda ubah. Sesuai dengan dengan nama game atau aplikasinya.

• 1.23.4 merupakan versi dari game atau aplikasi. Jadi Anda ubah versi tersebut dengan versi game atau aplikasi yang sesuai.

(Baca juga: Cara membuat tombol share responsive dibawah postingan blog)

Menambahkan Tombol Download Alternatif

Selain memasang tombol download keren ala Jalan Tikus, Anda juga bisa menambahkan sendiri tombol download alternatifnya. Berikut ini cara menambahkan tombol download alternatif responsive:

1. Klik menu Tema > Klik Edit HTML.
2. Cari kode ]]></b:skin> dan letakan kode dibawah ini sebelum kode yang dicari tadi.
3. Masukkan kode berikut ini:
   

   .button,input.button{position:relative;display:inline-block;margin-right:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer}
   .button,input.button{-webkit-transition:background-color 0.3s linear,color 0.3s linear;-moz-transition:background-color 0.3s linear,color 0.3s linear;transition:background-color 0.3s linear,color 0.3s linear}
   .button:hover,input.button:hover{border-bottom:none;background-color:rgba(84,87,102,0.9)}
   .button:active,input.button:active{box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 3px 1px rgba(0,0,0,0.1)}
   .button i{margin-right:0.667em;vertical-align:middle;line-height:1em!important}
   .button.red,input.button.red{background-color:rgba(253,104,91,1)}
   .button.red:hover,input.button.red:hover{background-color:rgba(253,104,91,0.9)}
   .button.blue,input.button.blue{background-color:rgba(96,158,234,1)}
   .button.blue:hover,input.button.blue:hover{background-color:rgba(96,158,234,0.9)}
   .button.mint,input.button.mint{background-color:rgba(79,206,173,1)}
   .button.mint:hover,input.button.mint:hover{background-color:rgba(79,206,173,0.9)}
   .button.purple,input.button.purple{background-color:rgba(171,148,233,1)}
   .button.purple:hover,input.button.purple:hover{background-color:rgba(171,148,233,0.9)}
   .linktambahan{padding-bottom:20px;padding-top:20px;}
   .alternatif{text-transform:uppercase;color:white;padding:3px;background:#6ab344;width:100%;font-family: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;text-align:center}

4. Klik save template.

Tombol download alternatif ini bisa Anda letakkan setelah button download ala Jalan Tikus. 

(Baca juga: Cara membuat syntax highlighter warna-warni di blog)

Contoh penerapannya adalah 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="sal-box cf addon-apps" style="margin: 5px 0;">
<div class="item cf">
<div class='alternatif'><b>Link Alternatif</div>
<div class='linktambahan'>
<center>
<a class="button purple" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Google Drive</a>
<a class="button mint" href="#" target="_blank"><i class="fa fa-cloud-download"></i>  Media Fire</a>
<a class="button blue" href="#" target="_blank"><i class="fa fa-cloud-download"></i> Upfile Mobi</a>
<a class="button red" href="#" target="_blank"><i class="fa fa-cloud-download"></i>  Zippy Share</a>
</center>
</div></b>
<div class="addon-discover"><span class="title-text xxsSz fwN text-link cl4 bdrB0">Distributor oleh </span><a href="#" class="title-text xxsSz text-link cl4">www.bloggingbray.blogspot.com</a></div></div></div><.div>

Save postingan. Dan lihat hasilnya seperti apa. Semoga tutorial diatas tentang cara membuat tombol download seperti jalan tikus dapat bermanfaat. Salam Blogger!.

Source: 
https://mastamvan.blogspot.co.id/2017/07/tombol-download-blog-seperti-jalantikus.html
http://www.sotazone.net/2017/09/tombol-download-jalantikus.html