Januari 09, 2019




Bahastutorial.com - Bagaimana cara membuat button atau tombol download seperti jalan tikus di blog. Kali ini kita akan membahasnya untuk membuat button atau tombol download seperti jalantikus.Button Atau Tombol nya sangat untuk dengan ciri khas perpaduan warna biru dan hijau sudah menjadi ciri dari warna button download jalan tikus. Langsung saja ke tutorial

Cara Pemasangan :
1 Masuk Ke Blogger
2 Pilih Template/Tema
3 Kemudian Ke Edit Html
4 Simpan Kode CSS Tepat Di Atas Kode </head>
5 Simpan Kode HTML Tepat Di Postingan Pada Mode HTML Bukan Compose


 
  <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHBBuWkMAli2Xi_x5InUqltseGQ82hm1aglCUi1iRnXz8JhenOP8N-nu_1Au2La2QiXUzqMwSWZqZQCyY9OKsseP7lOX8eOkOkeQFKXztlOkCdgR_1vbKwpDkO5Qy148MjIWR86Ts_0tZe/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>

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




Beberapa Bagian Yaitu :

1 Clash Of Clans = Dengan Nama Yg Kalian Post
2 Android = Ganti Dengan Nama Kategori Apa
3 Link Download = Ganti Dengan Link Download Kalian
4 Link Label = Dengan Link Label Kalian
5 Link Gambar = Dengan Link Gambar Kalian



Bagaimana tutorial kali ini yang di bahas di situs Bahastutorial.com apakah bermanfaat atau sangat berguna buat kalian yang telah mengunjungi situs Bahastutorial.com?Semoga tutorial kali ini sangat bermanfaat buat kalian pengunjung setia situs Bahastutorial.com .. Apabila masi ada yang kurang ngerti dari tutorial di atas silahkan sampaikan dalam kolom komentar ..

kami siap untuk membantu kalian agar kalian nyaman saat mengunjungi situs web Bahastutorial.com. Apabila kalian ingin mengcopy paste Tutorial ini .. Silahkan kalian meminta ijin terlebih dahulu dengan cara meminta izin dalam kolom komentar ..

Apabila tidak meminta izin terlebih dahulu maka dari pihak Bahastutorial.com siap menindak atau melaporkan atas kejahatan me copy paste .. Terima kasih ditunggu ya tutorial selanjutnya salam dari Bahastutorial.com
#Blogger

Sebuah Situs Yang Menyedikan Berbagai Macam Tutorial Blogger, Tutorial Wordpress, Tutorial Android, Tutorial Website, Tutorial Ios Dan Template

Banyak Dibaca
Aturan Komentar : Tanyakan Di Kolom Komentar Apabila Ada Yang Kurang Jelas. Komentar Dengan Sopan . Apabila Ada Yang Kurang Sopan. Admin Akan Otomatis Hapus Komentar Anda.
Disqus Comments