
Tutorial Cara Membuat Tombol Download di Blogger Responsive
Cara Membuat Tombol Download Seperti Pada Website Jalan Tikus, pada kesempatan kali ini saya akan berbagi tutorial membuat tombol download keren yang akan menampilkan icon aplikasi / game seperti di website jalantikus.
sebelumnya saya juga sudah pernah share beberapa tutorial untuk cara membuat tombol download dan demo di halaman post blogger, untuk melihatnya kalian bisa kunjungi link artikel dibawh ini
Nah pada tombol download yang satu ini tampilannya cukup berbeda karena akan dipasang Icon / Logo dari aplikasi / game tersebut agar tampilannya lebih menarik, dilengkapi dengan 2 tombol download default dan kalian juga bisa menambahkan beberapa link alternatif didalamnya.
Untuk tutorialnya sangat mudah, kalian tinggal ikuti langkah demi langkah dibawah ini
Demo Tombol Download
Cara Membuat Tombol Download Keren di Blog
- Login ke akun blogger kalian
- Masuk ke menu Template → Edit HTML
- Selanjutnya cari kode </head>
- Setelah ketemu masukan CSS dibawah ini tepat diatasnya
<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')
}
</style>
- Upload gambar yang ingin dijadikan icon
- Copy linknya dan bikin css baru seperti
.icon-app span.NAMA_ICON {
background-image:url('LINK_ICON');
}
- Save Template
Sekarang kalian tinggal memasukan HTML downloadnya di dalam postingan, caranya :
- Masuk ke postingan yang ingin dipasang tombol downloadnya
- di dalam postingan kalian pilih mode HTML jangan Compose
- Setelah di mode HTML, kalian copy kode dibawah ini
<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>
- COC : Ganti dengan nama icon yang sudah ada di daftar pada css
- Clash of Clans : Ganti dengan nama aplikasi
- 9.24.1 : Ganti dengan versi aplikasi
- android : Sesuaikan dengan sistem operasi, kalian bisa menggantinya dengan windows, mac dan blackberry
- # (Tanda Pagar) : Ganti dengan link download kalian
- Selesai, Sekarang kalian tinggal publikasikan / coba lihat pertinjauan dulu..
Menambahkan Link Download Alternatif
- Mungkin di jalantikus tidak ada fitur ini, tapi apa salahnya buat jaga-jaga barang kali link download utama sudah tidak aktif. Untuk menambahkan link download alternatif kalian cukup masukan kode dibawah ini
<div class="link-alternative">
<a href="#">4shared</a>
<a href="#">Mediafire</a>
<a href="#">Zippyshare</a>
<a href="#">Tusfiles</a>
</div>
- Sehingga nanti hasilnya seperti ini
<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>
</div>
- Selesai
Cukup sekian artikel tentang Cara Membuat Tombol Download Keren Seperti JalanTikus ini semoga bermanfaat, jika ada yang tidak dimengerti silahkan bertanya di kolom komentar.
22 comments
Emang bagus sih, cuma pusing masihan mau nerapin kode nya
Simple gan, cuma tutorialnya mungkin berbelit2 :3
Cukup Bikin kumpulan icon, nanti copas htmlnya ke postingan (y)
kalo udah biasa mah simple geh, yah nanti saya belajar pelan2 lah, biar bisa yahut seperti blognya mastamvan
Ajib dah mastamvan mah
khusus blog download ya
Engga harus blog download gan, kalo pengen d pasangmah bisa (y)
mas cara membuat Text yang menggunakan Tag Kbd seperti yang ad adi blog mas ini gimana ya ? Buat Tutornya donk
Cari tutorialnya di blog saya dengan keyword CSS Keyboard Shortcut
Jadi jika pasang lingnya kita harus ke edit htmlnya gan?
Ya gan tapi yang ada di dalam post, bukan Template → Edit HTML ↓
yang ini
https://3.bp.blogspot.com/-r2fw7oWASb0/V111Nbc1giI/AAAAAAAAAwQ/KCfeWxPitQ0ZKaosrKhtG64pntgYte2AgCPcB/s600/post-mode-html.jpg
mantep gan :D
tappi muncul otomatis gak kalo lewat browser hp? kadang harus seting ke tampilan dekstop dulu
Byk bgt mas kodenya.. apa ga berat templatenya..?
Ini ga bikin berat gan, cuma keliatannya aja banyak :3 toh cuma tag2 HTML biasa...
Untuk icon upload imagenya yg sesuai aja...
Ribet gan
keren sob
bagaimana jika background dari #box-download .link-download a:nth-child(2){background:#6ab344} di html
Sekian lama nyari tutor ini akhirnya ketemu juga nih... Kunjungi juga ya mas warunkseo.blogspot,com
kalau mau di taroh di halaman utama gimana gan ??
Blognya keren mas
nyimak bos
Makasih turtorialnya gan
Saya pasang juga di blog
keren banget blognya gan add wa gan 0895365749574
Saya menunggu komentar anda..
Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..
Komentar dengan link promo akan masuk spam.
Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode
<i rel="image">URL GAMBAR DI SINI</i>
untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon