COPY SELURUH HTML DI BAWAH, DAN UBAH HANYA BAGIAN YANG DI WARNAI MERAH
===========================================
<!DOCTYPE html>
<html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Google Sites Photo Preview Slider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<style>
:root{
--title:"Pasukan Dorman";
}
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:transparent;padding:18px}
.wrap{max-width:430px;margin:auto}
.card{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:14px;box-shadow:0 20px 45px rgba(0,0,0,.16)}
h2{
text-align:center;
margin:4px 0 14px;
font-size:24px;
font-weight:700;
line-height:1.3;
background:linear-gradient(#39d98a,#0e8b58);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.frame{background:#fff;padding:8px;border-radius:18px;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.swiper{aspect-ratio:1/1;border-radius:14px;overflow:hidden}
.swiper img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.swiper-slide:hover img{transform:scale(1.08)}
.swiper-pagination{bottom:8px!important}
.swiper-pagination-bullet-active{background:#18a058!important}
.btn{display:block;text-align:center;margin-top:16px;padding:14px;border-radius:999px;text-decoration:none;color:#fff;font-weight:bold;background:linear-gradient(#39d98a,#0e8b58);position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.8),transparent);animation:shine 2.5s linear infinite}
@keyframes shine{to{left:170%}}
.reveal{opacity:0;transform:translateY(30px) scale(.98);transition:.8s}.reveal.show{opacity:1;transform:none}
</style></head><body>
<!-- EDIT BAGIAN INI SAJA
Judul: Moment Idul Fitri 2026
Link Artikel: https://aboutiskandar.blogspot.com/2026/03/moment-lebaran-idul-fitri-1447h-maret.html
LINK_GAMBAR_1
LINK_GAMBAR_2
LINK_GAMBAR_3
-->
<div class="wrap"><div class="card reveal"><h2>Pasukan Dorman (IG)</h2><div class="frame"><div class="swiper"><div class="swiper-wrapper">
<div class="swiper-slide"><a href="https://www.instagram.com/pasukandorman"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEhThobNRFthSPRLmZqgIz9sTI75fsJY1lbrNfJweJSS7L0gXtzDSsO_LRpHsfaFwETcs42cxxPdTb0M5E7-ntv9OFPFH0eqPy4GiGbtg3EB1RbF09KnlMThPdWV6-6KbT2ugw1daTgJx_wjDaO9vGhMXXFRua62nqgFd6YRkwtH4jPfVRm1ad78uF0AEFk"></a></div>
<div class="swiper-slide"><a href="https://www.instagram.com/pasukandorman"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjsPKZEVDHSmkbmkOL0mrHWYkccfaTkJnUlXNhIyL-NRI3m-FB0pon3EXkXTcQe8tSNcvVvnt1ittGGHfzY9pbfohilkdIrMxbkCK61YmNVT_MzG3D9apqDqi0ZtdwrqLxB7f5F-Yzrkm_EQS6KFSgf2sgZH21AtgddyHrF0pw9a5fFeV712lZXEJlYLtA"></a></div>
<div class="swiper-slide"><a href="https://www.instagram.com/pasukandorman"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLuuc-SU2-VhDmLupgB8aU7nkkZ_L1lNA-bfGb8KZvaXta_bP_TTkiXHoeJGwaWT40voEZg81S1Xwla2gJFk3MSqrTA_bC6x0a6l-lbrYtg9hiwmTUDAuNkwn-hNsyuHYSB2Wdl4vatzc/s1600/1670683799674070-3.png"></a></div>
</div><div class="swiper-pagination"></div></div></div>
<a class="btn" href="https://www.instagram.com/pasukandorman" target="_blank">View More Photos</a>
</div></div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
new Swiper('.swiper',{loop:true,autoplay:{delay:2500,disableOnInteraction:false,pauseOnMouseEnter:true},pagination:{el:'.swiper-pagination',clickable:true}});
new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('show')}),{threshold:.2}).observe(document.querySelector('.reveal'));
</script></body></html>
===========================================
0 comments:
Post a Comment