Cara Membuat Counter untuk 365 Blog Project

Beberapa waktu yang lalu, Deni Surya menanyakan tentang cara membuat counter seperti di sidebar #365BlogProject. Hmm, karena saya bukan orang IT yang mengerti benar dengan bahasa PHP dan javascript, maka cara saya adalah cara “orang awam”. Jadi maklum saja kalau misalnya jalan saya agak memutar. Yang penting hasilnya sesuai dengan apa yang saya inginkan. Hehe…

Pada dasarnya, counter ini menampilkan 3 informasi. Yang pertama adalah menunjukkan hari kesekian dari 365 hari. Lalu yang kedua adalah jumlah postingan yang sudah kita buat. Dan yang terakhir adalah progresifitas project ini. Nah, mari kita bahas satu per satu.

1. Menampilkan Hari ke-X dari 365 Hari

Untuk menampilkan hari ke-X dari 365 hari saya menggunakan javascript untuk count up. Jadi kita tinggal menetapkan tanggal kita mulai, maka setiap hari dia bertambah terus. Kelemahan sistem ini adalah tidak ada rem-nya. Kalau sudah lewat 365 hari dia akan tetap bertambah terus. Solusinya, setelah 365 hari script ini bisa dihapus atau diganti manual. Ok ini dia sciptnya:

<script type="text/javascript">// <![CDATA[
/*
365 Blog Count up by deddy.me
*/
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul",
"Aug","Sep","Oct","Nov","Dec")

function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-
Date.parse(paststring))/(24*60*60*1000))*1)
difference+=""
document.write("Day "+difference+" of 365 Days") }
//enter the count up date using the format year/month/day
countup(2010,04,08)
// ]]></script>

Warna merah adalah bagian yang dapat Anda edit. Yang pertama adalah kata-katanya, yang kedua adalah dengan tanggal Anda memulai postingan minus 1. Jadi jika Anda mulai tanggal 9 April 2010, maka yang Anda buat di sana adalah tanggal 8 April 2010.

2. Menampilkan Total Postingan yang sudah dipublish

Karena #365BlogProject saya menggunakan blog baru, jadi saya tinggal menyisipkan wp_count_post yang sudah terintegrasi dengan WordPress. Begini scriptnya:

<li><?php
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
echo ‘Total: ‘.$published_posts;
?> Posts</li>

Bagi yang menggunakan blog yang sudah ada postingan saya belum cari tahu. Hehe… Mungkin ada yang mau menyumbangkan caranya? ;)

3. Menampilkan Progresifitas

Progresifitas ini adalah seberapa besar keberhasilan kita menjalankan proyek ini. Jadi kalau dalam 365 hari kita bisa membuat postingan 365 buah, maka progresifitasnya adalah 100%. Tentu saja syarat tetap 1 postingan per harinya. Karena itulah tidak ada sistem hutang dalam #365BlogProject ini. Maka logikanya adalah: jumlah postingan dibagi 365 hari dikali 100. Saya juga menggunakan pembulatan 2 angka di belakang koma. Kodenya adalah seperti ini:

<li>
<?php
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
$hitung = $published_posts*100/365;
$hitung = round($hitung,2);
echo ‘Progress: ‘.$hitung;
?> %</li>

Nah, semua script atau kode di atas tinggal disisipkan di bagian sidebar (Appearance > Editor > Sidebar). Kalau lewat widget sepertinya belum bisa. Maklum… cara-cara di atas adalah cara orang awam. Hehe…

Bagi yang sudah ikutan #365BlogProject, silakan dicoba cara-cara di atas.

Happy Blogging!

VN:F [1.9.3_1094]
Rating: 0.0/10 (0 votes cast)
This entry was posted in Blog, Tips and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

10 Comments

  1. Posted May 25, 2010 at 6:08 pm | Permalink

    wah banyak info mengenai phpnya…izin save dulu ya mas.. mana tahu besok2 bisa pakai Tipsnya. Thanks. :-)

  2. Posted May 26, 2010 at 12:47 am | Permalink

    Thanks for sharing . . . :lol:

    follow me back, ok . . . :grin:

  3. Posted May 26, 2010 at 3:10 am | Permalink

    Tips oke untuk proyek tahun depan! :lol:

  4. Posted May 26, 2010 at 9:24 am | Permalink

    Keren banget…andai aku sempat. 2 blog aya aja agak terbengkalai ni dok, cuma sempat mampir2 dan komen2 aja di blog lain.

  5. Posted May 26, 2010 at 1:42 pm | Permalink

    rupanya lagi asik di project itu ya, posting disini jadi agak sepi, hehe

  6. Posted May 30, 2010 at 9:12 am | Permalink

    Thanks infonya bro. Semoga makin sukses!!

  7. Posted June 1, 2010 at 12:57 am | Permalink

    wah infonya bagus nih…
    klo misalnya dikasih background image gmn mas ngletakin kodenya? trims

  8. Posted June 29, 2010 at 11:45 am | Permalink

    makasih ya info nya…
    sukses selalu… :smile:

  9. Posted July 1, 2010 at 2:53 pm | Permalink

    kunjungan balik ya bro :)

  10. Posted July 13, 2010 at 4:52 pm | Permalink

    makasih infonya

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting