Cara Membuat Tombol Download Aplikasi Android Yang Keren

Tombol Download Aplikasi - Mungkin diantara kalian ada yang mempunyai website yang bertujuan untuk memuat konten Download Aplikasi Android. Karena sekarang ngetrennya download aplikasi dari Website.

Oke langsung saja saya membagikan caranya,

Pertama, Kalian harus ke Edit template dengan cara : Blogger > Tema > Edit HTML

kemudian carilah kode dengan cara CTRL+F kemudian cari kata " ]]></b:skin> " lalu pastekan CSS berikut ini di atas kode yang anda cari tadi,

.sal-box{margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline;-webkit-tap-highlight-color: transparent;font-family: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;}
.sal-box > .item {display: block;float: left;position: relative;width: 100%;margin-bottom: 10px;background: #fff;}
.addon-apps {margin-bottom: 15px;padding: 5px 0;}
.addon-apps .apps-detail a {border-bottom: 1px solid transparent;}
.addon-apps .apps-detail a:hover {border-bottom: 1px solid #999999;}
.addon-apps .apps-detail.horizontal.xlSz {border: 0;padding: 15px 20px;}
.addon-apps .apps-detail.horizontal.xlSz .property {max-height: none;margin: 0;}
.addon-apps .apps-detail.horizontal.xlSz .info-container {padding: 0 15px;margin: 0;}
.addon-apps .apps-detail .note a, .addon-apps .apps-detail .note span {vertical-align: middle;}
.addon-apps .item {overflow: hidden;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.addon-discover {position: absolute;bottom: 0;right: 0;padding: 2px 10px;background: #f8f8f8;line-height: 0;border-top: 1px solid #dddddd;border-left: 1px solid #dddddd;-webkit-border-top-left-radius: 4px;-moz-border-radius-topleft: 4px;border-top-left-radius: 4px;}
.apps-detail.horizontal.xlSz {padding: 1.5%;}
.apps-detail.horizontal .os-icon {margin-right: 6px;}
.apps-detail.horizontal {display: block;align-items: center;}
.apps-detail.horizontal.xlSz .property {margin: 5px 0 10px 0;}
.apps-detail.horizontal.xlSz .action-btn:last-of-type {margin-bottom: 0;}
.apps-detail.horizontal.xlSz .action-btn {width: 100%;margin-bottom: 5px;}
.apps-detail.horizontal {position: relative;width: 100%;}
.apps-detail.horizontal.xlSz .info-container {margin: 2px 0 0 0;padding: 0 1.5%;}
.apps-detail.horizontal.xlSz .action-container {margin-bottom: 15px;padding: 5px 0;float: right;padding-right: 75px;}
.apps-detail {float: left;border: 1px solid rgba(255,255,255,0);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.trs, .trs:before, .trs:after {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;}
.apps-detail.horizontal .cover-container, .apps-detail.horizontal .info-container, .apps-detail.horizontal .action-container {position: relative;float: left;vertical-align: top;}
.title-text.dllight {font-size: 16px;}
.title-text.lSz {font-size: 20px;line-height: 28px;}
.title-text {font-size: 14px;line-height: 20px;font-weight: 700;}
.text-link {border-bottom: 1px solid rgba(255,255,255,0);color: grey;}
.cover {position: relative;overflow: hidden;}
.btn.bdrs4 {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.btn.clearBlue {background-color: #008efa;border: 1px solid rgba(0,0,0,0);color: #ffffff;}
.btn.clearGreen {background-color: #6ab344;border: 1px solid rgba(0,0,0,0);color: #ffffff;}
.btn.dllight {height: 40px;line-height: 38px;padding: 0 20px;font-size: 15px;}
.btn {display: inline-block;overflow: hidden;vertical-align: middle;padding: 0 10px;border: 1px solid #eeeeee;background: #ffffff;color: #008efa;text-align: center;cursor: pointer;}
.trs, .trs:before, .trs:after {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;}
a {text-decoration: none;}
.text-link.cl1 {color: #252525;}
.fs2 {font-family: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;}
.multi-ellipsis {overflow: hidden;position: relative;}
.text-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.content-format a:hover {border-bottom: 1px solid #008efa;}
.content-format .note a:hover {border-bottom: 1px solid grey;}
.content-format a {color: grey;border-bottom: 1px solid rgba(255,255,255,0);}
.content-format a, .content-format a:before, .content-format a:after {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;}
.os-icon {overflow: hidden;display: inline-block;vertical-align: middle;width: 20px;height: 20px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH22FO9Y6cqxmZs1IjFJafdN7M4K1hjnnM-g9di5gFLZ8o1Og9EWQU2zm5CDcFlyhsX7FfXkR9gLLGHJLLRmlhPgyvNgz4CObe4H6knURpBsNADhVSrh0e6idfHATD8y5fhwqUs8xcH2pK/s1600/widget.png);background-repeat: no-repeat;background-size: 100%;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.os-style.android {background-color: #6ab344;background-position: 0 0;}

apabila sudah maka silahkan anda Save,

Kemudian, Cobalah membuat artikel seperti biasanya di Artikel > Buat Artikel Baru kemudian beralihlah kemode HTML lalu masukan script berikut untuk memanggil fungsi CSS pada template,

<div class="sal-box cf addon-apps" style="margin: 5px 0;">
<div class="item cf">
<div class="apps-detail horizontal xlSz cf trs">
<div class="cover-container"><div class="cover-image-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUFe_vqbQCtwQ7b6p6J7H1lU8-GRG8u7YuHnfFAt2_3-q9Hzzky4P5lN_4ct8uu53m2TAIj9zNjPYXuagfA4r2Q3tuUdCGvJzUKVziIz0DvNNygwXiEONeNEXwG2pM1AQrICVhKoZtF5wJ/s1600/logo.png" alt="#"/>
</div>
</div>
<div class="info-container">
<div class="info">
<a href="#" class="title text-link-container">
<span class="title-text fs2 lSz text-link cl1 trs">Nama Game</span>
<span class="title-text fs2 lSz fwL text-link cl4 bdrB0"> Versi Game</span></a>
<div class="property multi-ellipsis ellipsis-fade text-ellipsis">
<div class="content-format">
<span class="note"><a href="#" class="os-style os-icon android trs" title="Android"></a>
<a href="#" class="text-link cl4 trs hidden-sm hidden-480 hidden-xs">Genre game</a>
<span class="hidden-sm hidden-480 hidden-xs" style='color:black'> oleh </span>
<a href="#" target="_blank" class="text-link cl4 trs" rel="nofollow">Pengembang game</a></span></div>
</div>
</div>
</div>
<div class="action-container">
<div class="action">
<a href="#" target="_blank"  class="action-btn download-btn btn dllight clearBlue bdrs4 title-text trs track-download"><i class="fa fa-download" aria-hidden="true"></i> Download</a>
<a href="#" target="_blank"  class="action-btn googleplay-btn btn dllight clearGreen bdrs4 title-text trs track-relink"><i class="fa fa-android" aria-hidden="true"></i> Google Play</a>
</div>
</div>
</div>
<div class="addon-discover"><span class="title-text xxsSz fwN text-link cl4 bdrB0"></span><a href="http://jokamp-cyber-fighter.blogspot.com/" class="title-text xxsSz text-link cl4"></a></div></div></div>

Kemudian silahkan kalian Publikasikan artikel sobat,

Nantinya akan keluar seperti berikut ini,

Hasilnya :

Nama Game Versi Game

Genre game oleh Pengembang game

Download Google Play

PERLU DIKETAHUI

Iklan yang tampil pada halaman situs ini sepenuhnya sudah diatur oleh Pihak Google, kami hanya menyediakan tempat kosong khusus untuk iklan dari Google. Maka, apabila ada iklan yang dirasa kurang baik bagi anda sehingga tidak seharusnya ditampilkan, harap segera menginformasikan hal tersebut kepada kami dengan melalui Formulir Kontak yang ada di bagian bawah sendiri pada situs ini. Kemudian, kami akan segera menyampaikannya pada pihak Google terkait masalah tersebut.
Laporan dapat anda sertakan lampiran :