Cara Membuat Countdown Dengan Efek jQuery di Blogger

Jika kemarin Kang Ismet membuat countdown untuk menghitung mundur detik-detik pergantian tahun 2014 di halaman utama blognya, kalian juga bisa kok menggunakan fitur jQuery ini untuk menghitung mundur hari-hari penting kalian, baik hari Jadian dengan pacar, hari ulang tahun kalian masing-masing atau hari perayaan yang lainnya.

Fitur Countdown ini bisa kalian pasang secara bebas di halaman blog kalian lho, dijamin free dan buat hari-hari penting kalian semakin seru dengan menarsiskan fitur penghitungan mundur momentum terindah dan terbaik kalian di halaman blog kalian masing-masing.

Mau tahu caranya, silahkan simak dan perhatikan secara teliti turorial kami kali ini. Namun sebelum kami sampaikan tutorialnya, kami sangat berterima kasih kepada sang master Kang Ismet yang sudah share infonya. Oke, mari kita simak langkah mudahnya di bawah ini :

1. Edit dan Manipulasi Script jQuery-nya :

var target_date = new Date("Jun 22, 2014").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;  
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;  
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
  countdown.innerHTML = days + " <span class=\'putih\'>hari</span> " + hours + " <span class=\'putih\'>jam</span> "
  + minutes + " <span class=\'putih\'>menit</span> " + seconds + " <span class=\'putih\'>detik menuju</span> 2014";
}, 1000);

Note :

• Baris pertama, tentukan destinasi tanggal akhir yang akan kalian jadikan countdownya. di atas adalah tanggal lahir saya. 22 Juni. Kalian bisa menggantinya sesuka hati.
• Pada teks yang berwarna biru bisa kalian ganti dengan kata-kata lain sesuai dengan keinginan kalian masing-masing.

2. Copas saja script pada point 1 ke text editor kalian, bisa menggunakan Notepad atau Notepad++.

3. Jika sudah kalian manipulasi scriptnya, silahkan simpan file dengan format .js. Contoh : mycountdown.js.

4. Upload ke server penyedia upload file JavaScript, kalian bisa upload ke Google atau ke yourjavascript.com.

5. Jika sudah mendapatkan url filenya, silahkan copas saja script di bawah ini pada Widget blog kalian masing-masing.

<style type="text/css" scoped>
#tahunbaru {
    background:#739bc8;
    color:yellow;
    font-size:150%;
    text-transform:uppercase;
    text-align:center;
    padding:20px 0;
    font-weight:normal;
    border-radius:5px;
    line-height:1.8em;
}
.putih {color:white}
</style>
<div id='tahunbaru'>
    <span id='countdown'></span>
</div>
<script type="text/javascript" src="your-link-file-jQuery"></script>

6. Simpan.

Nah, bagiamana. Sangat mudah kan. Asalkan kalian cermat dalam mengikuti tutorial cara membuat countdown dengan jQuery di Blogger ini pasti kalian bisa pasang. Dengan memasang fitur countdown di blogger dengan efek jQuery ini, buat momentum terbaikmu agar selalu dinanti-nantikan banyak orang dengan notife perhitungan mundur.

Selamat mencoba dan semoga berhasil, jika ada kesulitan, silahkan share problem kalian di kolom komentar di bawah ini.