Cara membuat button download seperti jalantikus

Pernahkah kamu mengunjungi website jalantikus? Nah diwebsite tersebut seringkali melihat button atau tombol unduh yang sangat menciri khas dimiliki jalantikus yaitu biru dan hijau. Bagaimana cara membuatnya? Kali ini kita akan membahas tutorial tersebut cara membuat button download mirip jalantikus.
Demo by faronesia

Cara membuat button download seperti jalantikus

Cara pemasangannya:
1. Masuk ke dashboard blog
2. Pilih tema/template
3. Edit html
4. Simpan kode css dibawah ini tepat diatas ]]></b:skin>
<style type='text/css'> #ZViewPH-Simple { width: 100%; position: relative; border: 1px solid #DDD; border-radius: 5px; display: inline-block; background-color: rgba(f, f, f, 0.5); background-size: 100%; background-position: center; background-repeat: no-repeat; margin: 10px 0; font-family: &#39;Roboto&#39;, Segoe UI, Segoe, Arial, Verdana, sans-serif; } .iconapp { width: 16%; float: left; padding: 15px 0; text-align: center; } .iconapp img { width: 55px; height: 55px; } .detaildownload { width: 84%; padding: 10px; } .title-wrapper { width: 55%; } a.title-download { color: #252525; font-size: 20px; text-decoration: none; font-weight: 900; } a.title-download:hover { text-decoration: underline; } .versi-app { color: #999; font-weight: 300; font-size: 20px; text-decoration: none; } .detail-dev { width: 55%; margin-top: 6px; display: inline-block; } .robotijo { width: 30px; height: 30px; background-image: url(//3.bp.blogspot.com/-d67M7snFvCQ/Vn-mYIuY0cI/AAAAAAAAAXc/rEQJBMsYSRs/h120/i-os-spr.png); background-color: #6ab344; background-size: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0); border-radius: 50%; display: inline-block; vertical-align: middle; } a.text-dev { color: #999; font-size: 14px; text-decoration: none; vertical-align: middle; } a.btn-download { position: absolute; top: 20px; right: 20px; height: 40px; text-decoration: none; line-height: 38px; border-radius: 4px; padding: 0 20px; font-size: 15px; background-color: #008EFA; color: #fff; font-weight: 900; transition: 0.5s; } a.btn-download:hover { background-color: #0B78E8; color: #fff; } .source { position: absolute; bottom: 0; right: 0; padding: 2px 10px; background: #F8F8F8; border-top: 1px solid #DDD; border-left: 1px solid #DDD; border-top-left-radius: 4px; border-bottom-right-radius: 5px; } .introsource { color: #999; font-size: 11px; line-height: 0; font-weight: 400; } a.linksource { font-size: 11px; line-height: 18px; text-decoration: none; color: #999; font-weight: 900; transition: 0.5s; } a.linksource:hover { text-decoration: underline; } @media only screen and (max-width: 768px) { .detaildownload { width: 80%; } .iconapp { width: 20%; } } @media only screen and (max-width: 480px) { #lapakdownload { width: 100%; padding-bottom: 45px; } a.btn-download { position: relative; top: 8px; right: 0; padding: 8px 20px; } .source { border-top-left-radius: 5px; display: inline-block; box-sizing: border-box; padding: 0 5px; } } /* Put this css in your blog - Bahastutorial.com */ .ZViewPH-bahastutorial-box-corporation{margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline;-webkit-tap-highlight-color: transparent;font-family: &#39;Roboto&#39;,Segoe UI,Segoe,Arial,Verdana,sans-serif;} .ZViewPH-bahastutorial-box-corporation &gt; .item {display: block;float: left;position: relative;width: 100%;margin-bottom: 10px;background: #fff;} .addon-apps {margin-bottom: 15px;padding: 5px 0;} .addon-apps .apps-detail a {border-bottom: 1px solid transparent;} .addon-apps .apps-detail a:hover {border-bottom: 1px solid #999999;} .addon-apps .apps-detail.horizontal.xlSz {border: 0;padding: 15px 20px;} .addon-apps .apps-detail.horizontal.xlSz .property {max-height: none;margin: 0;} .addon-apps .apps-detail.horizontal.xlSz .info-container {padding: 0 15px;margin: 0;} .addon-apps .apps-detail .note a, .addon-apps .apps-detail .note span {vertical-align: middle;} .addon-apps .item {overflow: hidden;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} .addon-discover {position: absolute;bottom: 0;right: 0;padding: 2px 10px;background: #f8f8f8;line-height: 0;border-top: 1px solid #dddddd;border-left: 1px solid #dddddd;-webkit-border-top-left-radius: 4px;-moz-border-radius-topleft: 4px;border-top-left-radius: 4px;} .apps-detail.horizontal.xlSz {padding: 1.5%;} .apps-detail.horizontal .os-icon {margin-right: 6px;} .apps-detail.horizontal {display: block;align-items: center;} .apps-detail.horizontal.xlSz .property {margin: 5px 0 10px 0;} .apps-detail.horizontal.xlSz .action-btn:last-of-type {margin-bottom: 0;} .apps-detail.horizontal.xlSz .action-btn {width: 100%;margin-bottom: 5px;} .apps-detail.horizontal {position: relative;width: 100%;} .apps-detail.horizontal.xlSz .info-container {margin: 2px 0 0 0;padding: 0 1.5%;} .apps-detail.horizontal.xlSz .action-container {margin-bottom: 15px;padding: 5px 0;float: right;padding-right: 75px;} .apps-detail {float: left;border: 1px solid rgba(255,255,255,0);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} .trs, .trs:before, .trs:after {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;} .apps-detail.horizontal .cover-container, .apps-detail.horizontal .info-container, .apps-detail.horizontal .action-container {position: relative;float: left;vertical-align: top;} .title-text.dllight {font-size: 16px;} .title-text.lSz {font-size: 20px;line-height: 28px;} .title-text {font-size: 14px;line-height: 20px;font-weight: 700;} .text-link {border-bottom: 1px solid rgba(255,255,255,0);color: grey;} .cover {position: relative;overflow: hidden;} .btn.bdrs4 {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} .btn.clearBlue {background-color: #008efa;border: 1px solid rgba(0,0,0,0);color: #ffffff;} .btn.clearGreen {background-color: #6ab344;border: 1px solid rgba(0,0,0,0);color: #ffffff;} .btn.dllight {height: 40px;line-height: 38px;padding: 0 20px;font-size: 15px;} .btn {display: inline-block;overflow: hidden;vertical-align: middle;padding: 0 10px;border: 1px solid #eeeeee;background: #ffffff;color: #008efa;text-align: center;cursor: pointer;} .trs, .trs:before, .trs:after {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;} a {text-decoration: none;} .text-link.cl1 {color: #252525;} .fs2 {font-family: &#39;Roboto&#39;,Segoe UI,Segoe,Arial,Verdana,sans-serif;} .multi-ellipsis {overflow: hidden;position: relative;} .text-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .content-format a:hover {border-bottom: 1px solid #008efa;} .content-format .note a:hover {border-bottom: 1px solid grey;} .content-format a {color: grey;border-bottom: 1px solid rgba(255,255,255,0);} .content-format a, .content-format a:before, .content-format a:after {-webkit-transition: all 0.15s ease-in-out;-moz-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;} /* -ZViewPH - Frame Box Review and Download - CSS+HTML #1 - bahastutorial*/ .os-icon {overflow: hidden;display: inline-block;vertical-align: middle;width: 30px;height: 30px;background-image: url(https://rawgit.com/palmahutabarat/ZViewPH/master/apps-zviewph.png);background-repeat: no-repeat;background-size: 100%;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;} .os-style.android {background-color: #2cd637;background-position: 0 0;} @media (max-width: 320px) { .iconapp { width: 100%; } .detaildownload { width: 100%; } } </style>
5. Simpan kode html dibawah ini pada postingan anda
<div id="ZViewPH-Simple"> <div class="iconapp"> <img alt="" src="Link Gambar" title="COC" /> </div> <div class="detaildownload"> <div class="title-wrapper"> <a class="title-download" href="https://www.blogger.com/Link">Clash Of Clans</a> <span class="versi-app"></span> </div> <div class="detail-dev"> <i class="robotijo"></i> <a class="text-dev" href="Link Label">Android</a> </div> <a class="btn-download" href="Link Download">Download</a> </div> <div class="source"> </div> </div> <div class="ZViewPH-bahastutorial-box-corporation cf addon-apps" style="margin: 5px 0;"> <div class="item cf"> <div class="apps-detail horizontal xlSz cf trs"> <div class="cover-container"> <div class="cover-image-container"> <img alt="#" src="Link Gambar" /> </div> </div> <div class="info-container"> <div class="info"> <a class="title text-link-container" href="https://www.blogger.com/blogger.g?blogID=1604300979444477956#"> <span class="title-text fs2 lSz text-link cl1 trs">Shooter Zombi3</span> <span class="title-text fs2 lSz fwL text-link cl4 bdrB0"> v1.2.0.4 Build 1992</span></a> <br /> <div class="property multi-ellipsis ellipsis-fade text-ellipsis"> <div class="content-format"> <span class="note"><a class="os-style os-icon android trs" href="https://www.blogger.com/blogger.g?blogID=1604300979444477956#" title="Android Apps"></a> <a class="text-link cl4 trs hidden-sm hidden-480 hidden-xs" href="https://www.blogger.com/blogger.g?blogID=1604300979444477956#">Horror</a>, <a class="text-link cl4 trs hidden-sm hidden-480 hidden-xs" href="https://www.blogger.com/blogger.g?blogID=1604300979444477956#">FPS</a>, <a class="text-link cl4 trs hidden-sm hidden-480 hidden-xs" href="https://www.blogger.com/blogger.g?blogID=1604300979444477956#">Shooter</a> <span class="hidden-sm hidden-480 hidden-xs" style="color: black;"> </span> </span></div> </div> </div> </div> <div class="action-container"> <div class="action"> <a class="action-btn download-btn btn dllight clearBlue bdrs4 title-text trs track-download" href="https://www.blogger.com/blogger.g?blogID=1604300979444477956#" target="_blank"><i aria-hidden="true" class="fa fa-download"></i> Apps Windows x86</a> <a class="action-btn googleplay-btn btn dllight clearGreen bdrs4 title-text trs track-relink" href="https://www.blogger.com/blogger.g?blogID=1604300979444477956#" target="_blank"><i aria-hidden="true" class="fa fa-android"></i> Apps Windows x64</a> </div> </div> </div> <div class="addon-discover"> </div> </div> </div>
Keterangan:
1. Clash of clans : ganti dengan nama postingan anda
2. Android : ganti dengan nama kategori postingan anda
3. Link download : ganti dengan link download anda
4. Link label : ganti dengan link label anda
5. Link gambar : ganti dengan link gambar anda

Bagaimana tutorial kali ini, apakah bermanfaat atau masih belum paham? Semoga bermanfaat untuk para pembaca dimanapun kalian berada, jika belum paham silahkan bertanya dikolom komentar yang telah disediakan.

0 Response to "Cara membuat button download seperti jalantikus"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Website ini dilindungi oleh Google DMCA. Dilarang keras menyalin (copy/paste) sebagian atau keseluruhan isi blog tanpa mencantumkan sumber link aktif dari website www.faronesia.com