Cara membuat diagram progress persentase pada blog

Faronesia.com - Hai blogger, apa sih diagram itu? Ok simak penjelasannya, diagram adalah suatu representasi simbolis informasi dalam bentuk geometri dua dimensi sesuai teknik visualisasi. Nah, terkadang teknik yang dipakai memanfaatkan visualisasi tiga dimensi yang kemudian diproyeksikan ke permukaan dua dimensi (Wikipedia). Atau lebih jelasnya diagram merupakan ringkasan dengan menggunakan beberapa garis-garis, symbol-symbol atau lambang-lambang yang menggambarkan struktur dari objeknya secara garis besar, menunjukkan hubungan yang ada antara komponen atau sifat-sifat proses yang ada, serta ditambahkan sedikit keterangan, yang cukup untuk memberikan penjelasan secara cepat, ringkas, dan jelas.

Namun pada tutorial kali ini, kita akan membuat diagram untuk blog dan website. Sebelum ke tutorialnya, apasih fungsi serta manfaatnya untuk blog maupun website. Simak penjelasannya dibawah ini:

Fungsi diagram pada blog/website
  • Sebagai penyederhana informasi yang kompleks sehingga dapat memperjelas penyajian informasi yang disampaikan.
  • Menentukan frekuensi informasi secara relatif dan urutan penting suatu hal.
  • Berfungsi sebagai petunjuk atau gambaran tahapan atau langkah-langkah untuk mencapai suatu sasaran yang ditargetkan target.
Manfaat diagram untuk blog/website
  • Mempermudah pembaca mengingat data-data kuantitatif dan perkembangannya dalam kurun waktu tertentu.
  • Menarik atensi dan minat dari para pembaca karena data-data pada diagram sudah terurut dan mudah dipahami.
  • Mempermudah dalam menerangkan hal yang sulit diterangkan dengan kata-kata.
  • Penjelasan yang disuguhkan kepada pembaca lebih praktis tanpa harus menggunakan banyak kalimat.

DIAGRAM PADA TUTORIAL INI SANGAT COCOK SEKALI DIGUNAKAN UNTUK LANDING PAGE

Sampai disini kira-kira paham atau belum? Jika sudah mari kita lanjutkan ke tutorial cara pembuatan diagram. Namun sebelumnya, agar pemasangannya berjalan dengan lancar ada baiknya anda membackup template blog anda sebelum di modifikasi. Hal ini berguna untuk jaga-jaga jika anda salah menempelkan kode yang menyebabkan error pada template.

Cara membuat diagram progress persentase di blog
  • Masuk dashboard blog anda
  • Lalu masuk ke menu tema
  • Cari kode </head>
  • Tempelkan kode css dibawah ini tepat diatas kode </head>
<style>
.faronesia{
  padding:0px;
}
.faro{
  margin-bottom: 10px;
}
.faropro{
  width: 100%;
  height: 13px;
  background: #fff;
  border-radius: 12px;
  border: 2px solid #0081ff;
}
.faropro-bar{
  height: 13px;
  background: #0081ff;
  border-radius: 12px;
}
.p1{
  width: 80%;
}
.p2{
  width: 95%;
}
.p3{
  width: 70%;
}
.faropro-bar span{
  float: right;
  margin-right: 6px;
  line-height: 13px;
  color: #fff;
  font-size: 12px;
}
 </style>
  • Lalu, simpan tema.
Terakhir untuk penerapannya copy kode dibawah ini lalu tempelkan dimana saja sesuai keinginan, seperti: pada widget, didalam halaman statis, maupun didalam postingan. Copy kode dibawah ini:
<div class="faronesia">
<div class="faro">
<div class="title">
<b>Contoh faronesia.com</b></div>
<div class="faropro">
<div class="faropro-bar p1"><span>
80%</span></div>
</div>
</div>
<div class="faro">
<div class="title">
<b>Contoh faronesia.com</b></div>
<div class="faropro">
<div class="faropro-bar p2">
<span>
95%</span></div>
</div>
</div>
<div class="faro">
<div class="title">
<b>Contoh faronesia.com</b></div>
<div class="faropro">
<div class="faropro-bar p3">
<span>
70%</span></div>
</div>
</div>
  • Terakhir, selesai.

Demo lihat dibawah ini
pengguna Blogspot
95%
pengguna Wordpress
76%
pengguna Medium
57%
Demikianlah mengenai Cara membuat diagram progress persentase di blog semoga bermanfaat untuk para pembaca dimanapun anda berada. jangan lupa share dan jika ingin tanggapan serta masukan silahkan di kolom komentar yang telah tersedia dibawah postingan ini.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel