Jasa Dokumen
Laman ini berisi berbagai informasi dan layanan yang
dapat membantu Anda. Silakan pilih informasi yang
ingin Anda lihat.
Informasi tambahan dapat ditulis di bagian ini.
Anda juga dapat menambahkan link, penjelasan,
informasi layanan, atau keterangan lainnya.
=============================================
<!-- =========================================================
TEMPLATE KONTEN PREMIUM
Google Sites / Blogger / Blogspot
Dengan Slide Up + Hover Zoom
========================================================= -->
<div class="konten-template">
<style>
/* =========================================================
PENGATURAN DASAR
========================================================= */
.konten-template{
width:100%;
max-width:900px;
margin:0 auto;
padding:20px 16px 30px;
font-family:Arial, Helvetica, sans-serif;
color:inherit;
box-sizing:border-box;
}
.konten-template *{
box-sizing:border-box;
}
/* =========================================================
GAMBAR
========================================================= */
.kt-gambar{
width:min(100%, 650px);
aspect-ratio:1 / 1;
margin:0 auto 25px;
overflow:hidden;
border-radius:16px;
opacity:0;
transform:translateY(60px);
transition:
opacity .8s ease,
transform .8s cubic-bezier(.22,1,.36,1);
cursor:pointer;
}
/* =========================================================
GAMBAR SAAT MASUK VIEWPORT
========================================================= */
.kt-gambar.muncul{
opacity:1;
transform:translateY(0);
}
/* =========================================================
GAMBAR UTAMA
========================================================= */
.kt-gambar img{
width:100%;
height:100%;
display:block;
object-fit:cover;
/*
Zoom normal
*/
transform:scale(1);
/*
Transisi zoom dibuat halus
*/
transition:
transform .6s cubic-bezier(.22,1,.36,1);
}
/* =========================================================
EFEK ZOOM SAAT KURSOR DI ATAS GAMBAR
========================================================= */
.kt-gambar:hover img{
transform:scale(1.06);
}
/* =========================================================
JUDUL
========================================================= */
.kt-judul{
margin:0 0 20px;
font-size:clamp(28px, 4vw, 42px);
line-height:1.15;
font-weight:700;
color:#08758c;
text-decoration:underline;
}
/* =========================================================
DESKRIPSI
========================================================= */
.kt-deskripsi{
font-size:clamp(16px, 2vw, 19px);
line-height:1.75;
margin:0 0 22px;
color:inherit;
}
/* =========================================================
DAFTAR / BARIS
========================================================= */
.kt-daftar{
margin:0 0 25px;
padding-left:22px;
}
.kt-daftar li{
margin-bottom:15px;
font-size:clamp(16px, 2vw, 18px);
line-height:1.5;
}
.kt-daftar a{
color:#08758c;
text-decoration:underline;
transition:.25s;
}
.kt-daftar a:hover{
color:#e53935;
}
/* =========================================================
DESKRIPSI AKHIR
========================================================= */
.kt-deskripsi-akhir{
margin-top:25px;
padding:10px 20px;
font-size:clamp(16px, 2vw, 18px);
line-height:1.7;
color:inherit;
}
/* =========================================================
RESPONSIVE HP
========================================================= */
@media(max-width:600px){
.konten-template{
padding:12px 12px 25px;
}
.kt-gambar{
width:100%;
margin-bottom:20px;
border-radius:12px;
}
.kt-judul{
margin-bottom:16px;
}
.kt-deskripsi{
line-height:1.7;
}
.kt-daftar{
padding-left:20px;
}
.kt-daftar li{
margin-bottom:13px;
}
}
/* =========================================================
PENGHEMATAN ANIMASI
========================================================= */
@media(prefers-reduced-motion:reduce){
.kt-gambar{
opacity:1;
transform:none;
transition:none;
}
.kt-gambar img{
transition:none;
}
}
/* =========================================================
PERANGKAT YANG TIDAK MEMILIKI KURSOR
Misalnya HP / Tablet
Zoom hover tidak digunakan.
========================================================= */
@media(hover:none){
.kt-gambar:hover img{
transform:none;
}
}
</style>
<!-- =========================================================
GAMBAR
GANTI LINK GAMBAR DI SINI
========================================================= -->
<div class="kt-gambar">
<img
src="GANTI-DENGAN-LINK-GAMBAR-ANDA"
alt="Ganti dengan deskripsi gambar"
>
</div>
<!-- =========================================================
JUDUL
========================================================= -->
<h2 class="kt-judul">
Jasa Dokumen
</h2>
<!-- =========================================================
DESKRIPSI AWAL
========================================================= -->
<div class="kt-deskripsi">
Laman ini berisi berbagai informasi dan layanan yang
dapat membantu Anda. Silakan pilih informasi yang
ingin Anda lihat.
</div>
<!-- =========================================================
DAFTAR BARIS
========================================================= -->
<ul class="kt-daftar">
<li>
<a
href="LINK-BARIS-1"
target="_blank"
rel="noopener">
Baris Informasi 1
</a>
</li>
<li>
<a
href="LINK-BARIS-2"
target="_blank"
rel="noopener">
Baris Informasi 2
</a>
</li>
<li>
<a
href="LINK-BARIS-3"
target="_blank"
rel="noopener">
Baris Informasi 3
</a>
</li>
<li>
<a
href="LINK-BARIS-4"
target="_blank"
rel="noopener">
Baris Informasi 4
</a>
</li>
<li>
<a
href="LINK-BARIS-5"
target="_blank"
rel="noopener">
Baris Informasi 5
</a>
</li>
</ul>
<!-- =========================================================
DESKRIPSI AKHIR
========================================================= -->
<div class="kt-deskripsi-akhir">
Informasi tambahan dapat ditulis di bagian ini.
Anda juga dapat menambahkan link, penjelasan,
informasi layanan, atau keterangan lainnya.
</div>
<!-- =========================================================
JAVASCRIPT
Slide Up saat masuk viewport
========================================================= -->
<script>
(function(){
const gambar =
document.querySelector(
'.konten-template .kt-gambar'
);
if(!gambar) return;
const observer =
new IntersectionObserver(
function(entries){
entries.forEach(function(entry){
if(entry.isIntersecting){
gambar.classList.add('muncul');
observer.unobserve(gambar);
}
});
},
{
threshold:0.15
}
);
observer.observe(gambar);
})();
</script>
</div>
TEMPLATE KONTEN PREMIUM
Google Sites / Blogger / Blogspot
Dengan Slide Up + Hover Zoom
========================================================= -->
<div class="konten-template">
<style>
/* =========================================================
PENGATURAN DASAR
========================================================= */
.konten-template{
width:100%;
max-width:900px;
margin:0 auto;
padding:20px 16px 30px;
font-family:Arial, Helvetica, sans-serif;
color:inherit;
box-sizing:border-box;
}
.konten-template *{
box-sizing:border-box;
}
/* =========================================================
GAMBAR
========================================================= */
.kt-gambar{
width:min(100%, 650px);
aspect-ratio:1 / 1;
margin:0 auto 25px;
overflow:hidden;
border-radius:16px;
opacity:0;
transform:translateY(60px);
transition:
opacity .8s ease,
transform .8s cubic-bezier(.22,1,.36,1);
cursor:pointer;
}
/* =========================================================
GAMBAR SAAT MASUK VIEWPORT
========================================================= */
.kt-gambar.muncul{
opacity:1;
transform:translateY(0);
}
/* =========================================================
GAMBAR UTAMA
========================================================= */
.kt-gambar img{
width:100%;
height:100%;
display:block;
object-fit:cover;
/*
Zoom normal
*/
transform:scale(1);
/*
Transisi zoom dibuat halus
*/
transition:
transform .6s cubic-bezier(.22,1,.36,1);
}
/* =========================================================
EFEK ZOOM SAAT KURSOR DI ATAS GAMBAR
========================================================= */
.kt-gambar:hover img{
transform:scale(1.06);
}
/* =========================================================
JUDUL
========================================================= */
.kt-judul{
margin:0 0 20px;
font-size:clamp(28px, 4vw, 42px);
line-height:1.15;
font-weight:700;
color:#08758c;
text-decoration:underline;
}
/* =========================================================
DESKRIPSI
========================================================= */
.kt-deskripsi{
font-size:clamp(16px, 2vw, 19px);
line-height:1.75;
margin:0 0 22px;
color:inherit;
}
/* =========================================================
DAFTAR / BARIS
========================================================= */
.kt-daftar{
margin:0 0 25px;
padding-left:22px;
}
.kt-daftar li{
margin-bottom:15px;
font-size:clamp(16px, 2vw, 18px);
line-height:1.5;
}
.kt-daftar a{
color:#08758c;
text-decoration:underline;
transition:.25s;
}
.kt-daftar a:hover{
color:#e53935;
}
/* =========================================================
DESKRIPSI AKHIR
========================================================= */
.kt-deskripsi-akhir{
margin-top:25px;
padding:10px 20px;
font-size:clamp(16px, 2vw, 18px);
line-height:1.7;
color:inherit;
}
/* =========================================================
RESPONSIVE HP
========================================================= */
@media(max-width:600px){
.konten-template{
padding:12px 12px 25px;
}
.kt-gambar{
width:100%;
margin-bottom:20px;
border-radius:12px;
}
.kt-judul{
margin-bottom:16px;
}
.kt-deskripsi{
line-height:1.7;
}
.kt-daftar{
padding-left:20px;
}
.kt-daftar li{
margin-bottom:13px;
}
}
/* =========================================================
PENGHEMATAN ANIMASI
========================================================= */
@media(prefers-reduced-motion:reduce){
.kt-gambar{
opacity:1;
transform:none;
transition:none;
}
.kt-gambar img{
transition:none;
}
}
/* =========================================================
PERANGKAT YANG TIDAK MEMILIKI KURSOR
Misalnya HP / Tablet
Zoom hover tidak digunakan.
========================================================= */
@media(hover:none){
.kt-gambar:hover img{
transform:none;
}
}
</style>
<!-- =========================================================
GAMBAR
GANTI LINK GAMBAR DI SINI
========================================================= -->
<div class="kt-gambar">
<img
src="GANTI-DENGAN-LINK-GAMBAR-ANDA"
alt="Ganti dengan deskripsi gambar"
>
</div>
<!-- =========================================================
JUDUL
========================================================= -->
<h2 class="kt-judul">
Jasa Dokumen
</h2>
<!-- =========================================================
DESKRIPSI AWAL
========================================================= -->
<div class="kt-deskripsi">
Laman ini berisi berbagai informasi dan layanan yang
dapat membantu Anda. Silakan pilih informasi yang
ingin Anda lihat.
</div>
<!-- =========================================================
DAFTAR BARIS
========================================================= -->
<ul class="kt-daftar">
<li>
<a
href="LINK-BARIS-1"
target="_blank"
rel="noopener">
Baris Informasi 1
</a>
</li>
<li>
<a
href="LINK-BARIS-2"
target="_blank"
rel="noopener">
Baris Informasi 2
</a>
</li>
<li>
<a
href="LINK-BARIS-3"
target="_blank"
rel="noopener">
Baris Informasi 3
</a>
</li>
<li>
<a
href="LINK-BARIS-4"
target="_blank"
rel="noopener">
Baris Informasi 4
</a>
</li>
<li>
<a
href="LINK-BARIS-5"
target="_blank"
rel="noopener">
Baris Informasi 5
</a>
</li>
</ul>
<!-- =========================================================
DESKRIPSI AKHIR
========================================================= -->
<div class="kt-deskripsi-akhir">
Informasi tambahan dapat ditulis di bagian ini.
Anda juga dapat menambahkan link, penjelasan,
informasi layanan, atau keterangan lainnya.
</div>
<!-- =========================================================
JAVASCRIPT
Slide Up saat masuk viewport
========================================================= -->
<script>
(function(){
const gambar =
document.querySelector(
'.konten-template .kt-gambar'
);
if(!gambar) return;
const observer =
new IntersectionObserver(
function(entries){
entries.forEach(function(entry){
if(entry.isIntersecting){
gambar.classList.add('muncul');
observer.unobserve(gambar);
}
});
},
{
threshold:0.15
}
);
observer.observe(gambar);
})();
</script>
</div>
