Download Plus Icon adalah sebuah sebuah tombol yang terbentuk dari icon image dan script yang digabung manjadi satu sehingga dalam penerapannya akan sedikit kemungkinan terjadinya kesalahan dan rusaknya bentuk dalam posisi yang sudah ditetapkan, tombol ini sudah responsive sehingga penerapannya akan secara otomatis mengikuti atau menempatkan diri pada perangkat yang menampilkannya.
Penempatan Download Plus Icon akan menampabah kesan profesional dalam pada blog atau situs teman sekalian dan juga akan menarik perhatian para pengunjung untuk berkunjung kembali.
Biar sesuai dengan apa yang diharapkan, maka perhatikan langkah demi langkah penempatan kode script, style atau CSS dibawah ini dengan seksama. Langkah yang harus dilakukan adalah:
Cara meletakkan CSS Download Plus Icon pada blog.
Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Wl7Nxmt_lIu86t3jKZDD5P14APij2lDMnOk2eFtTe9TX4wchWKhNkOR6Y90VS0Ps-hHgW9qqWrVuuE6ZFe-P3KLAzB1p9RqXWuW44_7l_x5gRg2DtsnvCRgYGU8IHr1mNSqfdx69zbs/s300/download.png') }
.icon-app span.coc {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0VT9fhaLFEbET-ubFBNn4nLRHk3eW78xwT3BFk0q-Ct4O1Oh1Pfg0pRzbLNn3t0S3gQmNY3qEbEEe-BIu_Mh3Z-wYTkcpZFy7DXRZcpIIK8ZIy5wds86hSfXtrxImTjJu-ehCu1JGxi0/s300/coc.png'); }
.icon-app span.clash-royale {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUgsy3Os4pZWAElmr_bN7vM8HusR2tljkLqi94Xjs-BHJR-rTDGYRKWErvRHGi_1Z0r-ttyec2lMoDa8LxtiNW4wB-NPZLulocafO-0nq9_j97jJyik0PFxBR6wBFGRcxtVsYpyNLZUbE/s300/clash-royale-icon.png') }
.icon-app span.get-rich {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYl0kbJJA02wdAWZ6Fqem67bkj_D-AEUBaChHSPm6GzFP32mm3SpzRIimtIKB8oLjm09ERaqFQOt2KvdUpk9FFsUEWOMemw4-HXjbIJ5NMBfL91_L5Pi0qK4cVxu_usx7ygmQcJ_mrkrI/s300/get-rich-icon.png') }
.icon-app span.adobe-cc {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx8AdEMEV5obdHNYmEtqK6yJKIBpPqvHP-nC3DxevQKRvOldK84e2ZtW4Rqy36otTKY0xxBr1zGX_lh6En23wIGTdBBucdKJcCJ5Vr6XZ36WCnqAhDD8Hk4vBLyaAWw21upztz3gbT_K4/s300/ps-icon.jpeg') }
</style>
Pada teks box hijau adalah link Icon yang akan ditampilkan pada tombol download dan bisa diganti dengan link ikon lain sesuai dengan nama Icon.
Kemudian tekan tombol SAVE Template.
Cara memanggil CSS diatas pada entri posting blog.
Letakkan kode HTML dibawah ini sesuai keinginan dalam entri posting.
<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="XXXX">Download</a>
<a href="XXXX">Google Play</a>
</div>
<div class="link-alternative">
<a href="XXXX">4shared</a>
<a href="XXXX">Mediafire</a>
<a href="XXXX">Zippyshare</a>
<a href="XXXX">Tusfiles</a>
</div>
</div>
Pada teks box Clash of Clans bisa diganti sesuai dengan nama aplikasi.
Pada teks box 9.24.1 bisa diganti sesuai dengan versi aplikasi dimaksud.
Pada teks box android bisa diganti sesuai dengan sistem operasi bisa windows, mac, atau blackberry.
Pada teks box Aplikasi Android bisa diganti sesuai dengan type aplikasi dimaksud.
Pada teks box XXXX bisa diganti sesuai dengan link download aplikasi.
Jika semua selesai dan sesuai dengan pemaparan diatas maka langkah selanjutnya SAVE Template dan lihat hasilnya.
Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.
Show Parser Hide Parser