Skip to main content
Ivhaa Design

follow us

Cara Membuat Tombol Download Ala Jalan Tikus Di Blogger

Cara Membuat Tombol Downloud Ala Jalan Tikus Di Blogger

Baca juga:




Cara Membuat Tombol Downloud Ala Jalan Tikus Di Blogger - Hallo sobat Blogger syukur alhamdulillah kali ini saya bisa membagikan tutorial lagi buat kalian semua, pada artikel kali ini saya akan memberikan tutorial tentang membuat tombol downloud ala jalan tikus pasti kalian sudah tau bukan situs terkenal tersebut artikel kali saya dapat dari blog mastavam.blogspot.com berikut ini adalah link nya https://mastamvan.blogspot.co.id/2017/07/tombol-download-blog-seperti-jalantikus.html.

Pada tombol kali ini sangat berbeda karena akan di pasang icon aplikasi atau game seperti yang ada di jalan tikus serta akan di tambah 2 tombol link aktif di dalam nya.

Jika kalian tertarik dengan tutorial ini simak artikel ini sampai selesai ya sob berikut ini adalah ulasan nya :

Cara Membuat Tombol Downloud Ala Jalan tikus

1. Kita Log in Blogger dulu
2. Setelah itu Masuk ke menu Template > Edit HTML
3. Cari kode </head> atau bisa dengan CTRL + F biar lebih cepat
4. Setelah Ketemu Masukan CSS ini di atasnya
<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>
5. Save Template

Penerapan Di Postingan

1. Kita masuk editor artikel
2. Pilih HTML jangan Compose
3. Kalian Copy HTML ini ke postingan yang telah di buat mode HTML


<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 icon yang ada di CSS yang tadi 
  •  Clash of Clan : Ganti dengan versi aplikasi kalian yang di taruh
  •  9.251 : Ganti dengan versi aplikasi kalian 
  •  Android : Ganti dengan perangkat seperti Apple, Blackberry dll
  •  # : Ganti dengan link Download kalian 
Jika sudah tinggal publikasi kan artikel kalian semoga bermanfaat buat kalian semua mungkin ada salah kata mohon maaf. 

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar