Cara Membuat Tombol Download Aplikasi Android Yang Keren Di Blogger

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 :

Nama Aplikasi Versi 3.2.1
Kategori oleh PUBLISHER_APP

Size : (XXX MB)
System Requirement : Android OS

Download
Google Play

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 :