Cara Membuat Tombol Download Aplikasi Android Yang Keren Di Blogger

 

Tombol Download Aplikasi Android

Jokam-Informatika.com Sobat ingin membuat Tombol Download Aplikasi Android di website atau blog sobat ? Hal ini memang sangat penting untuk mempercantik website kita pada bidang download aplikasi atau file. Jika tombol yang kita miliki didalam website kita menarik maka bukan hal mustahil pengunjung bisa betah berkunjung ke website kita. Semakin digemari dan ramai pengunjung, maka website kita akan semakin baik dimata pengunjung dan search engine dari segi keberadaan website diakui banyak orang dan juga dari segi penampilan yang menarik.

Seperti apakah cara membuat Tombol Download Aplikasi Android ?

Simak ulasan dibawah ini untuk mengetahui cara membuatnya,

 

Tombol Download Aplikasi – Banyak pengguna android yang gemar gonta-ganti aplikasi, aplikasi yang mereka pakai biasanya bersumber dari website yang menyediakan aplikasi sesuai yang mereka cari. Apabila anda merupakan pemilik website penyedia aplikasi atau file download sejenisnya, maka sobat sangat disarankan untuk mempercantik tampilan download pada website milik sobat tersebut. Di tahun modern ini nge-trend(populer) download aplikasi dari Website.

 

Membuat Tombol Download Aplikasi

Selain itu, fungsi pemercantik tampilan tombol download terbilang cukup ringan ketika diakses. Dikarenakan hanya memanfaatkan CSS dan HTML saja.

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://3.bp.blogspot.com/-GnZ0s3Ckxbs/WckVH6HOvjI/AAAAAAAAA6I/zu6TVVNlHEA29UEnUzsiupBTVkwyMGfhgCLcBGAs/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 ke mode 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://2.bp.blogspot.com/-2mgVzj6PZAA/WcklSA4cVoI/AAAAAAAAA6c/P0bjK7BM__gbshiAgXIYvIRQpfOwBtRVwCLcBGAs/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 :

Logo
Nama Aplikasi Versi 3.2.1
Kategori PUBLISHER_APP

Size : (XXX MB)
System Requirement : Android OS

Distributor oleh jokam-informatika.com

 

Gimana ?
Keren bukan?
Selamat mencoba di website kalian yah sobat.

 

Semoga dengan adanya artikel saya ini dapat membantu anda mempercantik website yang sedang kalian bangun.
Jangan lupa untuk Subscribe dan Share.
Sekian dan terimakasih.

 

Kata Kunci Terkait :

  • Cara Membuat Tombol Download
  • Cara Membuat Tombol Download Keren
  • Tombol Download Keren
  • Tombol Download
  • Tombol Download Website
  • Tombol Download Blogger
  • Tombol Download Blog
  • Gimana Cara Membuat Tombol Download
  • Membuat Tombol Download
  • Membuat Tombol Download Website
  • Membuat Tombol Download Keren
  • Tombol Download Keren

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 menyampaikan pada pihak Google terkait masalah tersebut.
Laporan dapat anda sertakan lampiran :
  • Nama Iklan
  • Alamat Screenshoot(Gambar) Iklan


About the Author:

CEO & Founder JOKAM INFORMATIKA [OFFICIAL]

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.