|
| Cara Membuat Jadwal Rilis Film di Blogger |
Perkenalan
Halo Semuanya, Berjumpa Lagi dengan Saya Seonxnn, di postingan kali ini saya akan membagikan Tutorial Bagaimana Cara Membuat Jadwal Rilis Film di Blogger di blogger, Seperti Biasa Kalian bisa Mengembangkan Kode ini sesuai keinginan kalian.
Tanpa Basa Basi langsung saja kita kepraktek nya, Untuk cara pemasangan kalian bisa liat disini
Untuk Demo Kalian Bisa Cek Link DIbawah
Penting!
Sebelum Memulai Nya Ada Baiknya Kalian Memback-up Template Kalian Terlebih dahulu.
Source Code
<div id="movie-list" style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Jadwal Rilis Movie</h2>
<ul style="list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between;">
<li style="margin: 15px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; width: calc(100% - 40px); max-width: 300px;">
<img src="https://media.themoviedb.org/t/p/w300_and_h450_bestv2/7I3EypifSHlW1BmmHbXXevqUUA7.jpg" alt="Film 1" style="width: 100%; height: auto; border-radius: 5px;">
<div style="text-align: center;">
<h3 style="margin: 10px 0;">The Penguin (2024)</h3>
<p><strong>Genre:</strong> Crime, Drama</p>
<p><strong>Sinopsis:</strong> Witness the The Penguin's rise to power in Gotham's criminal underworld in the aftermath of the Riddler killings..</p>
<p><strong>Tanggal Rilis:</strong> 30 Oktober 2024</p>
<div id="countdown1" style="font-size: 20px; color: #ff0000;"></div>
</div>
</li>
<li style="margin: 15px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; width: calc(100% - 40px); max-width: 300px;">
<img src="https://media.themoviedb.org/t/p/w300_and_h450_bestv2/x9YC2rpXHUFMqI1hCekKDm9UE4w.jpg" alt="Film 2" style="width: 100%; height: auto; border-radius: 5px;">
<div style="text-align: center;">
<h3 style="margin: 10px 0;">Monsters (2024)</h3>
<p><strong>Genre:</strong> Drama, Crime</p>
<p><strong>Sinopsis:</strong> The story of the Menéndez brothers, who were convicted in 1996 of murdering their parents José and Mary Louise “Kitty” Menéndez..</p>
<p><strong>Tanggal Rilis:</strong> 15 November 2024</p>
<div id="countdown3" style="font-size: 20px; color: #ff0000;"></div>
</div>
</li>
<li style="margin: 15px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; width: calc(100% - 40px); max-width: 300px;">
<img src="https://media.themoviedb.org/t/p/w300_and_h450_bestv2/1tfCj5h0FEQ5xg8hzVjQgcuGlgN.jpg" alt="Film 2" style="width: 100%; height: auto; border-radius: 5px;">
<div style="text-align: center;">
<h3 style="margin: 10px 0;">Agatha All Along (2024)</h3>
<p><strong>Genre:</strong> Sci-Fi & Fantasy, Mystery, Action & Adventure</p>
<p><strong>Sinopsis:</strong> Agatha Harkness gathers a coven of witches and sets off down, down, down The Witches' Road..</p>
<p><strong>Tanggal Rilis:</strong> 15 Desember 2024</p>
<div id="countdown2" style="font-size: 20px; color: #ff0000;"></div>
</div>
</li>
<li style="margin: 15px; border: 1px solid #ccc; padding: 10px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; width: calc(100% - 40px); max-width: 300px;">
<img src="https://media.themoviedb.org/t/p/w300_and_h450_bestv2/yTIHBPLQyzhgz1c2spak3btJxsg.jpg" alt="Film 2" style="width: 100%; height: auto; border-radius: 5px;">
<div style="text-align: center;">
<h3 style="margin: 10px 0;">His Three Daughters (2024)</h3>
<p><strong>Genre:</strong> Drama</p>
<p><strong>Sinopsis:</strong> Sinopsis untuk film 4 akan ditulis di sini. Kisah cinta yang menyentuh hati antara dua orang yang tidak terduga.</p>
<p><strong>Tanggal Rilis:</strong> 21 September 2024</p>
<div id="countdown4" style="font-size: 20px; color: #ff0000;"></div>
</div>
</li>
<!-- Tambahkan lebih banyak film di sini -->
</ul>
</div>
<style>
/* CSS untuk membuat tampilan responsif */
@media (max-width: 600px) {
#movie-list ul {
flex-direction: column;
align-items: center;
}
#movie-list ul li {
width: 100%; /* Memastikan lebar 100% pada perangkat kecil */
max-width: none; /* Menghilangkan batasan lebar maksimum */
}
}
</style>
<script>
// Fungsi untuk menghitung countdown
function startCountdown(releaseDate, elementId) {
var releaseDateTime = new Date(releaseDate).getTime();
var countdownFunction = setInterval(function() {
var now = new Date().getTime();
var distance = releaseDateTime - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById(elementId).innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById(elementId).innerHTML = "Film sudah dirilis!";
}
}, 1000);
}
// Mengatur tanggal rilis untuk setiap film
startCountdown("2024-10-30T00:00:00", "countdown1"); // Film 1
startCountdown("2024-11-15T00:00:00", "countdown2"); // Film 2
startCountdown("2024-12-15T00:00:00", "countdown3"); // Film 2
startCountdown("2024-09-21T00:00:00", "countdown4"); // Film 2
</script>
Kesimpulan
Diatas adalah Cara Membuat Jadwal Rilis Film di Blogger., Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :p
