Selamat datang di Web Mas Anggading, Pada kesempatan kali ini saya akan memberikan artikel tentang Cara membuat tombol download keren seperti jalan tikus. Siapa di antara kalian yang tidak tau tentang situs jalan tikus? Tentunya kalian semua pasti tau, dan jika kalian pernah mendownload aplikasi dari jalan tikus bagaimana tampilannya keren kan seperti di bawah ini :
Nah pada kesempatan kali ini, saya akan memberikan tutorialnya membuat tombol download seperti keren seperti jalan tikus di atas. Buat kalian yang ingin memasang seperti itu di blog kalian, kalian bisa ikuti langkah langkahnya di bawah ini ;
CARA MEMBUAT TOMBOL DOWNLOAD KEREN
Langkah pertama kalian bisa membuka dashboard Blogger kalian terlebih dahulu.
Jika sudah kalian bisa pergi ke Template lalu kalian klik Edit HTML
Jika sudah kalian bisa cari kode </head>
Jika sudah ketemu kalian bisa Salin dan Tempelkan kode CSS di bawah ini tepat di atasnya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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://rawgit.com/mastamvan/image/master/download.png') } .icon-app span.coc { background-image:url('https://rawgit.com/mastamvan/image/master/coc.png'); } .icon-app span.clash-royale { background-image:url('https://rawgit.com/mastamvan/image/master/clash-royale-icon.png') } .icon-app span.get-rich { background-image:url('https://rawgit.com/mastamvan/image/master/get-rich-icon.png') } .icon-app span.adobe-cc { background-image:url('https://assets.jalantikus.com/assets/cache/300/300/apps/2015/02/18/cc-icon.jpeg') |
| Catatan !!
Icon APP itu adalah icon yang akan di tampilkan pada tombol downloadnya, kalian juga bisa menambah icon lainnya dengan cara :
|
Jika sudah kalian bisa Simpan Template.
Nah langkah selanjutnya kalian tinggal memasang script download di postingan kalian dengan cara :
Kalian masuk ke psotingan dan kalian pilih mode HTML bukan Compose
Setelah kalian dalam mode HTML kalian bisa salin kode di bawah ini dan letakan di Postingan
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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="#">Download</a> <a href="#">Google Play</a> </div> </div> |
| Catatan !!!
COC : bisa kalian ganti dengan nama icon yang sudah ada di css tadi Clash Of Clans : Kalian bisa ganti dengan Nama Aplikasi 9.24.1 : Bisa kalian rubah dengan versi terbarunya Android : kalian bisa gantikan sesuai nama sistem operasi yang bisa di gunakan pada aplikasi itu # : Bisa kalian ganti dengan link tujuan atau link download |
Jika sudah kalian bisa Publikasikan atau kalian bisa Pertinjau terlebih dahulu
MENAMBAHKAN LINK ALTERNATIF
Jika kalian ingin menambah link alternatif untuk jaga jaga jika link utama eror kalian bisa menambahkan kode di bawah ini :
|
1 2 3 4 5 6 |
<div class="link-alternative"> <a href="#">4shared</a> <a href="#">Mediafire</a> <a href="#">Zippyshare</a> <a href="#">Tusfiles</a> </div> |
Maka hasilnya akan seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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="#">Download</a> <a href="#">Google Play</a> </div> <div class="link-alternative"> <a href="#">4shared</a> <a href="#">Mediafire</a> <a href="#">Zippyshare</a> <a href="#">Tusfiles</a> </div> |
Nah selsai. Kalian bisa tambahkan link link alternatif di Tag yang sudah di sediakan. Untuk demonya kalian bisa lihat di bawah ini :
Nah demikianlah artikel yang sudah saya bahas tentang Cara membuat tombol download keren seperti jalan tikus dengan mudah, Semoga artikel yang saya bagikan pada kesempatan inibermanfaat buat kalian semua.
