Membuat Tombol Download dengan Logo di Blog Selain mempermudah pengunjung untuk mengetahui tautan link yang digunakan untuk mengunduh Aplikasi maupun lainya. Tombol download dengan tambahan logo akan membuat website lebih terlihat keren dan profesional.
Selain reponsive (Mengitkuti ukuran layar), Icon atau logo dapat diubah secara manual sebelum melakukan posting. berikut demo nya.
DEMO
Jika anda tertarik menambahkan pada blog anda berikut langkah - langkahnya.
Membuat Tombol Download dengan Logo di Blog
1. Masuk pada blogger > Pilih Tema > Edit HTML.2. Masukan kode CSS dibaha ini tepat diatas kode </style> atau </b:skin>
#kotak-download,#kotak-download .kotak-cover,#kotak-download .kotak-cover .kotak-title{position:relative}
#kotak-download .kotak-cover .icon-aplikasi,#kotak-download .URL-download{position:absolute}
#kotak-download,#kotak-download .kotak-cover,#kotak-download .kotak-cover .icon-aplikasi span,#kotak-download .kotak-cover .kotak-title,#kotak-download .label-grup,#kotak-download .URL-download a{display:block}
#kotak-download,#kotak-download .kotak-cover .icon-aplikasi span,#kotak-download .URL-download a{width:100%}
#kotak-download,#kotak-download .URL-download a{border-radius:0.230769230769231em}
#kotak-download{padding:1.15384615384615em;kotak-sizing:border-kotak;margin:0.384615384615385em 0;overflow:hidden;min-height:116px;border:1px solid #ddd;font-size:13px!important;max-width:50.0769230769231em;background:#FFF}
#kotak-download a{text-decoration:none}
#kotak-download .kotak-cover{min-height:6.61538461538462em;margin-right:10.0769230769231em}
#kotak-download .kotak-cover .icon-aplikasi{width:75px;height:75px;top:0;left:0}
#kotak-download .kotak-cover .icon-aplikasi span{background-size:100%;background-repeat:no-repeat;height:100%}
#kotak-download .kotak-cover .kotak-title{margin-left:6.15384615384615em}
#kotak-download .kotak-cover .kotak-title .aplikasi-title{font-weight:bold;color:#252525;font-size:150%}
#kotak-download .kotak-cover .kotak-title .aplikasi-version{font-size:90%;color:#727171}
#kotak-download .label-grup a{color:#666;font-size:12px}
#kotak-download .kotak-cover .kotak-title .tag-os{overflow:hidden;display:inline-block;vertical-align:middle;width:20px;height:20px;background-image:url(https://3.bp.blogspot.com/-qxsTIWIo7S8/Xj5V91EEMyI/AAAAAAAAAEc/LAuHYBOCuZY34uc6JW-oc_tmvd04kgepQCLcBGAsYHQ/s320/device.png);background-repeat:no-repeat;background-size:100%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
#kotak-download .kotak-cover .kotak-title .tag-os.android{background-color:#6ab344}#kotak-download .kotak-cover .kotak-title .tag-os.windows{background-position:0 33.33%;background-color:#1f9cf4}
#kotak-download .kotak-cover .kotak-title .tag-os.mac{background-color:#606060;background-position:0 66.67%}
#kotak-download .kotak-cover .kotak-title .tag-os.blackberry{background-color:#000000;background-position:0 99.99%}
#kotak-download .URL-download{max-width:9.61538461538462em;text-align:center;top:1.15384615384615em;right:1.15384615384615em;width:30%}
#kotak-download .URL-download a{padding:0.769230769230769em 0;margin-bottom:0.769230769230769em;text-transform:uppercase;color:#fafafa;font-weight:bold;font-size:100%}
#kotak-download .URL-download a:nth-child(1){background:#008efa}#kotak-download .URL-download a:nth-child(2){background:#6ab344;margin:0}.URL-alternative{position:relative;display:block;font-size:11px;padding:0.909090909090909em 0 0}.URL-alternative:before{content:'Alternative:'}
.URL-alternative a{padding:0 0.384615384615385em 0;border-right:1px solid #bbb;color:#008efa}
.URL-alternative a:last-child{border:none}
@media screen and (max-width:400px){#kotak-download .kotak-cover,#kotak-download .kotak-cover .icon-aplikasi,#kotak-download .kotak-cover .kotak-title,#kotak-download .URL-download{margin:0 auto}#kotak-download .kotak-cover .icon-aplikasi{position:relative}#kotak-download .URL-download{position:relative;width:100%;right:auto;margin-bottom:0.769230769230769em}}
3. Simpan Tema.
Cara Penambahan Tombol Download Pada Postingan
1. Saat menulis ubah ke mode HTML.2. Masukan kode dibawah ini.
<div id='kotak-download'>
<div class='kotak-cover'>
<img class="icon-aplikasi" src="https://2.bp.blogspot.com/-ES917oR7VQg/Xj5P3dcTe0I/AAAAAAAAAEQ/YxBw5Z4OrPA1XQ388Bl1hoJEHrC8GWKVwCLcBGAsYHQ/s320/logo-tombol.png"/>
<div class='kotak-title'>
<span class='aplikasi-title'>Mobile Legends</span>
<span class='aplikasi-version'>1.4.47</span>
<span class="label-grup"><span class="tag-os android"></span> <a href="#">Moonton</a></span>
</div>
</div>
<div class="URL-download">
<a href="#">Download</a>
<a href="#">Google Play</a>
</div>
</div>
Untuk menyesuaikan dengan postingan atau artikel yang kamu buat. ubah kode atau URL yang ditandai
3. Selesai. pratinjau / publikasikan, untuk melihat hasilnya.
Contoh Kode tombol download dengan tambahan Link Alternatife
<div id='kotak-download'>
<div class='kotak-cover'>
<img class="icon-aplikasi" src="https://2.bp.blogspot.com/-ES917oR7VQg/Xj5P3dcTe0I/AAAAAAAAAEQ/YxBw5Z4OrPA1XQ388Bl1hoJEHrC8GWKVwCLcBGAsYHQ/s320/logo-tombol.png"/>
<div class='kotak-title'>
<span class='aplikasi-title'>Mobile Legends</span>
<span class='aplikasi-version'>1.4.47</span>
<span class="label-grup"><span class="tag-os android"></span> <a href="#">Moonton</a></span>
</div>
</div>
<div class="URL-download">
<a href="#">Download</a>
<a href="#">Google Play</a>
</div>
<div class="URL-alternative">
<a href="#">Drop box</a>
<a href="#">Mediafire</a>
<a href="#">Zippyshare</a>
<a href="#">Drive</a>
</div>
</div>
Ubah link Tautang dan Media download