1 2<!doctype html> 3<html lang="ID"> 4<head> 5<meta charset="utf-8"> 6<meta content="width=device-width, initial-scale=1" name="viewport"> 7<title>Roro</title> 8<meta name="description" content="Roro"/> 9<link rel="canonical" href="https://jurnalmaritim.com/Roro/"/> 10<link href="https://ik.imagekit.io/kabarkite/1002363138_Hw7RJyL9N.jpg" rel="icon" type="image/x-icon"> 11<meta content="masukan kode gsc webmaster" name="google-site-verification"> 12<meta content="masukan kode bing webmaster" name="msvalidate.01"> 13<meta content="Indonesia" name="geo.placename"> 14<meta content="yes" name="apple-mobile-web-app-capable"> 15<meta content="#f7f8f9" name="theme-color"> 16<meta content="#f7f8f9" name="msapplication-navbutton-color"> 17<link href="https://fonts.googleapis.com" rel="preconnect"> 18<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"> 19<link rel="preconnect" href="https://fonts.googleapis.com"> 20<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 21<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 22<link 23 href="https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&family=Lato&family=Montserrat&family=Raleway&family=Source+Sans+Pro&fam
23ily=PT+Sans&family=Nunito&family=Ubuntu&family=Merriweather&family=Oswald&family=Playfair+Display&family=Roboto+Slab&family=Work+Sans&family=Fira+Sans&family=Inconsolata&family=Pacifico&family=Quicksand&family=Rubik&family=Anton&display=swap" 24 rel="stylesheet" 25 id="google-font-link" 26 /> 27 <style> 28 body{ 29font-family: 'Julius Sans One', sans-serif!important; 30font-weight: 400!important; 31font-style: normal!important; 32font-size: 16px!important; 33letter-spacing: 0em!important; 34text-transform: none!important; 35text-decoration: none!important; 36color: #111827!important; 37} 38</style> 39 40 41 42 43<style> 44 .adBn { 45 display: none!important; 46 } 47 </style> 48</head>
49<script src="https://cdn.tailwindcss.com"></script>
49 50 51 <link 52 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 53 rel="stylesheet" 54 /> 55 56 <link rel="preconnect" href="https://fonts.googleapis.com" /> 57 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 58 <link 59 href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libertinus+Mono&family=Manufacturing+Consent&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" 60 rel="stylesheet" 61 /> 62 <style>img{ 63object-fit: contain; 64} 65 :root { 66--main-width: 1100px; 67--warna-utama: #2b2b60; 68--warna-text: #1c293b;; 69--warna-text-link: #000000;; 70--warna-link-menu-navigasi: #000000;; 71--warna-background-navigasi: #fdfdfd; 72--warna-text-button: #fff;; 73--warna-backround-button: #313078;; 74--warna-backround-body: #fdfdfd;; 75--warna-text-heading-h1-h2-h3: #1c293b;; 76--warna-text-heading-h4-h5-h6: #1c293b;; 77--warna-text-footer: #fff;; 78--warna-backround-footer: #213758;; 79} 80 a.has-menu::after { 81 content: "\f0d7"; /* Font Awesome unicode for fa-caret-down */ 82 font-family: "Font Awesome 5 Free"; 83 font-weight: 900; 84 display: inline-block; 85 margin-left: 0.3em; 86 vertical-align: middle; 87 font-size: 0.75em; 88 }ul.sub-menu li { 89 padding: 3px 17px; 90}ul.sub-menu { 91 z-index: 99; 92} 93 body { 94 font-family: "Inter", sans-serif; 95 font-optical-sizing: auto; 96 font-weight: 400; 97 font-style: normal; 98 background-color: var(--warna-backround-body); 99 color: var(--warna-text); 100 } 101footer svg { 102 width: 23px !important; 103 height: 23px!important; 104} 105 a { 106 color: var(--warna-text-link); 107 } 108 109 header#site-header { 110 max-width: var(--main-width)!important; 111 background-color: var(--warna-backround-body); 112 color: var(--warna-link-menu-navigasi); 113 } 114 115footer.max-w-\[1200px\].mx-auto.bg-\[\#c9f0f3\].mt-16.py-8.px-4.sm\:px-6.lg\:px-8 { 116 background-color: var(--warna-backround-body)!important; 117} 118footer a { 119 color: var(--warna-link-menu-navigasi)!important;text-decoration: underline; 120} 121p.text-\[12px\] { 122 color: #4c4c4c; 123} 124 header#site-header a, 125 header#site-header button { 126 color: var(--warna-link-menu-navigasi); 127 } 128 a.bg-\[\#3b3f9c\].text-white.text-\[15px\].font-semibold.px-3.py-1.rounded-md.hover\:bg-\[\#2e3170\] { 129 background-color: var(--warna-backround-button)!important; 130 color: var(--warna-text-button)!important; 131} 132 133a.text-\[15px\].bg-\[\#d9f0f3\].text-\[\#3b3f9c\].rounded.px-1\.5.py-\[1px\].select-none { 134 background-color: var(--warna-backround-button)!important; 135 color: var(--warna-text-button)!important; 136} 137 138span.text-xs.bg-\[\#d0e1f9\].text-\[\#2a4d8f\].rounded.px-2.py-0\.5.font-semibold { 139 background-color: var(--warna-backround-button)!important; 140 color: var(--warna-text-button)!important; 141} 142span.inline-block.bg-\[\#dbe6ff\].text-\[\#3b5bdb\].text-\[14px\].font-semibold.rounded.px-2.py-\[2px\] { 143 background-color: var(--warna-backround-button)!important; 144 color: var(--warna-text-button)!important; 145} 146a.bg-\[\#2e3ea7\].text-white.font-mono.px-5.py-2.rounded-md.flex.items-center.space-x-2.hover\:bg-\[\#1f2a7a\].transition { 147 background-color: var(--warna-backround-button)!important; 148 color: var(--warna-text-button)!important; 149} 150span.bg-blue-600.text-white.text-\[14px\].font-semibold.rounded.px-2.py-0\.5 { 151 background-color: var(--warna-backround-button)!important; 152 color: var(--warna-text-button)!important; 153} 154.bg-[#c9f0f3]{ background-color: var(--warna-link-menu-navigasi) !important;} 155 header#site-header a:hover, 156 header#site-header button:hover { 157 text-decoration: underline; 158 } 159 .max-w-[1200px] {max-width: var(--main-width)!important;} 160main.max-w-\[1200px\].mx-auto.px-4.sm\:px-6.lg\:px-8.mt-6{max-width: var(--main-width)!important;} 161 .bg-[#3b3f9c] { 162 background-color: var(--warna-utama) !important; 163 } 164 165 .text-white { 166 color: var(--warna-text-button) !important; 167 } 168 169 .bg-[#c9f0f3] { 170 background-color: var(--warna-backround-body) !important; 171 } 172 173 footer { 174 max-width: var(--main-width)!important; 175 background-color: var(--warna-backround-footer); 176 color: var(--warna-text-footer); 177 } 178 179 footer a { 180 color: var(--warna-text-footer); 181 } 182 183 footer a:hover { 184 text-decoration: underline; 185 } 186 187 button#scrollToTopBtn { 188 background-color: var(--warna-utama); 189 color: var(--warna-text-button); 190 } 191 192 button#scrollToTopBtn:hover { 193 background-color: #2e3170; 194 } 195 196 .bg-[#d33a3a] { 197 background-color: #d33a3a !important; 198 } 199 200 .border-[#898989] { 201 border-color: #898989 !important; 202 } 203 204 .border-[#a3d4d9] { 205 border-color: #a3d4d9 !important; 206 } 207 208 .bg-gradient-to-b { 209 background-image: linear-gradient( 210 to bottom, 211 #5f6c6c, 212 #3a4747 213 ) !important; 214 } 215 216 h3 { 217 color: var(--warna-text-heading-h1-h2-h3); 218 } 219 220 h4, 221 h5, 222 h6 { 223 color: var(--warna-text-heading-h4-h5-h6); 224 } 225 226 .font-serif { 227 font-family: "Roboto Slab", serif; 228 } 229 230 /* Hide scrollbar for all browsers */ 231 .no-scrollbar {
232 -ms-overflow-style: none; /* IE and Edge */ 233 scrollbar-width: none; /* Firefox */ 234 } 235 .no-scrollbar::-webkit-scrollbar { 236 display: none; /* Chrome, Safari, Opera */ 237 } 238 /* Marquee animation */ 239 .marquee { 240 display: inline-flex; 241 animation: marquee 20s linear infinite; 242 } 243 .marquee:hover { 244 animation-play-state: paused; 245 } 246 @keyframes marquee { 247 0% { 248 transform: translateX(0%); 249 } 250 100% { 251 transform: translateX(-50%); 252 } 253 } 254 </style> 255 <!-- Header --> 256 <header 257 id="site-header" 258 class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 pt-5 pb-5 bg-[#c9f0f3] z-50" 259 > 260 <nav class="flex items-center justify-between"> 261 <a 262 href="/" 263 class="font-serif font-bold text-2xl leading-none select-none" 264 ><img style="width:220px!important;height:auto!important;" alt="Your brand" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/kabarkite/1002364236_qQrzmKHMG.png" title="Your brand"></a 265 > 266 <!-- Mobile menu button --> 267 <button 268 aria-label="Open menu" 269 class="md:hidden text-black text-xl focus:outline-none" 270 id="mobile-menu-button" 271 > 272 <i class="fas fa-bars"></i> 273 </button> 274<ul class="hidden md:flex space-x-6 text-[15px] font-semibold"><li><a href="/">Home</a></li><li><a href="https://jurnalmaritim.com/IMO/">IMO</a></li><li><a href="https://jurnalmaritim.com/Shipping/">Shipping</a></li><li><a href="https://jurnalmaritim.com/Safety/">Safety</a></li><li><a href="https://jurnalmaritim.com/Roro/">Roro</a></li><li><a href="https://jurnalmaritim.com/Regulation/">Regulation</a></li></ul> 275 276 277 278 <div class="hidden md:flex items-center space-x-4 text-[15px] font-normal"> 279 <button aria-label="Search" class="hover:text-gray-700"> 280 <i class="fas fa-search"></i> 281 </button> 282 <a class="hover:underline" href="#">Sign In</a> 283 <a 284 class="bg-[#3b3f9c] text-white text-[15px] font-semibold px-3 py-1 rounded-md hover:bg-[#2e3170]" 285 href="#" 286 >Contact Us</a 287 > 288 </div> 289 </nav> 290 <!-- Mobile menu dropdown --> 291 <div class="md:hidden mt-2 hidden" id="mobile-menu"> 292 <ul class="space-y-2 text-[15px] font-normal bg-[#d9f0f3] rounded p-4" aria-label="Mobile menu" role="menu"><li><a href="#" role="menuitem">Home</a></li><li class="has-sub"><a href="#" class="has-menu" role="menuitem">Category</a><ul class="sub-menu"><li><a href="#" role="menuitem">Menu 4</a></li><li><a href="#" role="menuitem">Menu 3</a></li></ul></li><li><a href="#" role="menuitem">Menu 1</a></li><li><a href="#" role="menuitem">Menu 2</a></li><li><a href="#" role="menuitem">Sign In</a></li></ul> 293 </div> 294 </header> 295 296 297<style> 298.news-ticker-container { 299 max-width: 100%; 300 padding-left: 1rem; 301 padding-right: 1rem; 302 display: flex; 303 align-items: center; 304 gap: 1rem; 305 overflow-x: hidden; 306 font-size: 14px; 307 font-weight: 600; 308 padding-top: 0.5rem; 309 padding-bottom: 0.5rem; 310 border: 1px solid #898989; 311 box-sizing: border-box; 312 margin-left: auto; 313 margin-right: auto; 314} 315 316@media (min-width: 640px) { 317 .news-ticker-container { 318 padding-left: 1.5rem; 319 padding-right: 1.5rem; 320 } 321} 322 323@media (min-width: 1024px) { 324 .news-ticker-container { 325 padding-left: 0.5rem; 326 padding-right: 0.5rem; 327 } 328} 329 330.news-ticker-label { 331 flex-shrink: 0; 332 background-color: #d33a3a; 333 color: white; 334 padding-left: 0.75rem; 335 padding-right: 0.75rem; 336 padding-top: 6px; 337 padding-bottom: 6px; 338 border-radius: 0.375rem; 339 font-size: 14px; 340 user-select: none; 341 white-space: nowrap; 342} 343 344.news-ticker-content { 345 flex: 1 1 auto; 346 overflow: hidden; 347} 348 349.news-ticker-marquee { 350 display: inline-block; 351 white-space: nowrap; 352 animation: marquee-left 20s linear infinite; 353} 354 355.news-ticker-marquee:hover { 356 animation-play-state: paused; 357} 358 359.news-ticker-link { 360 display: inline-block; 361 padding-left: 1rem; 362 padding-right: 1rem; 363 white-space: nowrap; 364 text-decoration: none; 365 color: inherit; 366 transition: text-decoration 0.2s ease-in-out; 367} 368 369.news-ticker-link:hover, 370.news-ticker-link:focus { 371 text-decoration: underline; 372 outline: none; 373} 374 375@keyframes marquee-left { 376 0% { 377 transform: translateX(0%); 378 } 379 100% { 380 transform: translateX(-100%); 381 } 382} 383</style> 384 385<div class="news-ticker-container" role="region" aria-label="News Today Ticker"> 386 <div class="news-ticker-label">News Today</div> 387 <div class="news-ticker-content"> 388 <div id="news-ticker" class="news-ticker-marquee" aria-live="polite" aria-atomic="true"> 389 390 </div> 391 </div> 392</div> 393
394<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" defer></script>
394 395
395<script> 396 const urlget = `/json?page=1&result=5`; 397 const postsContainer = document.getElementById('news-ticker'); 398 399 async function fetchData() { 400 try { 401 const response = await fetch(urlget); 402 if (!response.ok) throw new Error("Failed to fetch data"); 403 const text = await response.json(); 404 405 const posts = []; 406 text.forEach((row, idx) => { 407 posts.push({ 408 id: idx.toString(), 409 judul: row.title || "", 410 label: row.label || "", 411 gambar: row.image || "https://placehold.co/100x100/png?text=No+Image", 412 permalink: row.link || "", 413 statusView: row.status || "", 414 publishDate: row.date || "", 415 type: row.type || "" 416 }); 417 }); 418 419 if (posts.length > 0) { 420 posts.forEach(post => { 421 postsContainer.innerHTML += ` 422 <a class="news-ticker-link" href="/${post.permalink}">${post.judul}</a> 423 `; 424 425 }); 426 } 427 428 } catch (error) { 429 loading.innerHTML = "Error fetching data: " + error.message; 430 } 431 } 432 433 const uTicker=["scroll"];uTicker.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){fticker(0);localStorage.setItem('star', 'load');uTicker.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})} 434 435 window.addEventListener(localStorage.getItem('star'), nfTicker,false); 436function nfTicker(){ 437fticker(0); 438} 439 440var nntic = 0; 441const fticker = (ccTicker) => { 442 if (ccTicker < 1) { 443 setTimeout(() => { 444 ++ccTicker 445 fticker(ccTicker); 446 nntic +=1; 447 if(nntic == 1){ 448 fetchData(); 449 } 450 451 }, 0); 452 } 453} 454 </script>
454 455 456 <main class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 mt-6"> 457 458 459<div class=""> 460 <h1 class="text-center font-extrabold text-2xl mb-1"> 461 Safety 462 </h1> 463 <p class="text-center text-xl mb-8"> 464 1 Post 465 </p> 466 <hr class="border-t border-[#a9c7cc] mb-8"/> 467 <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6"> 468 469 <a href="/rentetan-kebakaran-kapal-apa-yang-harus-dipelajari" aria-label="post" class="flex flex-col md:flex-row md:space-x-6 max-w-xl"> 470 <img alt="Rentetan Kebakaran Kapal, Apa yang Harus Dipelajari?" class="w-full h-64 md:w-40 md:h-40 object-cover flex-shrink-0 rounded-t-xl md:rounded-xl" height="400" src="https://ik.imagekit.io/kabarkite/ChatGPT_Image_Aug_31__2026__10_15_37_AM_SsRkUAPPB.png" width="400"> 471 <div class="flex flex-col justify-between"> 472 <div> 473 <h2 class="font-semibold text-[20px] leading-snug mb-1 mt-3 md:mt-0"> 474 Rentetan Kebakaran Kapal, Apa yang Harus Dipelajari? 475 </h2> 476 <p class="text-[14px] text-[#7f8c8d] mb-2"> 477 Rentetan kebakaran kapal di Indonesia kembali menyoroti risiko keselamatan, khususnya pada kapal Ro-Ro, car deck, deklarasi muatan, dan sistem pencegahan kebakaran. 478 </p> 479 <span class="inline-block bg-[#dbe6ff] text-[#3b5bdb] text-[14px] font-semibold rounded px-2 py-[2px]"> 480 Indonesia 481 </span> 482 </div> 483 <div class="flex items-center mt-4 space-x-2 text-[#7f8c8d] text-[13px]"> 484 <img alt="Ayu" class="rounded-full" height="14" src="https://ik.imagekit.io/rnlolpvoq/login-wg_-ikon_....._3l4z1DGtr.png" width="14"> 485 <div class="leading-tight"> 486 <p class="font-semibold text-[13px] text-[#0a1f2d]"> 487 Ayu 488 </p> 489 <p class="text-[13px]"> 490 31, Agustus, 2026, 10:08:00 â 6 min read 491 </p> 492 </div> 493 494 </div> 495 </div> 496 </a> 497 498 </div> 499 <div class="flex justify-center mt-10"> 500 <a href="/search?label=Roro&page=1&result=12" class="bg-[#2e3ea7] text-white font-mono px-5 py-2 rounded-md flex items-center space-x-2 hover:bg-[#1f2a7a] transition"> 501 <span> 502 Load More 503 </span> 504 <i class="fas fa-arrow-right text-xs"> 505 </i> 506 </a> 507 </div> 508 </div> 509 510 511 512 513 514</main> 515 <footer 516 class="max-w-[1200px] mx-auto bg-[#c9f0f3] mt-16 py-8 px-4 sm:px-6 lg:px-8" 517 > 518 <div 519 class="flex flex-col md:flex-row justify-between text-[11px] text-black" 520 > 521 <div class="mb-6 md:mb-0 max-w-xs"> 522 <h3 class="font-serif font-bold text-2xl mb-1 select-none"><img style="width:220px!important;height:auto!important;" alt="Your brand" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/kabarkite/1002364236_qQrzmKHMG.png" title="Your brand"></h3> 523 <p class="mb-3 text-[15px]">Jurnal Maritim</p> 524 <div class="flex space-x-3 mb-3 text-black"> 525 <a aria-label="Facebook" class="hover:text-gray-700" href="#"> 526 <i class="fab fa-facebook-f"></i> 527 </a> 528 <a aria-label="Twitter" class="hover:text-gray-700" href="#"> 529 <i class="fab fa-twitter"></i> 530 </a> 531 <a aria-label="LinkedIn" class="hover:text-gray-700" href="#"> 532 <i class="fab fa-linkedin-in"></i> 533 </a> 534 <a aria-label="Instagram" class="hover:text-gray-700" href="#"> 535 <i class="fab fa-instagram"></i> 536 </a> 537 </div> 538 <p class="text-[16px] opacity-70 select-none"> 539 © Copyright 2026 <a href="/">Jurnalmaritim.com</a> All rights reserved 540 </p> 541 </div> 542 <ul class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-right text-[14px] font-bold"> 543 <li><a class="hover:underline" href="#">Link 1</a></li> 544 <li><a class="hover:underline" href="#">Link 2</a></li> 545 <li><a class="hover:underline" href="#">Link 3</a></li> 546</ul> 547 </div> 548 </footer> 549 <!-- Scroll to top button --> 550 <button 551 aria-label="Scroll to top" 552 class="fixed bottom-6 right-6 bg-[#3b3f9c] text-white p-3 rounded-full shadow-lg hover:bg-[#2e3170] transition-colors z-50" 553 id="scrollToTopBtn" 554 type="button" 555 > 556 <i class="fas fa-chevron-up"></i> 557 </button> 558 </div> 559
559<script> 560 // Mobile menu toggle 561 const mobileMenuButton = document.getElementById("mobile-menu-button"); 562 const mobileMenu = document.getElementById("mobile-menu"); 563 const mobileCategoriesButton = document.getElementById( 564 "mobile-categories-button" 565 ); 566 const mobileCategoriesMenu = document.getElementById("mobile-categories-menu"); 567 568 mobileMenuButton.addEventListener("click", () => { 569 mobileMenu.classList.toggle("hidden"); 570 }); 571 572 573 // Scroll to top button 574 const scrollToTopBtn = document.getElementById("scrollToTopBtn"); 575 576 window.addEventListener("scroll", () => { 577 if (window.scrollY > 300) { 578 scrollToTopBtn.style.display = "block"; 579 } else { 580 scrollToTopBtn.style.display = "none"; 581 } 582 }); 583 584 scrollToTopBtn.addEventListener("click", () => { 585 window.scrollTo({ top: 0, behavior: "smooth" }); 586 }); 587 588 // Initially hide scroll button 589 scrollToTopBtn.style.display = "none"; 590 591 // Desktop submenu toggle on click 592 document.querySelectorAll('a.has-menu').forEach(el => { 593 el.addEventListener('click', function(e) { 594 e.preventDefault(); 595 const submenu = this.nextElementSibling; 596 if (submenu) { 597 const isHidden = submenu.classList.contains('hidden'); 598 // Hide all submenus first 599 document.querySelectorAll('ul.sub-menu').forEach(s => s.classList.add('hidden')); 600 // Toggle current submenu only if it was hidden 601 if (isHidden) submenu.classList.remove('hidden'); 602 } 603 }); 604 }); 605 606 document.body.addEventListener('click', function(e) { 607 // If click is outside any submenu or its toggle link, hide all submenus 608 let clickedInsideSubmenu = false; 609 document.querySelectorAll('ul.sub-menu').forEach(sub => { 610 if (sub.contains(e.target) || sub.previousElementSibling.contains(e.target)) { 611 clickedInsideSubmenu = true; 612 } 613 }); 614 if (!clickedInsideSubmenu) { 615 document.querySelectorAll('ul.sub-menu').forEach(sub => sub.classList.add('hidden')); 616 } 617 }); 618 619 620 // Sticky header on scroll 621 const header = document.getElementById("site-header"); 622 const topNewsBar = document.querySelector("header#site-header"); 623 624 window.addEventListener("scroll", () => { 625 if (window.scrollY > 0) { 626 header.classList.add( 627 "fixed", 628 "top-0", 629 "left-0", 630 "right-0", 631 "bg-[#c9f0f3]", 632 "shadow-md", 633 "z-50" 634 ); 635 topNewsBar.classList.add( 636 "fixed", 637 "left-0", 638 "right-0", 639 "bg-[#c9f0f3]", 640 "shadow-md", 641 "z-40" 642 ); 643 topNewsBar.style.maxWidth = "1140px"; 644 topNewsBar.style.margin = "0 auto"; 645 topNewsBar.style.paddingLeft = "1rem"; 646 topNewsBar.style.paddingRight = "1rem"; 647 } else { 648 header.classList.remove( 649 "fixed", 650 "top-0", 651 "left-0", 652 "right-0", 653 "bg-[#c9f0f3]", 654 "shadow-md", 655 "z-50" 656 ); 657 topNewsBar.classList.remove( 658 "fixed", 659 "left-0", 660 "right-0", 661 "bg-[#c9f0f3]", 662 "shadow-md", 663 "z-40" 664 ); 665 topNewsBar.style.maxWidth = ""; 666 topNewsBar.style.margin = ""; 667 topNewsBar.style.paddingLeft = ""; 668 topNewsBar.style.paddingRight = ""; 669 } 670 }); 671 </script>
671 672
672<script> 673 const results = 10; // Jumlah post per halaman 674 const blogPager = document.querySelector('#blog-pager'); 675 const searchParams = new URLSearchParams(window.location.search); 676 677 // 1. Ambil angka halaman saat ini, jika tidak ada default ke 0 678 const pagenow = parseInt(searchParams.get('page')) || 0; 679 const lanjut = pagenow + 1; 680 681 // 2. SEO Cleanup: Hapus kata 'null' pada Title dan Meta Description 682 const titleElement = document.querySelector('title'); 683 const metaDescriptionElement = document.querySelector('meta[name="description"]'); 684 685 if (titleElement) { 686 titleElement.textContent = titleElement.textContent.replace(/null/g, 'Page ' + pagenow); 687 } 688 689 if (metaDescriptionElement) { 690 const currentMeta = metaDescriptionElement.getAttribute('content') || ""; 691 metaDescriptionElement.setAttribute('content', currentMeta.replace(/null/g, 'Page ' + pagenow)); 692 } 693 694 // 3. Logika Tombol Next (Dibuat statis sesuai permintaan Anda) 695 if (blogPager) { 696 // Format link: /search?page=1&max-results=10&result=10 697 const nextLink = `/search?page=${lanjut}&max-results=${results}&result=${results}`; 698 699 blogPager.innerHTML = `<a class="blog-pager-older-link" href="${nextLink}">Next</a>`; 700 } 701</script>
701 702 703 704<style> 705 #bannerAds { 706 position: relative; 707 width: 100%; 708 max-width: 1200px; 709 margin: 0 auto; 710 background: #fff; 711 border-radius: 12px; 712 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); 713 overflow: hidden; 714 transition: all 0.5s ease-in-out; 715 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 716 user-select: none; 717 cursor: default; 718 box-sizing: border-box; 719 } 720 #bannerAds.fixed { 721 position: fixed !important; 722 top: 50% !important; 723 left: 50% !important; 724 transform: translate(-50%, -50%) !important; 725 width: 50% !important; 726 max-width: none !important; 727 border-radius: 16px !important; 728 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important; 729 z-index: 99999 !important; 730 cursor: pointer; 731 } 732 #bannerAds img { 733 display: block; 734 width: 100%; 735 height: auto; 736 object-fit: cover; 737 border-radius: inherit; 738 pointer-events: none; 739 user-select: none; 740 } 741 #bannerAds .close-btn { 742 position: absolute; 743 top: 12px; 744 right: 12px; 745 background: rgba(255, 255, 255, 0.85); 746 border: none; 747 border-radius: 50%; 748 width: 32px; 749 height: 32px; 750 font-size: 18px; 751 color: #444; 752 cursor: pointer; 753 display: flex; 754 align-items: center; 755 justify-content: center; 756 transition: background-color 0.3s ease, color 0.3s ease; 757 user-select: none; 758 z-index: 10; 759 } 760 #bannerAds .close-btn:hover, 761 #bannerAds .close-btn:focus { 762 background: #e53e3e; 763 color: white; 764 outline: none; 765 } 766 /* Text overlay container */ 767 #bannerAds .text-overlay { 768 position: absolute; 769 bottom: 20px; 770 left: 20px; 771 right: 20px; 772 color: #fff; 773 text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); 774 font-weight: 700; 775 font-size: 1.5rem; 776 line-height: 1.2; 777 pointer-events: none; 778 user-select: none; 779 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 780 } 781 #bannerAds.fixed .text-overlay { 782 font-size: 1.25rem; 783 bottom: 16px; 784 left: 16px; 785 right: 16px; 786 } 787 /* Title container */ 788 #bannerAds .title { 789 position: absolute; 790 top: 12px; 791 left: 20px; 792 right: 60px; 793 color: #222; 794 font-weight: 700; 795 font-size: 1.25rem; 796 line-height: 1.2; 797 user-select: none; 798 pointer-events: none; 799 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 800 text-overflow: ellipsis; 801 white-space: nowrap; 802 overflow: hidden; 803 } 804 #bannerAds.fixed .title { 805 color: #fff; 806 text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); 807 top: 12px; 808 left: 16px; 809 right: 60px; 810 font-size: 1.1rem; 811 } 812 /* Progress bar container */ 813 #bannerAds .progress-bar-container { 814 position: absolute; 815 bottom: 0; 816 left: 0; 817 width: 100%; 818 height: 4px; 819 background: rgba(0, 0, 0, 0.1); 820 border-radius: 0 0 12px 12px; 821 overflow: hidden; 822 pointer-events: none; 823 user-select: none; 824 } 825 #bannerAds.fixed .progress-bar-container { 826 border-radius: 0 0 16px 16px; 827 } 828 /* Progress bar fill */ 829 #bannerAds .progress-bar-fill { 830 height: 100%; 831 background: #e53e3e; 832 width: 0%; 833 transition: width linear; 834 } 835 /* Responsive adjustments */ 836 @media (max-width: 400px) { 837 #bannerAds.fixed { 838 width: 90vw !important; 839 top: 50% !important; 840 left: 50% !important; 841 transform: translate(-50%, -50%) !important; 842 } 843 #bannerAds .text-overlay { 844 font-size: 1.1rem; 845 bottom: 14px; 846 left: 14px; 847 right: 14px; 848 } 849 #bannerAds .title { 850 font-size: 1rem; 851 left: 14px; 852 right: 50px; 853 } 854 #bannerAds.fixed .title { 855 font-size: 1rem; 856 left: 14px; 857 right: 50px; 858 } 859 } 860</style> 861<!-- Banner Ads Container --> 862<div 863 aria-label="Promotional banner advertisement" 864 id="bannerAds" 865 role="region" 866 tabindex="0" 867> 868 869 <button aria-label="Close banner ad" class="close-btn" id="closeBtn" type="button"> 870 <i aria-hidden="true" class="fas fa-times"></i> 871 </button> 872 <div class="title" aria-hidden="true">Display Ads</div> 873 874 875 876 877 878 879 880 <div class="progress-bar-container" aria-hidden="true"> 881 <div class="progress-bar-fill" id="progressBar"></div> 882 </div> 883</div>
884<script> 885 (function () { 886 const banner = document.getElementById("bannerAds"); 887 const closeBtn = document.getElementById("closeBtn"); 888 const progressBar = document.getElementById("progressBar"); 889 890 // Constants for timing 891 const INITIAL_DELAY = 5000; // 5 seconds initial delay before fixed popup 892 const BASE_INTERVAL = 10000; // 10 seconds base interval after close 893 const DAY_MILLISECONDS = 24 * 60 * 60 * 1000; 894 const AUTO_CLOSE_DURATION = 10000; // 10 seconds auto close duration when popup shown 895 896 // Keys for localStorage 897 const STORAGE_KEY = "bannerAdsState"; 898 899 // State object structure: 900 // { 901 // lastCloseTime: timestamp in ms, 902 // currentIntervalMultiplier: number, 903 // lastShowTime: timestamp in ms 904 // } 905 906 // Initialize or reset state if 24 hours passed 907 function getState() { 908 const stateRaw = localStorage.getItem(STORAGE_KEY); 909 if (!stateRaw) { 910 return { 911 lastCloseTime: 0, 912 currentIntervalMultiplier: 1, 913 lastShowTime: 0, 914 }; 915 } 916 try { 917 const state = JSON.parse(stateRaw); 918 if (Date.now() - state.lastCloseTime > DAY_MILLISECONDS) { 919 // Reset after 24 hours 920 return { 921 lastCloseTime: 0, 922 currentIntervalMultiplier: 1, 923 lastShowTime: 0, 924 }; 925 } 926 return state; 927 } catch { 928 return { 929 lastCloseTime: 0, 930 currentIntervalMultiplier: 1, 931 lastShowTime: 0, 932 }; 933 } 934 } 935 936 function saveState(state) { 937 localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); 938 } 939 940 // Show banner as fixed popup 941 function showFixedPopup() { 942 banner.style.display = "block"; 943 banner.classList.add("fixed"); 944 startProgressBar(AUTO_CLOSE_DURATION); 945 startAutoCloseTimer(AUTO_CLOSE_DURATION); 946 } 947 948 // Show banner as normal full width banner (initial) 949 function showInitialBanner() { 950 banner.style.display = "block"; 951 banner.classList.remove("fixed"); 952 resetProgressBar(); 953 clearAutoCloseTimer(); 954 } 955 956 // Hide banner 957 function hideBanner() { 958 banner.style.display = "none"; 959 resetProgressBar(); 960 clearAutoCloseTimer(); 961 } 962 963 // Variables to hold timers 964 let fixedPopupTimer = null; 965 let recurringTimer = null; 966 let autoCloseTimer = null; 967 968 // Clear all timers except autoCloseTimer 969 function clearTimers() { 970 if (fixedPopupTimer) { 971 clearTimeout(fixedPopupTimer); 972 fixedPopupTimer = null; 973 } 974 if (recurringTimer) { 975 clearTimeout(recurringTimer); 976 recurringTimer = null; 977 } 978 } 979 980 // Clear auto close timer 981 function clearAutoCloseTimer() { 982 if (autoCloseTimer) { 983 clearTimeout(autoCloseTimer); 984 autoCloseTimer = null; 985 } 986 } 987 988 // Start the initial 5 second timer to show fixed popup 989 function startInitialTimer() { 990 showInitialBanner(); 991 fixedPopupTimer = setTimeout(() => { 992 showFixedPopup(); 993 state.lastShowTime = Date.now(); 994 saveState(state); 995 }, INITIAL_DELAY); 996 } 997 998 // Start recurring popup timer after close 999 function startRecurringTimer() { 1000 clearTimers(); 1001 const interval = BASE_INTERVAL * state.currentIntervalMultiplier; 1002 recurringTimer = setTimeout(() => { 1003 showFixedPopup(); 1004 state.lastShowTime = Date.now(); 1005 saveState(state); 1006 }, interval); 1007 } 1008 1009 // Auto close popup after duration 1010 function startAutoCloseTimer(duration) { 1011 clearAutoCloseTimer(); 1012 autoCloseTimer = setTimeout(() => { 1013 hideBanner(); 1014 // Update state as if closed by user to increase interval multiplier 1015 state.lastCloseTime = Date.now(); 1016 state.currentIntervalMultiplier++; 1017 saveState(state); 1018 startRecurringTimer(); 1019 }, duration); 1020 } 1021 1022 // Progress bar animation 1023 function startProgressBar(duration) { 1024 progressBar.style.transition = "none"; 1025 progressBar.style.width = "0%"; 1026 // Force reflow to restart transition 1027 void progressBar.offsetWidth; 1028 progressBar.style.transition = "width "+ duration + "ms linear"; 1029 progressBar.style.width = "100%"; 1030 } 1031 1032 function resetProgressBar() { 1033 progressBar.style.transition = "none"; 1034 progressBar.style.width = "0%"; 1035 } 1036 1037 // On close button click 1038 closeBtn.addEventListener("click", () => { 1039 hideBanner(); 1040 clearTimers(); 1041 clearAutoCloseTimer(); 1042 1043 // Update state 1044 state.lastCloseTime = Date.now(); 1045 state.currentIntervalMultiplier++; 1046 saveState(state); 1047 1048 // Start recurring timer with increased interval 1049 startRecurringTimer(); 1050 }); 1051 1052 // On page load 1053 let state = getState(); 1054 1055 // If banner was closed less than 24h ago and last show time is recent, show fixed popup
1055immediately 1056 // Otherwise start initial 5s timer 1057 if ( 1058 state.lastCloseTime > 0 && 1059 Date.now() - state.lastCloseTime < DAY_MILLISECONDS 1060 ) { 1061 // Calculate time passed since last close 1062 const timeSinceClose = Date.now() - state.lastCloseTime; 1063 const nextInterval = BASE_INTERVAL * state.currentIntervalMultiplier; 1064 1065 if (timeSinceClose >= nextInterval) { 1066 // Show fixed popup immediately 1067 showFixedPopup(); 1068 state.lastShowTime = Date.now(); 1069 saveState(state); 1070 // Start next recurring timer with incremented multiplier 1071 state.currentIntervalMultiplier++; 1072 saveState(state); 1073 startRecurringTimer(); 1074 } else { 1075 // Wait remaining time to show popup 1076 showInitialBanner(); 1077 fixedPopupTimer = setTimeout(() => { 1078 showFixedPopup(); 1079 state.lastShowTime = Date.now(); 1080 saveState(state); 1081 state.currentIntervalMultiplier++; 1082 saveState(state); 1083 startRecurringTimer(); 1084 }, nextInterval - timeSinceClose); 1085 } 1086 } else { 1087 // Reset multiplier and start initial 5s timer 1088 state.currentIntervalMultiplier = 1; 1089 saveState(state); 1090 startInitialTimer(); 1091 } 1092 })(); 1093</script>
1093 1094 1095</body>
1096<script> 1097void 0===localStorage.loc&&(localStorage.loc="3335000"); 1098const uCore=["scroll"];uCore.forEach(function(event){window.addEventListener(event,ujLdrs,{passive:!0})});function ujLdrs(){rsccore(0);localStorage.setItem('star', 'load');uCore.forEach(function(event){window.removeEventListener(event,ujLdrs,{passive:!0})})} 1099function lscCore(){document.querySelectorAll("script[data-js-host='adsjs']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("attribute"))})} 1100const uCorecss=["scroll"];uCorecss.forEach(function(event){window.addEventListener(event,ujLdrscss,{passive:!0})});function ujLdrscss(){rsccore(0);localStorage.setItem('loc', '0');uCorecss.forEach(function(event){window.removeEventListener(event,ujLdrscss,{passive:!0})})} 1101function lscCorecss(){document.querySelectorAll("link[data-type='css']").forEach(function(elem){elem.setAttribute("href",elem.getAttribute("attribute")) 1102elem.setAttribute("rel", "stylesheet") 1103})} 1104window.addEventListener(localStorage.getItem('star'), dcores,false); 1105function dcores(){ 1106rsccore(0); 1107} 1108var pvtr = 0; 1109const rsccore = (cffe) => { 1110if (cffe < 1) { 1111 setTimeout(() => { 1112 ++cffe 1113 rsccore(cffe); 1114pvtr +=1; 1115if(pvtr == 1){ 1116lscCorecss(); 1117lscCore(); 1118var WGSLAZY = document.getElementsByTagName("img"); 1119for (var i=0; i < WGSLAZY.length; i++) { 1120 if(WGSLAZY[i].getAttribute('oper-src')) { 1121 WGSLAZY[i].setAttribute('src',WGSLAZY[i].getAttribute('oper-src')); 1122}} 1123} 1124 }, 0); 1125} 1126} 1127</script>
1127 1128</html>
1128<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"115c72cb4e8547f192fa3f6ec36ba6d5","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 1128
1128
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.