Posted by Aak
Aak-share.com Updated at: 11:30:00 PM

Membuat Statistik Pengeluaran di Blog Flat UI dengan CSS

No comments:
Membuat Statistik Pengeluaran Flat UI di Blog dengan CSS ~ banyak kita bisa temukan situs Counter perhitungan Statistik pengunjung Blog seperti histasWhos Amung Us , Feedjit  dan Statistik/Visitor Bola Dunia yang disediakan secara gratis. Dengan memasang Widget pada situs tersebut kita bisa mengetahui seberapa banyak page viuew dan visitor yang berkunjung pada halaman Blog kita.

Namun pada statistik yang satu iini bukanlah untuk menghitung seberapa banyak page viuew atau visitor yang berkunjung pada halaman Blog, melainkan untuk Statistik Pengeluaran keuangan. Untuk menciptakannya menggunakan properti CSS dengan demikian kita mengubah dengan mudah.



Pada Statistik Pengeluaran keuangan ini sangat cocok sekali untuk Website atau situs penjualan Online, kita bisa membuat diagram, jumlah pengeluaran dan keterangan pada statistik pengeluaran ini. Untuk Anda yang tertarik Berikut ini langkah-langkahnya :

Silahkan Anda buka Editor Template, kemudian Anda cari kode ]]></b:skin> lalu salin kode dibawah ini dan pasangkan diatasnya atau sebelumnya.

/*Statistik Pengeluaran Flat UI*/
.ui {
  width: 900px;
  margin: 0 auto;
  margin-top: 50px;
  font-family: 'Arial', sans-serif;
  color: white;
  box-shadow: none;
}
.ui ul {
  margin: 0px 30px 10px 0px;
  padding: 0;
  list-style-type: none;
  font-size: 10px;
  font-weight: 400;
  line-height: 8px;
}
.ui .drop {
  z-index: -3;
  opacity: 0;
  width: 240px;
  height: 10px;
  background: #3e8368;
  position: absolute;
  color: white;
  bottom: 0;
  padding: 12px 30px 21px 30px;
  -webkit-transition-property: bottom,opacity;
          transition-property: bottom,opacity;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
}
.ui .drop p {
  color: #f8fbfa;
}
.ui_box {
  width: 300px;
  height: 220px;
  position: relative;
  background: #3d3d3d;
  float: left;
  box-shadow: -1px 0px rgba(255, 255, 255, 0.07);
  cursor: pointer;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-property: -webkit-transform,background;
          transition-property: transform,background;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
}
.ui_box__inner {
  padding: 30px;
}
.ui_box__inner span {
  font-size: 36px;
  font-weight: 700;
}
.ui_box__inner .progress {
  width: 100%;
  margin-top: 10px;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 15px;
}
.ui_box__inner .progress_graph {
  float: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  width: 95px;
  text-align: center;
  position: relative;
  padding-left: 25px;
  top: 24px;
}
.ui_box__inner .progress_graph__bar--1 {
  width: 10px;
  height: 20px;
  background: #4FA584;
  float: left;
  margin-right: 10px;
  position: relative;
  bottom: -10px;
  -webkit-animation: graph 1s;
}
.ui_box__inner .progress_graph__bar--2 {
  width: 10px;
  -webkit-animation: graph2 1s;
  height: 30px;
  float: left;
  margin-right: 10px;
  background: #4FA584;
}
.ui_box__inner .progress_graph__bar--3 {
  width: 10px;
  height: 24px;
  margin-right: 10px;
  -webkit-animation: graph3 1s;
  background: #4FA584;
  float: left;
  position: relative;
  bottom: -6px;
}
.ui_box__inner .progress_graph__bar--4 {
  width: 10px;
  height: 14px;
  -webkit-animation: graph4 1s;
  bottom: -16px;
  position: relative;
  background: #4FA584;
  float: left;
}
.ui_box__inner .progress_bar {
  height: 6px;
  float: left;
  width: 58%;
  background: #4FA584;
  -webkit-animation: bar 2s;
}
.ui_box__inner .progress_bar--two {
  height: 6px;
  float: left;
  width: 78%;
  background: #4FA584;
  -webkit-animation: bar2 2s;
}
.ui_box h2 {
  font-weight: normal;
  font-size: 16px;
  margin: -4px 0px 3px 0px;
}
.ui_box p {
  font-size: 13px;
  color: #fff;
  clear: left;
  font-weight: 300;
  width: 245px;
  margin: 2px 0px 15px 0px;
}
.ui_box:hover {
  background: #4FA584;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition-property: -webkit-transform,background;
          transition-property: transform,background;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  position: relative;
  z-index: 1;
}

.ui_box:hover > .ui_box__inner p {
  color: #b3dacb;
}

.ui_box:hover > .drop {
  -webkit-transition-property: bottom,opacity;
          transition-property: bottom,opacity;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  bottom: -42px;
  opacity: 1;
}

.ui_box:hover > .drop .arrow {
  -webkit-transition-property: -webkit-transform;
          transition-property: transform;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transform: rotate(765deg);
      -ms-transform: rotate(765deg);
          transform: rotate(765deg);
}

.ui_box:hover > .ui_box__inner .progress_graph > div {
  background: white;
}

.ui_box:hover > .ui_box__inner .progress .progress_bar, .ui_box:hover > .ui_box__inner .progress .progress_bar--two {
  background: white;
}

.stat_left {
  float: left;
}

.arrow {
  width: 4px;
  height: 4px;
  -webkit-transition-property: -webkit-transform;
          transition-property: transform;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 1px solid #CDEAD3;
  border-right: 1px solid #CDEAD3;
  float: right;
  position: relative;
  top: -24px;
  right: 0px;
}

@-webkit-keyframes bar {
  from {
    width: 0px;
  }
  to {
    width: 58%;
  }
}

@keyframes bar {
  from {
    width: 0px;
  }
  to {
    width: 58%;
  }
}
@-webkit-keyframes bar2 {
  from {
    width: 0px;
  }
  to {
    width: 78%;
  }
}
@keyframes bar2 {
  from {
    width: 0px;
  }
  to {
    width: 78%;
  }
}
@-webkit-keyframes graph {
  from {
    height: 0px;
  }
  to {
    height: 20px;
  }
}
@keyframes graph {
  from {
    height: 0px;
  }
  to {
    height: 20px;
  }
}
@-webkit-keyframes graph2 {
  from {
    height: 0px;
  }
  to {
    height: 30px;
  }
}
@keyframes graph2 {
  from {
    height: 0px;
  }
  to {
    height: 30px;
  }
}
@-webkit-keyframes graph3 {
  from {
    height: 0px;
  }
  to {
    height: 24px;
  }
}
@keyframes graph3 {
  from {
    height: 0px;
  }
  to {
    height: 24px;
  }
}
@-webkit-keyframes graph4 {
  from {
    height: 0px;
  }
  to {
    height: 13px;
  }
}
@keyframes graph4 {
  from {
    height: 0px;
  }
  to {
    height: 13px;
  }
}

Selanjutnya Anda salin kode dibawah ini lalu menuju Entri baru dan pasangkan pada Mode HTML

<div class="ui">
  <div class="ui_box">
    <div class="ui_box__inner">
      <h2>
        Isikan Nama barang/pendapatan
</h2>
Isikan Nama barang
<div class="stat">
        <span>Isikan Jumlah Barang dalam hitungan %</span>
</div>
<div class="progress">
        <div class="progress_bar">
</div>
</div>
<p>Silahkan Masukkan Deskripsi singkat Anda disini</p>
</div>
<div class="drop">
      Keterangan singkat
<div class="arrow">
</div>
</div>
</div>
<div class="ui_box">
    <div class="ui_box__inner">
      <h2>
Isikan Nama Judul barang/pendapatan</h2>
Isikan Beberapa jenis barang
<div class="stat_left">
        <ul>
<li>
Nama barang
</li>
<li>
Nama barang
</li>
<li>
Nama barang
</li>
<li>
Nama barang
</li>
</ul>
</div>
<div class="progress_graph">
        <div class="progress_graph__bar--1"> /*Grafik 1 pada kolom 2*/
</div>
<div class="progress_graph__bar--2">/*Grafik 2 pada kolom 2*/
</div>
<div class="progress_graph__bar--3">/*Grafik 3 pada kolom 2*/
</div>
<div class="progress_graph__bar--4">/*Grafik 4 pada kolom 2*/
</div>
</div>
<h3>
<p>Silahkan Masukkan Deskripsi singkat Anda disini</p>
</div>
<div class="drop">
      Keterangan singkat
<div class="arrow">
</div>
</div>
</div>
<div class="ui_box">
    <div class="ui_box__inner">
      <h2>
        isikan total Jumlah pendapatan/pengeluaran
</h2>
Isikan nama barang/pendapatan
<div class="stat">
        <span>Isikan jumlah keseluruhan pengeluaran/pendapatan</span>
</div>
<div class="progress">
        <div class="progress_bar--two">
</div>
</div>
<p>Silahkan Masukkan Deskripsi singkat Anda disini</p>
</div>
<div class="drop">
      Keterangan singkat
<div class="arrow">
</div>
</div>
</div>
</div>

Semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments