Belajarcoding2018 - Saat ini situs yang mengangkat tema download seakan sudah menjadi daya tarik bagi sebgaian orang, tidak terkcuali kemungkinan besar kalian sedang membangun situs dengan tema seperti itu. Jika menilik situs download terbesar di indonesia saat ini, kita bisa melihat kepopuleran yang diperoleh situs bagas31, Gigapurbalingga,kuyhaandroid, dan juga situs jalan tikus.
Membicarakan masalah situs download, di artikel kali ini saya akan mencoba menjelaskan bagaimana cara membuat tampilan dan tombol download seperti pada situs Jalan Tikus. Bagi kalian yang ingin membuat nuansa tampilan seperti itu, kalian dapat mengikuti langkah - langkah dibawah ini.
Membuat Tombol Download Seperti Jalan Tikus
- Langkah pertama silahkan kalian masuk ke akun blogger
- Pilih menu template atau theme kemudian klik tombol Edit Hml .
- Setelah berada di halaman edit html, silahkan kalian cari kode </head> dengna menekan tombol Ctrl + F dikeyboard kalian dan ketikkan perintah </head> dan tekan enter.
- Seteleh menemukan kode tersebut, 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://rawgit.com/mastamvan/image/master/download.png')
}
.icon-app span.BBM {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPofnuXjytLp2kNG6AUdodqL_F_4cjsoblnQTL02ZmOBn-7jc17YtJwZTi5DHFDOWBiDVLYHsmwkRS5WIoOCqjVA-GVeZ_wboFjbrnvKB89uWjgPInM30jM6NhtSjamI0x8ncUTYCrGEVN/s1600/01.png');
}
.icon-app span.WA {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGCngVWGPds8BgLUnjE3z0V4UDpq3hayVINmz1js5PoEWaeN217VqyY2urQPmujQLTD7T8KGIl-s4Aa_UuROqA50PpJke14ztwOa1mGpgUm01hndkptcQiwiUJaLv_MxWj05EMw4lwTZQ/s1600/02.png')
}
.icon-app span.FB {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAlvKyXClVxMgAUxCFf0u8s3Gr4iaxyH0weJkA2QF832W3RsWC3Sc80JWP5ZWS5ARiohlcg8uYj40yM06bTwUh9wpQ5RIgU4FLDcP4AytoBJDfd0Zu90NUOeX5CL3Ya_SMbZXZYyz1kTxT/s1600/03.png')
}
.icon-app span.IDM {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3dQTXPdZdZ2x4rXPCTZqe9bunDntM_hESWFWef0o_xF6eHXM2CDkEeKzK43BIEJ8bB8vudeIgKOsT7EpWpUmmin-Lawy75vQuq70Z7FKhI8Ya1Nu2wMAyqXyJ9vasNBIG1F3EmYz23s2l/s1600/04.png')
}
.icon-app span.WIN7 {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmf8TG2QNf9FuxfJdqEXea9cG500g0q5XZ78h3S67mNEg1LUihqgwN0SDDp0iaAE_yY93-WjA8LToS1BseW790GRb2GSVtjuVM2Mu2OOiZ3XDypcx3dKHkf-YbhYweGynJjZ1kQ5col3g/s1600/05.png')
}
.icon-app span.WIN10 {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkcqpedpMpYSw7RMmt3zXP5F6A8ghLt7eaDIci0e4Kqo0RqqnIW_6M8aWf3nxZIJzg-0ymyxMJfL8E8B_Y-nEhCMAyiYgBP2-4pp01Xci8-qKVizJOV57khBLHMjm5PduLgefsp6yMRPjY/s1600/06.png')
}
.icon-app span.WIN8 {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtckoDOwwqG0KsbHiTOf-fNDrH2fDHpDd5Ag42jkDRByWsY7rWs8fSIaoPEy1ebvel4KGMr4sw9y6Hrj_wsAjisYxD0Y8kusDdBYGF-5_YHvh_MKdISdhyphenhyphenm7Oib05Iqw_7lv9cEOgy1eD/s1600/07.png')
}
.icon-app span.IG {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzStyWRPaKOFOk-aaNgxXKupgk6Onkjwxbb5gbYXZ2YVzDdWY5zyLXXPj6FgmTNPaephtIqHLIZF8KBD-ONXQjfZSS5M1n80-ilIPUe-AonKIHbQJJp7Uv74kBoNms21XQWWNX8nX1_76b/s1600/07f0d7b69ef071571e4ada2f4d6a053a-instagram-icon-background-by-vexels.png')
}
</style>
- Kode warna Biru adalah nama icon yang nantinya akan kalian gunakan pada pembuatan postingan download
- Kode warna Merah adalah alamat url gambar icon yang nantinya akan tampil dan bisa kalian gunakan didalam postingan kalian
- Jika kalian akan menambahkan icon maka kalian tinggal tambahkan saja kode dibawah ini, dan letakkan sebelum kode </style> diatas.
.icon-app span.IG {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzStyWRPaKOFOk-aaNgxXKupgk6Onkjwxbb5gbYXZ2YVzDdWY5zyLXXPj6FgmTNPaephtIqHLIZF8KBD-ONXQjfZSS5M1n80-ilIPUe-AonKIHbQJJp7Uv74kBoNms21XQWWNX8nX1_76b/s1600/07f0d7b69ef071571e4ada2f4d6a053a-instagram-icon-background-by-vexels.png')
}
- Untuk ukuran icon, kalian buat dengan ukuran 96 X 96
- Setelah gambar dibuat, kemudian kalian upload dan ambil alamat urlnya, lalu tempatkan pada kode yang berwarna merah .
- Setelah semua kalian setting, silahkan kalian tekan tombol simpan .
- Selanjutnya silahkan kalian coba membuat postingan download kalian, dengan cara masuk ke menu entri baru .
- Setelah berada dihalaman posting, kalian pindahkan mode compose ke mode html, dan tempelkan kode dibawah ini
<div id='box-download'>
<div class='box-cover'>
<div class='icon-app'>
<span class='WA'/>
</div>
<div class='box-title'>
<span class='app-title'>WhatsApp</span>
<span class='app-version'>9.24.1</span><br/>
<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>
</div>
- Warna biru adalah kode atau nama icon yang kalian buat di bagian CSS tadi
- Warna merah adalah informasi dari aplikasi yang kalian posting
- Warna hijau adalah nama yang akan muncul di tombol download
- Warna coklat adalah link alternatif yang bisa kalian gunakan, jika kalian mempunyai banyak server yang kalian gunakan untuk mengupload aplikasi yang akan kalian posting
- Setelah semuanya telah kalian buat, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya
- Semoga bermanfaat untuk kalian semuanya
Sebelumnya, kita ulas dikit, Kotak Komentar Facebook di Blog bisa bagus buat SEO, jika banyak --bahkan kebanyakan-- pengunjung Anda komentar di sana dan di-share ke akun Facebooknya.
