Skip to content Skip to sidebar Skip to footer

Membuat Tombol Download Seperti Jalan Tikus di blog

Apa itu Tombol Download ?
Tombol Download adalah tombol yang akan di tujukan ke link download file dan yang lainya, biasanya blog atau website ini berisikan file downlaod seperti app, dokumen, serta yang lainya.

Dengan adanya Tombol Download ini sangat membantu mempercantik tampilan download serta memudahkan untuk pengujung di di situlah tempat downlaodnya.

Tombol download ini sangat keren karena di pasang icon / logo file yang di di download di lengkapi dengan 2 tombol dan link download alternatif yang bisa kalian tambah sesuka kalian.



Sebelum membuat Tutorial Cara Membuat Tombol Download Seperti Pada Website Jalan Tikus, yang harus kita persiapkan sebagai berikut
  • Blogger
  • Kode CSS dan HTML 
Kode CSS tombol download <style>
<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>

Keterangan

  • Ubah nama /*ICON APP*/ sesuai dengan postingan
  • URL warna merah ubah dengan gambar apps / logo downlaod kalian

Kode HTML tombol download di postingan
<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>
Keterangan 
  • 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

 Yuk kita simak cara membuat tutorial Tombol Download di blog Seperti Jalan Tikus, sebgai berikut
  • Buka dasbor blogger, menu tema, edit HTML
  • Copy paste kode CSS di atas </head>, yang sudah tersdia di atas. Setelah itu save


  • Copy paste kode HTML dipostingan ubah menjadi mode tampilan HTML


  • Save dan lihat hasilnya

Sekarang kalian sudah bisa membuat Membuat Tombol Download Keren Seperti JalanTikus di blog dengan mudah, semoga panduan ini bisa bermanfaat buat kalian, trima kasih

Post a Comment for "Membuat Tombol Download Seperti Jalan Tikus di blog"