Cara Membuat Tombol Download Keren Seperti JalanTikus di Blog Responsive

tombol download keren, seo dan responsive seperti jalan tikus.com
Tombol download di postingan blog seperti jalantikus

Pernah mendownload file game,aplikasi atau software di situs website nalantikus.com? Mungkin kamu akan diperlihatkan tabel tombol download/download button yang bagus disertai logo dari aplikasi tersebut bukan? Selain itu tombol download ini juga sangat responsive, lalu bagaimana cara membuat tombol download mirip jalantikus di blog?

Tombol download ini cukup berbeda dari yang lainnya, selain sangat bagus untuk dipasang di blog download, ditabel download juga ditampilkan logo atau gambar file yang akan kita unduh, selain itu juga terdapat dua tombol default serta bebeberapa link alternative jika seandainya link download utama tidak aktif. Untuk memasangnya sendiri cukup mudah, caranya

Cara Memasang Tombol Download Seperti JalanTikus.com

Berikut tutorial lengkapnya
  • Login akun blogger kalian
  • Klik Menu Template > dan klik Edit HTML
  • Selanjutnya cari kode
  • Setelah ketemu, masukkan kode CSS button download mirip jalantikus responsive berikut 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>

  • Terakhir save template



  • ICON APP Itu merupakan icon atau logo yang akan ditampilkan pada tombol downloadnya, kalian bisa menambah icon lainnya dengan cara:
    • Upload gambar yang ingin dijadikan icon contohnya di blogger
    • Copy link gambar dan bikin css baru seperti
    • 
      .icon-app span.NAMA_ICON {
        background-image:url('LINK_ICON');
      }
    • Untuk nama ucon tidak boleh dibuat spasi, (ganti spasi dengan lambang garis bawah ( _ )). Dan tidak boleh ada nama yang sama.

    Cara Menerapkan Tombol Download di Halaman Postingan

    Setelah kamu selesai memasang kode CSS diatas tadi, selanjutnya adalah tutorial bagaimana cara menerapkan kode HTML tombol download tersebut di halaman postingan atau konten anda. Caranya cukup mudah sekali

  • Masuk kepostingan yang akan dibuat tombol downloadnya
  • Didalam postingan pilih mode HTML bukan Compose
  • Setelah berada di mode HTML 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
  • Mungkin di Jalantikus sendiri tidak ada fitur alternative link. Namun apa salahnya jika kita bersiap apabila link download utama rusak bukan. Untuk menambahkan link alternative tersebut dapat dilakukan dengan cara

  • Tambahkan kode HTML pada tombol download sebelumnya yaitu
  • 
    <div class="link-alternative">
     <a href="#">4shared</a>
     <a href="#">Mediafire</a>
     <a href="#">Zippyshare</a>
     <a href="#">Tusfiles</a>
    </div>
  • Sehingga hasilnya akan terlihat seperti berikut
  • 
    <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>
  • Kemudian Simpan perubahan pada postingan anda

  • Sangat mudah bukan untuk membuat tombol download mirip atau seperti website jalantikus.!

    Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.tulisanpanda.com. Donasi anda dapat berupa Klik iklan,share artikel, maupun via paypal kirim ke blogmaster.clone@gmail.com , Terima kasih.

    Berlangganan update artikel terbaru via email:

    0 Response to "Cara Membuat Tombol Download Keren Seperti JalanTikus di Blog Responsive"

    Posting Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel