Membuat Tombol Download Keren Ibarat Jalantikus Di Blog

Membuat Tombol Download Keren Ibarat Jalantikus Di Blog

tombol download di blog keren

Tutorial Cara Membuat Tombol Download di Blogger Responsive

Cara Membuat Tombol Download Seperti Pada Website Jalan Tikus, pada kesempatan kali ini saya akan mengembangkan tutorial menciptakan tombol download keren yang akan menampilkan icon aplikasi / game ibarat di website jalantikus.

sebelumnya saya juga sudah pernah share beberapa tutorial untuk cara menciptakan tombol download dan demo di halaman post blogger, untuk melihatnya kalian dapat kunjungi link artikel dibawh ini

Nah pada tombol download yang satu ini tampilannya cukup berbeda alasannya yaitu akan dipasang Icon / Logo dari aplikasi / game tersebut biar tampilannya lebih menarik, dilengkapi dengan 2 tombol download default dan kalian juga dapat 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 sajian TemplateEdit HTML
  • Selanjutnya cari arahan </head>
  • Setelah ketemu masukan CSS dibawah ini sempurna 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://www.ngopisite.xyz//search?q=tombol-download-blog-seperti-jalantikus" title="Membuat Tombol Download Keren Seperti JalanTikus di blog">Cara Membuat Tombol Download Keren Seperti JalanTikus ini semoga bermanfaat, jikalau ada yang tidak dimengerti silahkan bertanya di kolom komentar. 


    Sumber https://mastamvan.blogspot.com/

Baca juga:

Blogger
Disqus
Pilih Sistem Komentar

No comments

Silahkan berkomentar.
Perhatian! Komentar yang mengandung spam tidak akan di terima.