|
Perkenalan
Halo Semuanya, dipostingan kali ini saya akan membagikan Tutorial bagaimana cara menambahkan atau Cara Membuat Jadwal Rilis Anime Manual di Blogger. kalian bisa mengembangkan script ini sesuai keinginan kalian,
Langsung saja kita ke point utama, untuk cara pemasangan nya kalian bisa baca disini
Untuk Demo Kalian Bisa Cek Link DIbawah
Penting!
Sebelum Memulai Nya Ada Baiknya Kalian Memback-up Template Kalian Terlebih dahulu.
Source Code
<style>
.anime-title,.release-info,h2{text-align:center}.day-schedule{margin:20px 0}.day-title{font-size:1.5em;margin:20px 0 10px;border-bottom:2px solid #ccc;padding-bottom:10px}.anime-schedule{display:flex;flex-wrap:wrap;justify-content:space-around;margin:10px 0}.anime-item{position:relative;margin:10px;width:200px;overflow:hidden;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.2);transition:transform .3s;cursor:pointer}.play-button,.release-info{position:absolute;left:50%;opacity:0;background-color:rgba(255,255,255,.8)}.anime-thumbnail,.play-button,.release-info{transition:opacity .3s}.anime-item:hover{transform:scale(1.05)}.anime-thumbnail{width:100%;border-radius:10px}.anime-title{margin:10px 0;font-weight:700}.play-button{top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.play-button:hover{background-color:#fff}.anime-item:hover .play-button,.anime-item:hover .release-info{opacity:1}.play-icon{color:#333;font-size:24px}.release-info{bottom:10px;transform:translateX(-50%);border-radius:5px;padding:5px;width:80%}
</style>
<h2>Jadwal Rilis Anime</h2>
<div class="day-schedule">
<div class="day-title">Senin</div>
<div class="anime-schedule">
<div class="anime-item" onclick="window.location.href='#'">
<img src="" alt="Anime 1" class="anime-thumbnail">
<div class="play-button">
<span class="play-icon">▶</span>
</div>
<div class="anime-title">Nama Anime</div>
<div class="release-info">
<div>Jam Rilis: 18:00 WIB</div>
<div>Episode: 1</div>
</div>
</div>
<div class="anime-item" onclick="window.location.href='#'">
<img src="" alt="Anime 2" class="anime-thumbnail">
<div class="play-button">
<span class="play-icon">▶</span>
</div>
<div class="anime-title">Nama Anime</div>
<div class="release-info">
<div>Jam Rilis: 19:00 WIB</div>
<div>Episode: 2</div>
</div>
</div>
</div>
<div class="day-title">Selasa</div>
<div class="anime-schedule">
<div class="anime-item" onclick="window.location.href='#'">
<img src="#" alt="Anime 3" class="anime-thumbnail">
<div class="play-button">
<span class="play-icon">▶</span>
</div>
<div class="anime-title">Nama Anime</div>
<div class="release-info">
<div>Jam Rilis: 20:00 WIB</div>
<div>Episode: 3</div>
</div>
</div>
<div class="anime-item" onclick="window.location.href='#'">
<img src="#" alt="Anime 4" class="anime-thumbnail">
<div class="play-button">
<span class="play-icon">▶</span>
</div>
<div class="anime-title">Nama Anime</div>
<div class="release-info">
<div>Jam Rilis: 21:00 WIB</div>
<div>Episode: 4</div>
</div>
</div>
</div>
<div class="day-title">Rabu</div>
<div class="anime-schedule">
<div class="anime-item" onclick="window.location.href='#'">
<img src="" alt="Anime 5" class="anime-thumbnail">
<div class="play-button">
<span class="play-icon">▶</span>
</div>
<div class="anime-title">Nama Anime</div>
<div class="release-info">
<div>Jam Rilis: 22:00 WIB</div>
<div>Episode: 5</div>
</div>
</div>
</div>
<div class="day-title">Kamis</div>
<div class="anime-schedule">
<div class="anime-item" onclick="window.location.href='#'">
<img src="#" alt="Anime 6" class="anime-thumbnail">
<div class="play-button">
<span class="play-icon">▶</span>
</div>
<div class="anime-title">Nama Anime</div>
<div class="release-info">
<div>Jam Rilis: 23:00 WIB</div>
<div>Episode: 6</div>
</div>
</div>
</div>
<div class="day-title">Jumat</div>
<div class="anime-schedule">
<div class="anime-item" onclick="window.location.href='#'">
<img src="#" alt="Anime 7" class="anime-thumbnail">
<div class="play-button">
<span class="play-icon">▶</span>
</div>
<div class="anime-title">Nama Anime</div>
<div class="release-info">
<div>Jam Rilis: 00:00 WIB</div>
<div>Episode: 7</div>
</div>
</div>
</div>
<div class="day-title">Sabtu</div>
<div class="anime-schedule">
<div class="anime-item" onclick="window.location.href='#'">
<img src="#" alt="Anime 8" class="anime-thumbnail">
<div class="play-button">
<span class="play-icon">▶</span>
</div>
<div class="anime-title">Nama Anime</div>
<div class="release-info">
<div>Jam Rilis: 01:00 WIB</div>
<div>Episode: 8</div>
</div>
</div>
</div>
<div class="day-title">Minggu</div>
<div class="anime-schedule">
<div class="anime-item" onclick="window.location.href='#'">
<img src="#" alt="Anime 9" class="anime-thumbnail">
<div class="play-button">
<span class="play-icon">▶</span>
</div>
<div class="anime-title">Nama Anime
</div>
<div class="release-info">
<div>Jam Rilis: 02:00 WIB</div>
<div>Episode: 9</div>
</div>
</div>
</div>
</div>
<style>
.anime-title,.release-info,h2{text-align:center}.day-schedule{margin:20px 0}.day-title{font-size:1.5em;margin:20px 0 10px;border-bottom:2px solid #ccc;padding-bottom:10px}.anime-schedule{display:flex;flex-wrap:wrap;justify-content:space-around;margin:10px 0}.anime-item{position:relative;margin:10px;width:200px;overflow:hidden;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.2);transition:transform .3s;cursor:pointer}.play-button,.release-info{position:absolute;left:50%;opacity:0;background-color:rgba(255,255,255,.8)}.anime-thumbnail,.play-button,.release-info{transition:opacity .3s}.anime-item:hover{transform:scale(1.05)}.anime-thumbnail{width:100%;border-radius:10px}.anime-title{margin:10px 0;font-weight:700}.play-button{top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.play-button:hover{background-color:#fff}.anime-item:hover .play-button,.anime-item:hover .release-info{opacity:1}.play-icon{color:#333;font-size:24px}.release-info{bottom:10px;transform:translateX(-50%);border-radius:5px;padding:5px;width:80%}
</style>
Gak Pakai Javascript
Kesimpulan
Diatas adalah Cara Membuat Jadwal Rilis Anime Manual di Blogger., Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :p
