Membuat Statistik Pengeluaran Flat UI di Blog dengan CSS banyak kita sanggup temukan situs Counter perhitungan Statistik pengunjung Blog seperti histas , Whos Amung Us , Feedjit dan Statistik/Visitor Bola Dunia yang disediakan secara gratis. Dengan memasang Widget pada situs tersebut kita sanggup 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 memakai properti CSS dengan demikian kita mengubah dengan mudah.
Pada Statistik Pengeluaran keuangan ini sangat cocok sekali untuk Website atau situs penjualan Online, kita sanggup 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> kemudian salin aba-aba dibawah ini dan pasangkan diatasnya atau sebelumnya.
Selanjutnya Anda salin aba-aba dibawah ini kemudian menuju Entri gres dan pasangkan pada Mode HTML
Semoga bermanfaat!
Sumber http://www.websiteedukasi.com/
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 memakai properti CSS dengan demikian kita mengubah dengan mudah.
Pada Statistik Pengeluaran keuangan ini sangat cocok sekali untuk Website atau situs penjualan Online, kita sanggup 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> kemudian salin aba-aba 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: kafe 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 kafe {
from {
width: 0px;
}
to {
width: 58%;
}
}
@keyframes kafe {
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 aba-aba dibawah ini kemudian menuju Entri gres 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!
Sumber http://www.websiteedukasi.com/
