Apakah kamu membuat sebuah blog download seperti milik Jalan Tikus? Jika ia kamu juga harus, mencoba salah satu tips yang satu ini yaitu membuat button download seperti halnya yang dimiliki oleh Jalan Tikus. Karena jika blog download, tidak memiliki button yang menarik yang terjadi adalah pengunjung blog kurang tertarik dengan konten yang kamu buat.

Baca Juga: Cara Membuat Tombol Button Keren Untuk Postingan Blog

Untuk mengatasi hal tersebut, kali ini saya akan memberikan sebuah tips pada kamu agar blog kamu itu memiliki button yang sama persis yang dimiliki oleh jalan tikus.

Caranya sangat mudah sekali, kalian bisa membuat button seperti jalan tikus. Dengan menambahkan kode css yang ada dibawah ini ke template yang kamu gunakan sekarang.

Berikut ini code css yang dapat kamu gunakan, dan letakan diatas kode ]]></b:skin> atau </style>.

<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: 'Roboto', 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: 'Roboto',Segoe UI,Segoe,Arial,Verdana,sans-serif;} .ZViewPH-bahastutorial-box-corporation > .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: 'Roboto',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>

Untuk penggunaan buttonnya, kamu dapat menggunakan kode berikut dan letakan pada postingan blog kamu.

<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>

Semoga bermanfaat tutorial kali ini.