Demo Click Disini
Style.css :
.textwidget {
background:#1c1c1c;
color:#aaa;
padding:5px 15px;
padding-bottom:15px;
line-height:21px;
font-size:13px
}
.update {
margin:10px 0 15px
}
.update ul {
list-style-type:none
}
.update ul li:before {
content:url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="black" viewBox="0 0 24 24" fill="rgb(244, 92, 67)"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <circle cx="12" cy="12" r="9" /> <line x1="8" y1="12" x2="12" y2="16" /> <line x1="12" y1="8" x2="12" y2="16" /> <line x1="16" y1="12" x2="12" y2="16" /> </svg>');
width:18px;
height:18px;
margin-right:8px;
transform:rotate(270deg);
}
.update li {
display:flex;
border-bottom:1px solid #262432;
overflow:hidden;
margin-top:2px
}
.jadwal {
margin-top:10px;
font-size:16px;
color:#f45c43;
font-family:times new roman;
text-align:center;
font-weight:700;
text-transform:uppercase;
margin-bottom:15px;
display:flex;
justify-content:center;
}
.jadwal:before {
content:url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(244, 92, 67)"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>');
width:20px;
height:20px;
margin-right:5px;
}
.jadwal:after {
content:url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(244, 92, 67)"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>');
width:20px;
height:20px;
margin-left:5px
}
.blink_me a {
color:#fff;
}
.blink_me a:hover {
color:#ffc107;
}
.blink_me svg{
width:18px;
height:18px;
stroke:rgb(244, 92, 67);
margin:0 4px;
fill:#fff;
}
.blink_me {
color:#fff;
display:flex;
justify-content:center;
-webkit-animation-name:blinker;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:blinker;
-moz-animation-duration:1s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
animation-name:blinker;
animation-duration:1s;
animation-timing-function:linear;
animation-iteration-count:infinite
}
@-moz-keyframes blinker {
0% {
opacity:1
}
50% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes blinker {
0% {
opacity:1
}
50% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes blinker {
0% {
opacity:1
}
50% {
opacity:0
}
100% {
opacity:1
}
}Markup HTML :
<div class="textwidget">
<div class="jadwal">UPDATE HARI INI</div>
<div class="update">
<ul>
</ul>
</div>
<div style="color: #f45c43; font-weight: 800; margin-top: 10px; text-align: center;">
<i class="fas fa-quote-left"></i>Jadwal sewaktu-waktu bisa berganti tergantung kesibukan dan mood Admin<i class="fas fa-quote-right"></i>
</div><div class="blink_me" style="font-weight: 800; margin-top: 10px; text-align: center;"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" /><circle cx="18" cy="18" r="4" /><path d="M15 3v4" /><path d="M7 3v4" /><path d="M3 11h16" /><path d="M18 16.496v1.504l1 1" /></svg><a href="/p/schedule.html">Jadwal selengkapnya klik di sini!</a><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" /><circle cx="18" cy="18" r="4" /><path d="M15 3v4" /><path d="M7 3v4" /><path d="M3 11h16" /><path d="M18 16.496v1.504l1 1" /></svg>
</div>
</div>Script.js :
var jadwal=(function(){
const day = new Date(Date.now()).getDay(),jadwal=[];
// Minggu(Sunday)
jadwal[0] = '<li>Hari Minggu Waktunya Marathon Donghua di AniChin</li>'
+ '<li>Hari Minggu Waktunya Marathon Anime di Samehadaku</li>';
//Senin(Monday)
jadwal[1] = '<li>Hari Senin Waktunya Marathon Anime di Oploverz</li>'
+ '<li>Hari Senin Waktunya Download Batch Anime di Kusonime</li>';
//Selasa(Tuesday)
jadwal[2] = '<li>Hari Selasa Waktunya Marathon Donghua di Kazefuri</li>'
+ '<li>Hari Selasa Waktunya Marathon Anime di Animasu</li>';
//Rabu(Wednesday)
jadwal[3] = '<li>Hari Rabu Waktunya Marathon Donghua di Anixlife</li>'
+ '<li>Hari Rabu Waktunya Marathon Donghua di Kazefuri</li>';
//Kamis(Thursday)
jadwal[4] = '<li>Hari Minggu Waktunya Marathon Donghua di AniChin</li>'
+ '<li>Hari Rabu Waktunya Marathon Donghua di Anixlife</li>';
//Jumat(Friday)
jadwal[5] = '<li>Hari Senin Waktunya Download Batch Anime di Kusonime</li>'
+ '<li>Hari Selasa Waktunya Marathon Anime di Animasu</li>';
//Sabtu(Saturday)
jadwal[6] = '<li>Hari Minggu Waktunya Marathon Anime di Samehadaku</li>'
+ '<li>Hari Senin Waktunya Marathon Anime di Oploverz</li>';
$('.textwidget .update ul').append(jadwal[day]);
})();Script ini Otomatis sesuai Hari.
Q : tapi gua males min kalo harus nulis jadwal di Js-nya.
A : Tenang bray ada Generator yang mempermudah lu buat Nulis Jadwalnya.
Cukup Pilih Hari,Tambahin New Schedule Lalu isi Series apa yang rilis dihari itu.
Copy Hasilnya lalu Replace dengan jadwal dihari yang sama.
Generator Jadwal Click Disini
Similar Threads