Membuat Tombol Download Keren Ibarat Jalantikus Di Blog
Tutorial Cara Membuat Tombol Download di Blogger Responsive
Cara Membuat Tombol Download Seperti Pada Website Jalan Tikus, pada kesempatan kali ini saya akan membuatkan tutorial menciptakan tombol download keren yang akan menampilkan icon aplikasi / game menyerupai 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
Tutorial Blogger Lainnya :
Nah pada tombol download yang satu ini tampilannya cukup berbeda alasannya ialah 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 hidangan Template → Edit HTML
- Selanjutnya cari instruksi </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://tips-darikita.blogspot.com/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, bila ada yang tidak dimengerti silahkan bertanya di kolom komentar.