Cara Membuat Counter untuk 365 Blog Project

by Deddy Andaka on May 25, 2010

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.22_1171]
Rating: 0.0/10 (0 votes cast)

{ 13 comments… read them below or add one }

dJumTKS Weblog May 25, 2010 at 6:08 pm

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

Reply

Damar-Blog Tips May 26, 2010 at 12:47 am

Thanks for sharing . . . :lol:

follow me back, ok . . . :grin:

Reply

sulfikar May 26, 2010 at 3:10 am

Tips oke untuk proyek tahun depan! :lol:

Reply

Nasir May 26, 2010 at 9:24 am

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

Reply

imadewira May 26, 2010 at 1:42 pm

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

Reply

Kabar Bisnis May 30, 2010 at 9:12 am

Thanks infonya bro. Semoga makin sukses!!

Reply

Flame Project June 1, 2010 at 12:57 am

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

Reply

gendut June 29, 2010 at 11:45 am

makasih ya info nya…
sukses selalu… :smile:

Reply

cara-blog.co.cc July 1, 2010 at 2:53 pm

kunjungan balik ya bro :)

Reply

risky July 13, 2010 at 4:52 pm

makasih infonya

Reply

Naruto 511 September 25, 2010 at 7:42 am

woah, klo ngebaca dri judulnya aja keren bget kang.. bgni yah, aktivits seorg master :)

Reply

Renungan Harian November 6, 2010 at 1:20 pm

Luar biasa untuk artikelo ini nanti aku terapin di blog aku

Reply

santai November 7, 2010 at 7:32 am

Nice tips mas, aku mo coba

Regard

Reply

Leave a Comment

Previous post:

Next post: