Cara Mudah Membuat Tombol Download Seperti JalanTikus di Blog

Cara Mudah Membuat Tombol Download Seperti JalanTikus di Blog
Cara Mudah Membuat Tombol Download Seperti JalanTikus di Blog - Anda pasti ingin membuat tombol download mirip JalanTikus di Blog? Sangat tepat sekali, saya akan berbagi langkah-langkah membuat tombol download yang keren menampilkan icon game atau aplikasi seperti JalanTikus.
Cara Mudah Membuat Tombol Download Seperti JalanTikus di Blog

Pada tombol download keren yang satu ini sangat mirip dengan tombol download yang ada di website JalanTikus yang tampilannya memang menarik sekali, terdapat dua tombol download default dan anda bisa menambahkan link alternatif didalamnya.

Dengan memiliki tombol download yang keren, maka membuat blog anda menjadi terlihat profesional dan cantik di mata pengunjung, sehingga pengunjung bisa betah lama di blog anda.

Untuk tutorialnya cukup mudah, anda tinggal mengikuti langkah-langkah dibawah ini.

Cara Membuat Tombol Download Seperti JalanTikus di Blog

1. Login akun anda ke Blogger.com
2. Masuk ke Menu Template > Edit HTML
3. Jika sudah silahkan klik di area kotak yang berisi coding, lalu klik ctrl + f untuk memudahkan menacari kode </head>
4. Masukkan kode 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>
5. Jika sudah, silahkan Save Template.

 Sekarang anda memasukkan kode HTML download di dalam postingan, ikuti langkah-langkah dibawah ini :

1. Masuk ke menu Posting yang ingin anda pasang tombol download
2. Jika sudah berada di dalam, anda pasti melihat Compose & HTML, nah anda pilih HTML
3. Apabila sudah di mode HTML, anda salin 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>
 Keterangan :

  • COC : Silahkan di ganti dengan nama icon yang sudah terdaftar di css
  • Clash of Clans : Ganti nama aplikasi
  • 9.24.1 : Ganti versi aplikasi
  • android : Ganti sesuai sistem operasi, misalkan ganti dengan mac, blackberry dan windows
  • # (Tanda Pagar) : Ganti dengan link download
Jika sudah selesai silahkan anda publikasi postingan anda.

Cara Menambahkan Link Download Alternatif

Di jalan tikus memang tidak ada fitur yang satu ini, tapi anda bisa membuatnya, terutama link utama anda tidak aktif. Untuk menambahkan link download alternatif, caranya cukup masukkan kode dibawah ini pada postingan HTML, silahkan salin dan paste pada kode yang sudah dijelaskan diatas tadi.




<div class="link-alternative">
 <a href="#">4shared</a>
 <a href="#">Mediafire</a>
 <a href="#">Zippyshare</a>
 <a href="#">Tusfiles</a>
</div>
</div>
 Silahkan save dan publikasikan.

Mungkin itus aja tentang cara membuat tombol download seperti jalantikus dengan mudah, jangan lupa untuk dishare pada media sosial dibawah ini. Sekian dan terima kasih.

inspirasi : mastamvan
Blogger

Belum ada Komentar untuk "Cara Mudah Membuat Tombol Download Seperti JalanTikus di Blog"

Posting Komentar

Catatan Untuk Para Pengunjung
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Loading...