√ Cara Menciptakan Tombol Download Menyerupai Jalantikus

Cara menciptakan tombol download ibarat jalantikus - Tombol download yang tersedia di internet memang sangat aneka macam yang sanggup di terapkan di blog kesayangan kita. Tapi ada yang menarik dari salah satu situs download aplikasi terbesar yang aku ketahui yaitu jalantikus. Di situs jalantikus terdapat tombol keren dengan dua pilihan download untuk aplikasi android (APK), pertama download via play store dan yang ke dua download apk.

Lalu dikala aku membuka grup Blogger Indonesia di facebook, aku secara tidak sengaja menemukan ada yang membagikan artikel blog mastamvan yang membahas wacana cara menciptakan tombol download ibarat di jalantikus. Karena sangat menarik hasilnya aku membuka artikel tersebut dan aku praktekan di blog aku ini.

Setelah beberapa dikala ada yang menanyakan bagaimana cara menciptakan tombol download google play store. Akhirnya aku menciptakan artikel ini wacana cara menciptakan tombol download ibarat jalantikus. Sebenarnya Anda sanggup menciptakan tombol download sendiri menggunakan CSS jikalau Anda menguasai CSS.

Tapi bagaimana jikalau Anda belum menguasai CSS? Di artikel ini Anda tinggal mengcopy dan paste saja, alias tidak ngoding dari awal. Dan aku sanggup kodenya dari blog mastamvan yang beralamat mastamvan.blogspot.co.id. Oke eksklusif saja.

Cara Membuat Tombol Download Seperti Jalantikus

Langkah 1: Pertama Anda buka dan login dulu di blogger.com.

Langkah 2: Lalu anda masuk pada mebu Template/Tema kemudian klik Edit HTML.

Langkah 3: Kemudian cari instruksi </head> untuk mencari instruksi tekan tombol "CTRL+F" pada keyboard.

Langkah 4: Jika instruksi </head> sudah ketemu, selanjutnya anda copy instruksi CSS di bawah ini kemudian pastekan di atas instruksi </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> Untuk menambahkan app icon lainnya, sebelumnya Anda upload gambar dulu sebagai icon, kemudian ambil link urlnya atau Anda sanggup "copy image address" pada play store kemudian tambahkan CSS gres pada template/tema.
.icon-app span.NAMA_ICON {
  background-image:url('LINK_ICON');
} Lalu ntuk nama_icon jangan ada yang sama dan jangan menggunakan spasi.
Langkah 5: Save Template

Lalu bagaimana cara memasukkan instruksi downloadnya ke artikel biar menjadi tombol download ibarat jalantikus? Caranya gampang sekali, berikut langkah-langkahnya.

Langkah 1: Pertama Anda masuk/edit postingan yang ingin Anda masukkan tombol download ibarat di jalantikus.

Langkah 2: Lalu ubah mode Compose menjadi HTML.

Langkah 3: Setelah masuk pada mode HTML, kemudian anda copy instruksi di bawah, dan pastekan instruksi tersebut sesuai impian tata letak Anda.
<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 coc dengan app icon yang sudah Anda tambahkan di instruksi CSS tadi.
Clash of Clans: Ganti dengan nama aplikasi sesuai keingan Anda.
9.24.1: Ganti dengan versi aplikasi
Android: Sesuaikan dengan sistem operasi pada aplikasi, Anda sanggup menggantinya sesuai impian Anda.
#: Tanda # (pada) ialah link download aplikasi, Anda sanggup menggantinya sesuai link aplikasi yang Anda inginkan.
Langkah 4: Setelah menempatkan instruksi download ibarat jalantikus, kemudian sanggup Anda Publikasikan.

Mungkin itu dulu artikel kali ini wacana cara menciptakan tombol download ibarat jalantikus.

Share this post