Ini lanjutan dari cara membuat blog download Apk
Untuk membuat download Apk kayanya tidak lengkap jika tidak adanya box download yang lumayan bagus
Nah ini lanjutan dari pembahasan kemarin cara membuat blog download Apk
Cara membuat box Download
1. Silahkan masukan css berikut diantara kode <b:skin>dan </b:skin>atau anda bisa menambahkan style sendiri di atas kode </head> kodenya di bawah
<!--css box download-->
<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}} </style>
2. Kode CSS di atas adalah kode utama yang merubah box download nantinya dan untuk kode htmlnya untuk menampilkan box download di halaman browser di bawah berikut
<div id='box-download'> <div class='box-cover'> <div class='icon-app'> <span class='box'/> </div> <div class='box-title'> <span class='app-title'>Nama judul download</span> <span class='app-version'>versi</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="Url box 1">Download</a> <a href="Url box 2
">Google Play</a> </div> </div>
Rincian :
Box : tulisan box diatas hitam tebal merupakan pemanggil gambar yang akan di tampilkan nantinya di box download namun untuk menampilkan gambar anda harus menambahkan
.icon-app span.box{
background-image:url(disini url gambar);
}
background-image:url(disini url gambar);
}
Untuk semua gambar nantinya berbeda-beda sesuai id atau nama yang kamu masukan untuk menyesuaikan icon dengan url gambarnya jadi harus sama
Nama judul Download: nama apk nya
Versi : untuk versi
Url box 1 : Alamat download pertama
Url box 2 : Alamat url ke 2
Selesai
Terima kasih telah membaca artikel tentang Cara Membuat box download Seperti Jalan Tikus di blog successful blogger jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.