Widget Jadwal Rilis Otomatis

Halo, kembali lagi disini saya akan memberikan tutorial Cara Membuat Widget Jadwal Rilis Otomatis untuk blog(website) kalian. Disini kita akan membuat dengan JavaScript dengan memanfaatkan fungsi Date. Maksud otomatis disini tidak langsung jadi sendiri hanya dengan memasang(mengimport)
script .js tapi kalian perlu mengsetup jadwalnya sesuai hari yang anime akan dirilis di blog kamu. Langsung saja kita buat.

1. Jika pakai Blogger, pergi ke Tata Letak, pilih area widget kemudian Tambahkan widget dan pilih HTML/JavaScript. Jika WordPress, pergi ke Tampilan > Widget kemudian tambahkan widget Teks
2. Beri judul, kemudian masukkan kode JavaScript dibawah ini

<style>
#widget-jadwal-rilis{padding: 5px;width: inherit;font-family: Roboto, sans-serif;border: 1px solid #ddd;}
.judul-jadwal-rilis{display: block;text-align: center;font-weight: bold;padding-bottom: 5px;border-bottom: 1px solid #ddd;margin-bottom: 5px;}
#widget-jadwal-rilis a{color: #d35400;text-decoration: none;}
#widget-jadwal-rilis ul{margin: 0;padding-left: 20px;}
#widget-jadwal-rilis ul li{padding: 5px;border-bottom: 1px solid #ddd;}
#widget-jadwal-rilis ul li:last-child{border: none;}
</style>
<script type="text/javascript">
tulis = function(teks){
    return document.write(teks);
}
var tanggal = new Date();
var hari = tanggal.getDay();
var nama = "";
var konten = [];

// Jadwal Anime Spring 2017
var jadwal = [
    (function(){ // Minggu
        nama = "Minggu";
        konten = [
            "Renai Boukun",
            "Shingeki no Bahamut: Virgin Soul",
            "Hinako Note" // terkahir tidak pakai tanda koma
        ]
    }),
    (function(){ // Senin
        nama = "Senin";
        konten = [
            "<a href='Link Anime'>Nama Anime I</a>",
            "<a href='Link Anime'>Nama Anime II</a>",
            "<a href='Link Anime'>Nama Anime III</a>",
            "<a href='Link Anime'>Nama Anime IV</a>",
            "<a href='Link Anime'>Nama Anime V</a>"
        ];
    }),
    (function(){ // Selasa
        nama = "Selasa";
        konten = [
            "<a href='Link Anime'>Nama Anime I</a>",
            "<a href='Link Anime'>Nama Anime II</a>",
            "<a href='Link Anime'>Nama Anime III</a>",
            "<a href='Link Anime'>Nama Anime IV</a>",
            "<a href='Link Anime'>Nama Anime V</a>"
        ];
    }),
    (function(){ // Rabu
        nama = "Rabu";
        konten = [
            "<a href='Link Anime'>Nama Anime I</a>",
            "<a href='Link Anime'>Nama Anime II</a>",
            "<a href='Link Anime'>Nama Anime III</a>",
            "<a href='Link Anime'>Nama Anime IV</a>",
            "<a href='Link Anime'>Nama Anime V</a>"
        ];
    }),
    (function(){ // Kamis
        nama = "Kamis";
        konten = [
            "<a href='Link Anime'>Nama Anime I</a>",
            "<a href='Link Anime'>Nama Anime II</a>",
            "<a href='Link Anime'>Nama Anime III</a>",
            "<a href='Link Anime'>Nama Anime IV</a>",
            "<a href='Link Anime'>Nama Anime V</a>"
        ];
    }),
    (function(){ // Jum'at
        nama = "Jum'at";
        konten = [
            "<a href='Link Anime'>Nama Anime I</a>",
            "<a href='Link Anime'>Nama Anime II</a>",
            "<a href='Link Anime'>Nama Anime III</a>",
            "<a href='Link Anime'>Nama Anime IV</a>",
            "<a href='Link Anime'>Nama Anime V</a>"
        ];
    }),
    (function(){ // Sabtu
        nama = "Sabtu";
        konten = [
            "<a href='Link Anime'>Nama Anime I</a>",
            "<a href='Link Anime'>Nama Anime II</a>",
            "<a href='Link Anime'>Nama Anime III</a>",
            "<a href='Link Anime'>Nama Anime IV</a>",
            "<a href='Link Anime'>Nama Anime V</a>"
        ];
    })
];

// Mencoba mencari kesalahan dari fungsi jadwal
try{
    jadwal[hari]();
}catch(error){
    console.log("Jadwalnya Error: " + error);
}
</script>
<div id="widget-jadwal-rilis">
    <div class="judul-jadwal-rilis">
        <span><script>tulis(nama);</script></span>
    </div>
<script>
tulis("<ul>");
for(var deteksi = 0; deteksi < konten.length; deteksi++){
    tulis("<li>" + konten[deteksi] + "</li>");
}
tulis("</ul>");
</script>
</div>

Silahkan:
1. Ganti Nama Anime **, dengan nama anime yang akan di rilis pada hari tersebut.
2. Ganti Link Anime, dengan tautan link anime tersebut.
Agar jadwal rilis otomatis lebih bagus bisa kalian styling sendiri, atau edit script.

Demo

Kurang lebihnya seperti itu, semoga bermanfaat. Untuk tutorial selanjutnya mungkin akan saya adakan Demonya :D

Author : Ex10sionlabs

Belum sukses.

Share this

Related Posts