Cara baru membuat tombol download seperti Jalan Tikus

May 27, 2018    Blogger , Tutorials   

Cara baru membuat tombol download Jalan Tikus-Sobat pasti tahu kan situs Jalan Tikus, tempat yang yang dimana banyak menyediakan informasi menarik.

Kali ini saya akan membagikan bagaimana sih cara membuat tombol download yang keren seperti Jalan Tikus ?

Nah tombol download ini cukup berbeda dengan tombol download yang lainnya. Apa yang membedakannya ? pembeda dari tombol download lain, Tombol ini disertai berbagai macam tampilan keren, seperti ikon logo/ logo app/ logo game dan disetai dengan sumber pembuat game atau app yang sobat posting.

Tombol download ini terbagi menjadi 2 tombol, yaitu tombol download dari Google Playstore jika sobat menghubungkan dengan situs tersebut dan tombol download yang biasa jika sobat mencari sumber yang lain.

Untuk mengetahui bagaimana hasil dari pemasangan tombol ini, sobat bisa mengklik tombol demo dibawah ini.

Demo Click here

Berikut langkah-langkah membuat tombol download keren seperti Jalan Tikus. Ikuti langkah ini dengan teliti.

1. Login ke akun blogger sobat terlebih dahulu
2. Masuk ke menu template/theme, setelah itu pilih opsi Edit HTML
3. Setelah itu cari kode </head> agar lebih mudah sobat bisa dengan Ctrl + F lalu msukkkan kode kedalam kotak pencarian ini.
4. Jika sudah menemukan kode tersebut. Masukkan kode CSS 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.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> ...  

   CATATAN:
   Icon App itu icon yang akan ditampilkan pada tombol downloadnya, sobat bisa menambahkan icon yang lainnya dengan cara:
   

   + Upload gambar yang akan sobat jadikan ikon postingan
   + Copy link dan bikin baru CSS seperti ini
   

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

   
   + Untuk nama icon jangan spasi dan jangan sampai ada yang sama, nantinya akan double
   
5. Kemudian save template blog sobat

Kemudian untuk bangian HTML downloadnya di postingan, tinggal ikuti cara berikut:

1. Masuk ke postingan yang akan di pasang tombol downloadnya
2. Jangan lupa pilih mode HTML untuk membuatnya
3. Setelah itu masukkan kode HTML dibawah ini kedalam postingan sobat.
   

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

   CATATAN
   

   + COC ganti dengan nama icon yang sobat posting
   + Clash of Clans ganti dengan nama aplikasi atau game
   + 9.24.1 ganti dengan versi aplikasi atu game
   + Android: sesuaikan dengan sitem operasinya, macam windows,mac
   + # (tanda pagar): ganti dengan link download
   
4.  Selesai, tinggal sobat publikasikan

Sekian sobat, tutorials cara membuat tombol download keren sperti jalan tikus. Jika ada yang ingin di tanyakan silahkan sobat isi pada kolom komentar.