Extensionlabs

Halo guys, kali ini saya akan membagikan sebuah tutorial yang sangat menarik buat para Blogger Fansub/share Anime yaitu Coutdown Time untuk Waktu perilisan anime. Ide tutorial ini saya ambil dari salah satu widget dari web ternama yaitu Oploverz. Dan disini saya membuat scriptnya dengan setupnya menggunakan array seperti tutorial Jadwal Rilis Otomatis sebelumnya, bagaimana caranya langsung saja ikuti intruksi cara pasang countdown time di blogger.

1. Pertama, pergi ke Tema > Edit HTML, cari tag </head> dan pastekan kode dibawah ini diatas tag </head> tersebut.

<script src="https://cdn.rawgit.com/ex10sionlabs/resources/master/js/countdown-anime.js"></script>

2. Simpan dan pergi ke menu Tata Letak kemudian tambahkan widget HTML/JavaScript. Setelah itu ikuti instruksi penggunaan countdown anime dibawah ini untuk mengisi kolom widget tersebut dengan konten coutdown timenya.
2.1:
Membuat Daftar Jadwal:
Seperti saya katakan tadi kita perlu menyetup daftar jadwalnya dengan array, sebagaimana pembuatannya seperti ini:

<script>
var x = [
 [idJadwal, judulAnime, deadline]
]
</script>

Keterangan:
x: nama variabel.
idJadwal: id/nomor jadwal animenya (ex: 1, 2, 3, ...).
judulAnime: judul anime yang akan dirilis pada waktunya (ex: "Eromanga-sensei Episode 04").
deadline: tanggal akan rilisnya anime tersebut
Format tanggal sebagai berikut:
"NamaBulan Tanggal Tahun" atau "NamaBulan Tanggal Tahun Jam:Menit:Detik"
contoh:
"April 30 2017" atau jika lebih detail "April 30 2017 12:00:00"

Dan sebagai contoh penggabungan dari diatas menjadi:

<script>
var jadwal = [
 [1, "Eromanga-sensei Episode 04", "April 30 2017 12:00:00"]
]
</script>

untuk menambahkan jadwal listnya:

<script>
var jadwal = [
 [1, "Eromanga-sensei Episode 04", "April 30 2017 12:00:00"], // tambahkan koma
 [2, "Renai Boukun Episode 06", "May 05 2017 06:00:00"],
 [3, "Clockwork Planet Episode 05", "May 03 2017 06:37:01"] // terakhir list tidak pakai koma
]
</script>

2.2:
Memanggil/Menampilkan Jadwal:
Untuk memanggil jadwal yang telah ditetapkan tadi kita bisa call dengan functions DeadlineAnime.bacaJadwal(className, jadwalAnime);, namun sebelum itu alangkah baiknya kita membuat tag <div> kosong dengan markup classname terserah, kemudian baru kita memanggilnya.

<!--
~ Membuat Tag div kosong dengan menambahkan classname
~ Jumlahnya Tag div harus sama dengan jumlah list jadwalnya
-->
<div class="deadline"></div>
<div class="deadline"></div>
<div class="deadline"></div>

<script>
// Buat jadwalnya
var jadwal = [
 [1, "Eromanga-sensei Episode 04", "April 30 2017 12:00:00"],
 [2, "Renai Boukun Episode 06", "May 05 2017 06:00:00"],
 [3, "Clockwork Planet Episode 05", "May 03 2017 06:37:01"]
]
// panggil fungsinya untuk menampilkan
DeadlineAnime.bacaJadwal("deadline", jadwal);
</script>

3. Setelah mengerti intruksi dari cara no 2, kalian bisa terapkan ke widget HTML/JavaScript tadi.

Kekurangan dari countdown time

Kalian perlu setup ulang setelah jadwal rilis berakhir/sampai deadlinenya menjadi jadwal baru untuk rilisnya anime tersebut.

Demo

Okeh, cukup sampai disini tutorial countdown time untuk rilis anime di blogger semoga tutorial tadi bermanfaat. Dan jangan lupa kalian bisa styling sendiri widgetnya atau default seperti biasa (karena di oploverz juga seperti itu hehehe...)