√Cara Membuat Kotak Download Lengkap

Genara code-Banyak sekali tutorial tentang membuat tombol download pada sebuah postingan blog atau web. Disini Genara code akan berbagi informasi Cara Membuat Kotak Download seperti pada website jalanikus dan web lainnya .

Memang bisa dibilang ribet sih, karena berbeda dari yang lainnya. Setiap kali sobat post download, yang harus sobat perhatikan adaalah kode htmlnya dan merubah link url icon atau gambar yang sesuai pada kode CSS nya.

Baiklah, jika sobat setuju ingin membuatnya, mari kita langsung menuju tutorialnya dibawah ini:

Langkah pertama Genara code akan share kode html dan css nya dibawah ini:

Kode html:

<div id='box-download'>
    <div class='box-cover'>
        <div class='icon-app'> 
            <span class='ml'/> </div> 
            <div class='box-title'> 
                <span class='app-title'>Mobile Legends: Bang Bang</span> 
                <span class='app-version'>10.25.5</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="#">Download</a> <a href="#">Google Play</a> </div> </div>

Kode CSS:
Sobat bisa donwload kode CSS nya DISINI. Kemudian setelah sobat download css nya, bisa sobat salin dan tempelkan atau pastekan pada text editor atau notepad dahulu.

Langkah kedua, silahkan sobat lihat pada kode html yang Genara code blok warna merah dan biru, untuk warna merah bisa sobat ganti atau rubah sesuai dengan nama aplikasi atau game yang akan sobat post. Lalu, pada warna biru bisa sobat sisipkan link aktifnya antara download, aplikasi andorid dan lable.

Kemudian, pada kode Css nya sobat bisa cari url icon aplikasi atau game dibawah ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSJXI-fCs8mUGHYnHNxmInZpEWq8cVNuvSR9M352QrHPoUqGSE7ZQV_8jmYi1C4SaaT9xxGc0FtxuIjzy2p6BbLK3NBtcVmi1Hcva64b6TVHOM0EDKNUjoDyt3K-QHVkR2N-qC-VXGg6I/s1600/Mobile+Legend.png

Kemudian sobat ganti dengan url icon yang sobat inginkan atau yang sesuai dengan nama pada kode html.

Setelah itu, masuk ke akun blogger sobat, buat postingan baru. gabungkan kode html yang sudah sobat rubah dengan kode css yang sudah sobat ganti juga url gambarnya atau iconnya.

Untuk contoh, disini sundaku membuat kotak download game Mobile Legend ( ML) seperti dibawah ini:

<div id='box-download'> <div class='box-cover'> <div class='icon-app'> <span class='ml'/> </div> <div class='box-title'> <span class='app-title'>Mobile Legend</span> <span class='app-version'>10.25.5</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="#">Download</a> <a href="#">Google Play</a> </div> </div>
<style>
#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/AVvXsEhWMskq7ajbQ6iE_4m9s_6Q3662tX1UX6alFR4HwKXuc2WXInAwswNEcGCLGdtYgp1DZntSyPqG8CQLcwIcmo1iOEWGVeaF7b2yL9rZHE22RyAqIx7FJRek48bQeI96cjk0q2Y0RKobBR4/s1600/download.png') } .icon-app span.ml { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSJXI-fCs8mUGHYnHNxmInZpEWq8cVNuvSR9M352QrHPoUqGSE7ZQV_8jmYi1C4SaaT9xxGc0FtxuIjzy2p6BbLK3NBtcVmi1Hcva64b6TVHOM0EDKNUjoDyt3K-QHVkR2N-qC-VXGg6I/s1600/Mobile+Legend.png'); }
</style>

Setelah itu, silahkan sobat pertinjau terlebih dahulu sebelum dipublikasikan postingannya.

LIHAT DEMO

Mungkin sampai disini dulu Cara membuat kotak download lengkap pada postingan blog. Silahkan sobat modifikasi dengan kreasi yang sobat inginkan.

Jika ada pertanyaan, silahkan tinggalkan jejak sobat pada kolom komentar dibawah ya.

Semoga bisa bermanfaat.

Terima kasih