LAPAKLAMA.COM » Cara Membuat Tombol Download Seperti Jalantikus
Assalamualaikum sobat blogger, Diantara kalian niscaya sudah pada tahu website jalantikus kan. Yups jalantikus yaitu situs teknologi yang banyak dikunjungi oleh masyarakat indonesia.
Banyak di antara teman-teman blogger yang ingin mempunyai situs menyerupai jalan tikus. Hal ini dibutikan dari banyaknya orang yang mengunduh template blogger menyerupai jalantikus yang aku bagikan 5 bulanan yang lalu.
Tombol d0wnl0ad yang akan kita buat kali ini tampilanya sangat berbeda dengan tombol d0wnl0ad pada biasanya, Karena disini kita akan menciptakan tombol d0wnl0ad yang menyerupai dengan yang ada di situs jalantikus.com.
Tampilan tombol d0wnl0ad ini sangat menarik dengan dilengkapi 2 tombol d0wnl0ad atau bila kalian mau menambah menjadi beberapa tombol juga bisa. tombol d0wnl0ad yang akan kita buat mempunyai icon aplikasi yang ingin di unduh. Intinya menyerupai deh dengan tombol d0wnl0ad jalantikus.
Langsung saja simak tutorialnya.
Membuat Tombol Download Seperti Jalantikus
1. Masuk kedasboard blogger kamu
2. Masuk kemenu Tema » Edit HTML
3. Cari kode </head> Gunakan kombinasi tombol CTRL + F untuk mempermudah menemukan arahan tersebut.
4. Jika sudah ketemu masukan arahan CSS ini diatas kode </head>
<style type="text/css">
#box-d0wnl0ad,#box-d0wnl0ad .box-cover,#box-d0wnl0ad .box-cover .box-title{position:relative}#box-d0wnl0ad .box-cover .icon-app,#box-d0wnl0ad .link-d0wnl0ad{position:absolute}#box-d0wnl0ad,#box-d0wnl0ad .box-cover,#box-d0wnl0ad .box-cover .icon-app span,#box-d0wnl0ad .box-cover .box-title,#box-d0wnl0ad .label-grup,#box-d0wnl0ad .link-d0wnl0ad a{display:block}#box-d0wnl0ad,#box-d0wnl0ad .box-cover .icon-app span,#box-d0wnl0ad .link-d0wnl0ad a{width:100%}#box-d0wnl0ad,#box-d0wnl0ad .link-d0wnl0ad a{border-radius:0.230769230769231em}#box-d0wnl0ad{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-d0wnl0ad a{text-decoration:none}#box-d0wnl0ad .box-cover{min-height:6.61538461538462em;margin-right:10.0769230769231em}#box-d0wnl0ad .box-cover .icon-app{width:75px;height:75px;top:0;left:0}#box-d0wnl0ad .box-cover .icon-app span{background-size:100%;background-repeat:no-repeat;height:100%}#box-d0wnl0ad .box-cover .box-title{margin-left:6.15384615384615em}#box-d0wnl0ad .box-cover .box-title .app-title{font-weight:bold;color:#252525;font-size:150%}#box-d0wnl0ad .box-cover .box-title .app-version{font-size:90%;color:#727171}#box-d0wnl0ad .label-grup a{color:#666;font-size:12px}#box-d0wnl0ad .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-d0wnl0ad .box-cover .box-title .tag-os.android{background-color:#6ab344}#box-d0wnl0ad .box-cover .box-title .tag-os.windows{background-position:0 33.33%;background-color:#1f9cf4}#box-d0wnl0ad .box-cover .box-title .tag-os.mac{background-color:#606060;background-position:0 66.67%}#box-d0wnl0ad .box-cover .box-title .tag-os.blackberry{background-color:#000000;background-position:0 99.99%}#box-d0wnl0ad .link-d0wnl0ad{max-width:9.61538461538462em;text-align:center;top:1.15384615384615em;right:1.15384615384615em;width:30%}#box-d0wnl0ad .link-d0wnl0ad a{padding:0.769230769230769em 0;margin-bottom:0.769230769230769em;text-transform:uppercase;color:#fafafa;font-weight:bold;font-size:100%}#box-d0wnl0ad .link-d0wnl0ad a:nth-child(1){background:#008efa}#box-d0wnl0ad .link-d0wnl0ad 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-d0wnl0ad .box-cover,#box-d0wnl0ad .box-cover .icon-app,#box-d0wnl0ad .box-cover .box-title,#box-d0wnl0ad .link-d0wnl0ad{margin:0 auto}#box-d0wnl0ad .box-cover .icon-app{position:relative}#box-d0wnl0ad .link-d0wnl0ad{position:relative;width:100%;right:auto;margin-bottom:0.769230769230769em}}
/*ICON APP*/
.icon-app span{
background-image:url('https://rawgit.com/mastamvan/image/master/d0wnl0ad.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>
Catatan: Icon APP yaitu icon yang akan muncul pada tombol d0wnl0ad, Kamu dapat menggantinya dengan cara:
- Upload icon gambar
- Kemudian copy linknya
- Kemudian bikin CSS gres seperti
.icon-app span.NAMA_ICON {
background-image:url('LINK_ICON');
}
Jangan kasih spasi untuk nama Icon dan jangan ada yang sama. soalnya dapat bentrok
5. Simpan Template
Memasukan HTML Download di Postingan
Kemudian masukan HTML d0wnl0ad dibawah ini pada postingan artikel dengan cara
1. Masuk kedalam postingan yang ingin kalian tambahkan tombol d0wnl0ad
2. Rubah mode penulisan dari Composse ke HTML
3. Kemudian pastekan arahan dibawah ini di postingan tersebut dalam Mode HTML
<div id='box-d0wnl0ad'>
<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-d0wnl0ad">
<a href="#">Download</a>
<a href="#">Google Play</a>
</div>
</div>
Catatan:
COC: ganti dengan nama icon yang sudah ada di daftar CSS
Clash Of Clans: Ganti dengan nama aplikasi yang ingin di d0wnl0ad
9.24.1: Ganti dengan versi aplikasi yang kau bagikan
- Android: Ganti dengan OS aplikasi yang kau bagikan
- Kemudian
# Ganti dengan link d0wnl0ad.
Selesai, Sekarang silahkan klik Perbarui untuk memperbarui postingan.
Sekian informasi Cara Membuat Tombol Download Keren Seperti Jalantikus biar bermanfaat. terimakasih.
Sumber aciknadzirah.blogspot.com