<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2'
class='v2'
expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blog' name='robots'/>
<title>
<b:if cond='data:blog.pageTitle'>
<data:blog.pageTitle/>
<b:else/>
Aldi Story
</b:if>
</title>
<b:include data='blog' name='all-head-content'/>
<!-- =========================================================
ALDI STORY
MODERN PERSONAL BLOGGER TEMPLATE
========================================================== -->
<b:skin><![CDATA[
/* =========================================================
ROOT
========================================================== */
:root{
--bg:#080a0e;
--bg-soft:#0d1117;
--panel:#11161d;
--panel-2:#151b23;
--border:rgba(255,255,255,.08);
--border-hover:rgba(255,255,255,.15);
--text:#f5f7fa;
--muted:#9aa4b2;
--muted-2:#687384;
--accent:#00d4ff;
--accent-2:#6c63ff;
--sidebar-width:270px;
--header-height:74px;
--footer-height:58px;
--radius:18px;
--shadow:0 15px 50px rgba(0,0,0,.28);
}
*{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
html,
body{
margin:0;
padding:0;
min-height:100%;
}
body{
background:
radial-gradient(
circle at 75% 5%,
rgba(0,212,255,.07),
transparent 28%
),
radial-gradient(
circle at 15% 60%,
rgba(108,99,255,.06),
transparent 25%
),
var(--bg);
color:var(--text);
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif;
line-height:1.7;
overflow-x:hidden;
}
a{
color:inherit;
text-decoration:none;
}
img{
max-width:100%;
height:auto;
display:block;
}
button,
input{
font:inherit;
}
/* =========================================================
FIXED HEADER
========================================================== */
#aldi-header{
position:fixed;
top:0;
left:0;
right:0;
height:var(--header-height);
z-index:9999;
background:rgba(8,10,14,.82);
border-bottom:1px solid var(--border);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
transition:
background .25s ease,
box-shadow .25s ease;
}
#aldi-header.scrolled{
background:rgba(8,10,14,.96);
box-shadow:
0 10px 35px rgba(0,0,0,.28);
}
.header-inner{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 28px;
margin-left:var(--sidebar-width);
}
.brand{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.brand-mark{
width:38px;
height:38px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
var(--accent),
var(--accent-2)
);
color:#fff;
font-weight:900;
font-size:17px;
box-shadow:
0 8px 25px rgba(0,212,255,.15);
}
.brand-text{
display:flex;
flex-direction:column;
line-height:1.15;
}
.brand-name{
font-size:17px;
font-weight:800;
letter-spacing:.4px;
}
.brand-subtitle{
font-size:10px;
color:var(--muted);
letter-spacing:1.2px;
text-transform:uppercase;
}
.header-right{
display:flex;
align-items:center;
gap:10px;
}
.header-button{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--border);
border-radius:12px;
background:rgba(255,255,255,.03);
color:var(--muted);
cursor:pointer;
transition:.2s ease;
}
.header-button:hover{
color:#fff;
border-color:var(--border-hover);
background:rgba(255,255,255,.07);
transform:translateY(-1px);
}
.mobile-menu-button{
display:none;
}
/* =========================================================
SIDEBAR
========================================================== */
#aldi-sidebar{
position:fixed;
top:0;
left:0;
bottom:0;
width:var(--sidebar-width);
z-index:10000;
padding:24px 18px;
background:
linear-gradient(
180deg,
#0c1015 0%,
#090c11 100%
);
border-right:1px solid var(--border);
overflow-y:auto;
overflow-x:hidden;
}
.sidebar-profile{
padding:14px 12px 24px;
border-bottom:1px solid var(--border);
margin-bottom:20px;
}
.profile-avatar{
width:62px;
height:62px;
border-radius:20px;
background:
linear-gradient(
135deg,
rgba(0,212,255,.2),
rgba(108,99,255,.2)
);
border:1px solid rgba(255,255,255,.1);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
color:var(--accent);
font-size:24px;
font-weight:800;
}
.profile-name{
font-size:19px;
font-weight:800;
margin:0 0 3px;
}
.profile-description{
color:var(--muted);
font-size:12px;
margin:0;
line-height:1.6;
}
.sidebar-title{
color:var(--muted-2);
font-size:10px;
font-weight:800;
text-transform:uppercase;
letter-spacing:1.6px;
padding:0 12px;
margin:0 0 9px;
}
.sidebar-menu{
display:flex;
flex-direction:column;
gap:4px;
}
.sidebar-menu a{
position:relative;
display:flex;
align-items:center;
gap:13px;
padding:12px 13px;
border-radius:13px;
color:#aeb7c5;
font-size:13px;
font-weight:600;
transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}
.sidebar-menu a:hover{
color:#fff;
background:rgba(255,255,255,.05);
transform:translateX(2px);
}
.sidebar-menu a.active{
color:#fff;
background:
linear-gradient(
90deg,
rgba(0,212,255,.13),
rgba(108,99,255,.08)
);
}
.sidebar-menu a.active:before{
content:"";
position:absolute;
left:0;
top:9px;
bottom:9px;
width:3px;
border-radius:5px;
background:var(--accent);
box-shadow:0 0 12px rgba(0,212,255,.55);
}
.menu-icon{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
color:var(--muted);
}
.sidebar-menu a:hover .menu-icon,
.sidebar-menu a.active .menu-icon{
color:var(--accent);
}
.sidebar-bottom{
margin-top:35px;
padding:15px 12px;
border-top:1px solid var(--border);
}
.sidebar-bottom-text{
color:var(--muted-2);
font-size:11px;
line-height:1.6;
}
/* =========================================================
MAIN
========================================================== */
#main-wrapper{
margin-left:var(--sidebar-width);
min-height:100vh;
padding-top:var(--header-height);
padding-bottom:calc(var(--footer-height) + 30px);
}
#content{
width:100%;
max-width:1280px;
margin:0 auto;
padding:35px 32px 50px;
}
/* =========================================================
HERO
========================================================== */
.hero{
position:relative;
padding:52px 45px;
margin-bottom:35px;
border:1px solid var(--border);
border-radius:26px;
overflow:hidden;
background:
linear-gradient(
135deg,
rgba(255,255,255,.045),
rgba(255,255,255,.015)
);
box-shadow:var(--shadow);
}
.hero:before{
content:"";
position:absolute;
width:330px;
height:330px;
right:-100px;
top:-150px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(0,212,255,.18),
transparent 68%
);
pointer-events:none;
}
.hero:after{
content:"";
position:absolute;
width:280px;
height:280px;
left:-130px;
bottom:-180px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(108,99,255,.14),
transparent 68%
);
pointer-events:none;
}
.hero-content{
position:relative;
z-index:2;
max-width:720px;
}
.hero-label{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--accent);
font-size:11px;
font-weight:800;
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:14px;
}
.hero-label span{
width:7px;
height:7px;
border-radius:50%;
background:var(--accent);
box-shadow:0 0 12px var(--accent);
}
.hero h1{
margin:0 0 13px;
font-size:clamp(34px,5vw,62px);
line-height:1.05;
letter-spacing:-2px;
}
.hero h1 strong{
background:
linear-gradient(
90deg,
#fff,
var(--accent)
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.hero p{
margin:0;
color:var(--muted);
font-size:15px;
max-width:620px;
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:26px;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 18px;
border-radius:12px;
font-size:12px;
font-weight:700;
border:1px solid var(--border);
transition:.2s ease;
}
.btn-primary{
background:
linear-gradient(
135deg,
var(--accent),
var(--accent-2)
);
color:#fff;
border-color:transparent;
box-shadow:
0 8px 25px rgba(0,212,255,.12);
}
.btn-primary:hover{
transform:translateY(-2px);
box-shadow:
0 12px 30px rgba(0,212,255,.2);
}
.btn-secondary{
background:rgba(255,255,255,.035);
color:#dce2ea;
}
.btn-secondary:hover{
background:rgba(255,255,255,.07);
border-color:var(--border-hover);
}
/* =========================================================
SECTION
========================================================== */
.home-section{
margin-bottom:40px;
}
.section-heading{
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
margin-bottom:17px;
}
.section-heading h2{
margin:0;
font-size:21px;
letter-spacing:-.5px;
}
.section-heading p{
margin:3px 0 0;
color:var(--muted);
font-size:12px;
}
.section-link{
color:var(--accent);
font-size:11px;
font-weight:700;
white-space:nowrap;
}
.section-link:hover{
text-decoration:underline;
}
/* =========================================================
POST GRID
========================================================== */
.post-grid{
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:18px;
}
.story-card{
min-width:0;
background:
linear-gradient(
180deg,
rgba(255,255,255,.045),
rgba(255,255,255,.018)
);
border:1px solid var(--border);
border-radius:18px;
overflow:hidden;
transition:
transform .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
.story-card:hover{
transform:translateY(-5px);
border-color:
rgba(255,255,255,.15);
box-shadow:
0 18px 45px rgba(0,0,0,.28);
}
.story-image{
position:relative;
aspect-ratio:16/10;
background:#0a0d12;
overflow:hidden;
}
.story-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .45s ease;
}
.story-card:hover .story-image img{
transform:scale(1.045);
}
.story-image-placeholder{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted-2);
font-size:28px;
background:
radial-gradient(
circle at center,
rgba(0,212,255,.08),
transparent 60%
);
}
.story-body{
padding:17px;
}
.story-date{
color:var(--accent);
font-size:10px;
font-weight:700;
letter-spacing:.8px;
text-transform:uppercase;
margin-bottom:7px;
}
.story-title{
margin:0 0 8px;
font-size:16px;
line-height:1.4;
font-weight:750;
}
.story-title a:hover{
color:var(--accent);
}
.story-summary{
color:var(--muted);
font-size:12px;
line-height:1.65;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* =========================================================
LOADING
========================================================== */
.loading-box{
min-height:180px;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
border:1px dashed var(--border);
border-radius:18px;
}
.loader{
width:20px;
height:20px;
border:2px solid rgba(255,255,255,.12);
border-top-color:var(--accent);
border-radius:50%;
animation:spin .8s linear infinite;
margin-right:10px;
}
@keyframes spin{
to{
transform:rotate(360deg);
}
}
/* =========================================================
PAGE HEADER
========================================================== */
.page-header{
padding:38px 5px 28px;
}
.page-kicker{
color:var(--accent);
font-size:10px;
font-weight:800;
letter-spacing:1.7px;
text-transform:uppercase;
margin-bottom:8px;
}
.page-header h1{
margin:0;
font-size:clamp(30px,4vw,46px);
line-height:1.1;
letter-spacing:-1.5px;
}
.page-header p{
color:var(--muted);
max-width:680px;
margin:12px 0 0;
font-size:14px;
}
/* =========================================================
BLOG POSTS
========================================================== */
#Blog1{
width:100%;
}
.blog-posts{
display:flex;
flex-direction:column;
gap:25px;
}
.post-card{
background:
linear-gradient(
180deg,
rgba(255,255,255,.045),
rgba(255,255,255,.018)
);
border:1px solid var(--border);
border-radius:22px;
overflow:hidden;
box-shadow:
0 12px 40px rgba(0,0,0,.16);
}
.post-header{
padding:27px 29px 12px;
}
.post-title{
margin:0;
font-size:clamp(25px,3vw,38px);
line-height:1.2;
letter-spacing:-1px;
}
.post-title a:hover{
color:var(--accent);
}
.post-meta{
margin-top:10px;
color:var(--muted-2);
font-size:11px;
}
.post-body{
padding:5px 29px 30px;
color:#d9dee6;
font-size:15px;
line-height:1.85;
}
.post-body img{
border-radius:14px;
margin:20px auto;
}
.post-body a{
color:var(--accent);
}
.post-body h1,
.post-body h2,
.post-body h3{
color:#fff;
line-height:1.3;
}
.post-body blockquote{
margin:25px 0;
padding:15px 20px;
border-left:3px solid var(--accent);
background:rgba(0,212,255,.04);
border-radius:0 12px 12px 0;
color:#c7d0dc;
}
.post-body pre{
overflow:auto;
padding:18px;
background:#05070a;
border:1px solid var(--border);
border-radius:12px;
}
.post-footer{
padding:0 29px 25px;
color:var(--muted);
font-size:11px;
}
/* =========================================================
BLOGGER PAGER
========================================================== */
.blog-pager{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:30px 0;
}
.blog-pager a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 17px;
border:1px solid var(--border);
border-radius:11px;
background:rgba(255,255,255,.035);
color:#dce2ea;
font-size:12px;
font-weight:700;
}
.blog-pager a:hover{
background:rgba(255,255,255,.07);
border-color:var(--border-hover);
}
/* =========================================================
EMPTY
========================================================== */
.empty-state{
padding:60px 20px;
text-align:center;
border:1px dashed var(--border);
border-radius:20px;
color:var(--muted);
}
.empty-icon{
font-size:35px;
margin-bottom:10px;
}
/* =========================================================
FIXED FOOTER
========================================================== */
#aldi-footer{
position:fixed;
left:var(--sidebar-width);
right:0;
bottom:0;
height:var(--footer-height);
z-index:9998;
display:flex;
align-items:center;
justify-content:center;
background:rgba(8,10,14,.9);
border-top:1px solid var(--border);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
.footer-inner{
width:100%;
max-width:1280px;
padding:0 32px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.footer-copy{
color:var(--muted-2);
font-size:10px;
}
.footer-brand{
color:#dfe5ed;
font-size:11px;
font-weight:700;
}
.footer-social{
display:flex;
gap:7px;
}
.footer-social a{
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--border);
border-radius:9px;
color:var(--muted);
font-size:11px;
}
.footer-social a:hover{
color:var(--accent);
border-color:rgba(0,212,255,.3);
}
/* =========================================================
MOBILE DRAWER
========================================================== */
.sidebar-overlay{
display:none;
position:fixed;
inset:0;
z-index:9999;
background:rgba(0,0,0,.6);
backdrop-filter:blur(3px);
}
/* =========================================================
SEARCH PANEL
========================================================== */
#search-panel{
position:fixed;
top:var(--header-height);
left:var(--sidebar-width);
right:0;
z-index:9997;
display:none;
padding:20px 30px;
background:rgba(8,10,14,.97);
border-bottom:1px solid var(--border);
box-shadow:0 20px 50px rgba(0,0,0,.3);
}
#search-panel.open{
display:block;
}
.search-inner{
max-width:900px;
margin:auto;
}
.search-form{
display:flex;
gap:10px;
}
.search-form input{
flex:1;
min-width:0;
height:46px;
padding:0 15px;
color:#fff;
background:#11161d;
border:1px solid var(--border);
border-radius:12px;
outline:none;
}
.search-form input:focus{
border-color:rgba(0,212,255,.45);
}
.search-form button{
width:48px;
border:0;
border-radius:12px;
cursor:pointer;
color:#fff;
background:
linear-gradient(
135deg,
var(--accent),
var(--accent-2)
);
}
/* =========================================================
BLOGGER WIDGET CLEANUP
========================================================== */
.widget{
margin:0;
}
.widget h2{
display:none;
}
/* =========================================================
RESPONSIVE
========================================================== */
@media(max-width:1100px){
:root{
--sidebar-width:245px;
}
.post-grid{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.header-inner{
padding:0 20px;
}
#content{
padding-left:24px;
padding-right:24px;
}
}
@media(max-width:800px){
:root{
--sidebar-width:0px;
}
#aldi-sidebar{
width:275px;
transform:translateX(-100%);
transition:transform .28s ease;
box-shadow:
15px 0 50px rgba(0,0,0,.4);
}
#aldi-sidebar.open{
transform:translateX(0);
}
.sidebar-overlay.open{
display:block;
}
.header-inner{
margin-left:0;
padding:0 16px;
}
.mobile-menu-button{
display:flex;
}
#main-wrapper{
margin-left:0;
}
#aldi-footer{
left:0;
}
#search-panel{
left:0;
}
.hero{
padding:35px 25px;
border-radius:20px;
}
.post-grid{
grid-template-columns:1fr;
}
.footer-inner{
padding:0 16px;
}
.footer-copy{
display:none;
}
.footer-inner{
justify-content:center;
}
}
@media(max-width:560px){
:root{
--header-height:64px;
--footer-height:52px;
}
.brand-subtitle{
display:none;
}
.brand-mark{
width:35px;
height:35px;
}
.brand-name{
font-size:15px;
}
#content{
padding:22px 15px 35px;
}
.hero{
padding:30px 20px;
margin-bottom:28px;
}
.hero h1{
letter-spacing:-1.5px;
}
.section-heading{
align-items:start;
flex-direction:column;
gap:5px;
}
.post-header{
padding:22px 20px 10px;
}
.post-body{
padding:5px 20px 25px;
font-size:14px;
}
.post-footer{
padding:0 20px 20px;
}
.footer-brand{
font-size:10px;
}
.footer-social a{
width:28px;
height:28px;
}
}
]]></b:skin>
</head>
<body>
<!-- =========================================================
SIDEBAR
========================================================== -->
<aside id='aldi-sidebar'>
<div class='sidebar-profile'>
<div class='profile-avatar'>
A
</div>
<h1 class='profile-name'>
Aldi Story
</h1>
<p class='profile-description'>
Cerita, karya, pengalaman,
dan perjalanan saya.
</p>
</div>
<div class='sidebar-title'>
Navigation
</div>
<nav class='sidebar-menu'>
<a expr:href='data:blog.homepageUrl' data-menu='home'>
<span class='menu-icon'>⌂</span>
<span>Home</span>
</a>
<a expr:href='data:blog.homepageUrl + "search/label/Karya%20Saya"' data-menu='karya'>
<span class='menu-icon'>✦</span>
<span>Karya Saya</span>
</a>
<a expr:href='data:blog.homepageUrl + "search/label/Pengalaman%20Saya"' data-menu='pengalaman'>
<span class='menu-icon'>◷</span>
<span>Pengalaman Saya</span>
</a>
<a expr:href='data:blog.homepageUrl + "search/label/Tentang"' data-menu='tentang'>
<span class='menu-icon'>◎</span>
<span>Tentang</span>
</a>
</nav>
<div class='sidebar-bottom'>
<div class='sidebar-title' style='padding:0;margin-bottom:8px;'>
Aldi Story
</div>
<div class='sidebar-bottom-text'>
Sebuah ruang untuk menyimpan
karya, cerita, pengalaman,
dan perjalanan.
</div>
</div>
</aside>
<div class='sidebar-overlay' id='sidebar-overlay'></div>
<!-- =========================================================
HEADER
========================================================== -->
<header id='aldi-header'>
<div class='header-inner'>
<div class='brand'>
<button
aria-label='Buka menu'
class='header-button mobile-menu-button'
id='mobile-menu-button'
type='button'>
☰
</button>
<a expr:href='data:blog.homepageUrl' class='brand'>
<div class='brand-mark'>
A
</div>
<div class='brand-text'>
<span class='brand-name'>
Aldi Story
</span>
<span class='brand-subtitle'>
Personal Story
</span>
</div>
</a>
</div>
<div class='header-right'>
<button
aria-label='Pencarian'
class='header-button'
id='search-button'
type='button'>
⌕
</button>
</div>
</div>
</header>
<!-- =========================================================
SEARCH
========================================================== -->
<div id='search-panel'>
<div class='search-inner'>
<form
class='search-form'
expr:action='data:blog.homepageUrl + "search"'
method='get'>
<input
autocomplete='off'
name='q'
placeholder='Cari cerita, karya, pengalaman...'
type='search'/>
<button type='submit'>
⌕
</button>
</form>
</div>
</div>
<!-- =========================================================
MAIN
========================================================== -->
<main id='main-wrapper'>
<div id='content'>
<!-- =====================================================
HOME
====================================================== -->
<b:if cond='data:blog.pageType == "index" and data:blog.url == data:blog.homepageUrl'>
<section class='hero'>
<div class='hero-content'>
<div class='hero-label'>
<span></span>
Welcome to Aldi Story
</div>
<h1>
Cerita,
<strong>Karya</strong>,
dan Pengalaman.
</h1>
<p>
Selamat datang di Aldi Story.
Tempat untuk berbagi karya,
pengalaman, perjalanan,
dan berbagai cerita yang ingin
saya abadikan.
</p>
<div class='hero-actions'>
<a
class='btn btn-primary'
expr:href='data:blog.homepageUrl + "search/label/Karya%20Saya"'>
Lihat Karya
</a>
<a
class='btn btn-secondary'
expr:href='data:blog.homepageUrl + "search/label/Pengalaman%20Saya"'>
Lihat Pengalaman
</a>
</div>
</div>
</section>
<!-- =================================================
KARYA TERBARU
================================================== -->
<section class='home-section'>
<div class='section-heading'>
<div>
<h2>Karya Terbaru</h2>
<p>
Beberapa karya terbaru yang saya bagikan.
</p>
</div>
<a
class='section-link'
expr:href='data:blog.homepageUrl + "search/label/Karya%20Saya"'>
Lihat semua →
</a>
</div>
<div
class='post-grid'
id='home-karya'>
<div class='loading-box'>
<span class='loader'></span>
Memuat karya...
</div>
</div>
</section>
<!-- =================================================
PENGALAMAN TERBARU
================================================== -->
<section class='home-section'>
<div class='section-heading'>
<div>
<h2>Pengalaman Saya</h2>
<p>
Cerita dan pengalaman yang pernah saya jalani.
</p>
</div>
<a
class='section-link'
expr:href='data:blog.homepageUrl + "search/label/Pengalaman%20Saya"'>
Lihat semua →
</a>
</div>
<div
class='post-grid'
id='home-pengalaman'>
<div class='loading-box'>
<span class='loader'></span>
Memuat pengalaman...
</div>
</div>
</section>
<!-- =================================================
TENTANG
================================================== -->
<section class='home-section'>
<div class='section-heading'>
<div>
<h2>Tentang Saya</h2>
<p>
Sedikit cerita tentang Aldi.
</p>
</div>
<a
class='section-link'
expr:href='data:blog.homepageUrl + "search/label/Tentang"'>
Selengkapnya →
</a>
</div>
<div
class='post-grid'
id='home-tentang'>
<div class='loading-box'>
<span class='loader'></span>
Memuat informasi...
</div>
</div>
</section>
<b:else/>
<!-- =================================================
OTHER BLOGGER PAGES
================================================== -->
<b:if cond='data:blog.pageType == "item"'>
<div class='page-header'>
<div class='page-kicker'>
Aldi Story
</div>
<h1>
Cerita Saya
</h1>
<p>
Membaca cerita, karya,
dan pengalaman dari Aldi Story.
</p>
</div>
<b:else/>
<div class='page-header'>
<div class='page-kicker'>
Aldi Story
</div>
<h1>
<b:if cond='data:blog.pageType == "archive"'>
Arsip
<b:elseif cond='data:blog.pageType == "search"'>
Hasil Pencarian
<b:else/>
<data:blog.pageTitle/>
</b:if>
</h1>
<p>
Kumpulan cerita dan konten
yang ada di Aldi Story.
</p>
</div>
</b:if>
<!-- =================================================
BLOG WIDGET
================================================== -->
<b:section
class='main-section'
id='main'
maxwidgets='1'
showaddelement='no'>
<b:widget
id='Blog1'
locked='true'
title='Posting'
type='Blog'
version='2'>
<b:includable id='main'>
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<article class='post-card'>
<header class='post-header'>
<h2 class='post-title'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</h2>
<div class='post-meta'>
<data:post.timestamp/>
</div>
</header>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div class='story-summary'>
<data:post.snippet/>
</div>
<div style='margin-top:18px;'>
<a
class='btn btn-secondary'
expr:href='data:post.url'>
Baca selengkapnya →
</a>
</div>
</b:if>
</div>
</article>
</b:loop>
</div>
<!-- PAGINATION -->
<div class='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl'>
← Lebih Baru
</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl'>
Lebih Lama →
</a>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
</b:if>
</div>
</main>
<!-- =========================================================
FOOTER FIXED
========================================================== -->
<footer id='aldi-footer'>
<div class='footer-inner'>
<div class='footer-brand'>
Aldi Story
</div>
<div class='footer-copy'>
© 2026 Aldi Story · All Rights Reserved
</div>
<div class='footer-social'>
<a href='#' title='Instagram'>
IG
</a>
<a href='#' title='YouTube'>
YT
</a>
<a href='#' title='Facebook'>
FB
</a>
</div>
</div>
</footer>
<!-- =========================================================
JAVASCRIPT
========================================================== -->
<script type='text/javascript'>
//<![CDATA[
(function(){
'use strict';
/* ========================================================
ELEMENT
====================================================== */
var header =
document.getElementById('aldi-header');
var sidebar =
document.getElementById('aldi-sidebar');
var overlay =
document.getElementById('sidebar-overlay');
var mobileButton =
document.getElementById('mobile-menu-button');
var searchButton =
document.getElementById('search-button');
var searchPanel =
document.getElementById('search-panel');
/* ========================================================
HEADER SCROLL
====================================================== */
function updateHeader(){
if(window.scrollY > 20){
header.classList.add('scrolled');
}else{
header.classList.remove('scrolled');
}
}
window.addEventListener(
'scroll',
updateHeader,
{passive:true}
);
updateHeader();
/* ========================================================
MOBILE SIDEBAR
====================================================== */
function openSidebar(){
sidebar.classList.add('open');
overlay.classList.add('open');
document.body.style.overflow='hidden';
}
function closeSidebar(){
sidebar.classList.remove('open');
overlay.classList.remove('open');
document.body.style.overflow='';
}
if(mobileButton){
mobileButton.addEventListener(
'click',
openSidebar
);
}
if(overlay){
overlay.addEventListener(
'click',
closeSidebar
);
}
/* ========================================================
SEARCH
====================================================== */
if(searchButton){
searchButton.addEventListener(
'click',
function(){
searchPanel.classList.toggle('open');
if(searchPanel.classList.contains('open')){
var input =
searchPanel.querySelector('input');
if(input){
setTimeout(
function(){
input.focus();
},
100
);
}
}
}
);
}
/* ========================================================
ACTIVE MENU
====================================================== */
var currentUrl =
window.location.href;
var menuLinks =
document.querySelectorAll(
'.sidebar-menu a'
);
menuLinks.forEach(function(link){
var href =
link.getAttribute('href');
if(!href){
return;
}
var cleanHref =
href.split('?')[0];
var cleanCurrent =
currentUrl.split('?')[0];
if(
cleanCurrent === cleanHref
){
link.classList.add('active');
}
});
/* ========================================================
BLOGGER FEED
====================================================== */
function escapeHtml(value){
if(value === null ||
value === undefined){
return '';
}
return String(value)
.replace(/&/g,'&')
.replace(/</g,'<')
.replace(/>/g,'>')
.replace(/"/g,'"')
.replace(/'/g,''');
}
function getImage(entry){
try{
if(
entry.media$thumbnail &&
entry.media$thumbnail.url
){
return entry.media$thumbnail.url
.replace(
/\/s[0-9]+(-c)?\//,
'/s800/'
);
}
}catch(e){}
try{
var content =
entry.content.$t;
var match =
content.match(
/<img[^>]+src=["']([^"']+)["']/i
);
if(match && match[1]){
return match[1];
}
}catch(e){}
return '';
}
function getLink(entry){
if(
!entry.link
){
return '#';
}
for(
var i=0;
i<entry.link.length;
i++
){
if(
entry.link[i].rel === 'alternate'
){
return entry.link[i].href;
}
}
return '#';
}
function getDate(entry){
if(!entry.published){
return '';
}
var date =
new Date(entry.published.$t);
if(isNaN(date.getTime())){
return '';
}
return date.toLocaleDateString(
'id-ID',
{
day:'2-digit',
month:'short',
year:'numeric'
}
);
}
function getSummary(entry){
var text='';
try{
text =
entry.summary.$t ||
entry.content.$t ||
'';
}catch(e){
text='';
}
var temp =
document.createElement('div');
temp.innerHTML=text;
text =
temp.textContent ||
temp.innerText ||
'';
text =
text
.replace(/\s+/g,' ')
.trim();
if(text.length > 160){
text =
text.substring(0,160)
.trim() +
'...';
}
return escapeHtml(text);
}
function renderPosts(
container,
entries
){
if(!container){
return;
}
if(
!entries ||
entries.length === 0
){
container.innerHTML =
'<div class="empty-state">' +
'<div class="empty-icon">✦</div>' +
'<div>Belum ada konten.</div>' +
'</div>';
return;
}
var html='';
entries.forEach(
function(entry){
var title =
escapeHtml(
entry.title
? entry.title.$t
: 'Tanpa Judul'
);
var url =
getLink(entry);
var image =
getImage(entry);
var date =
getDate(entry);
var summary =
getSummary(entry);
var imageHtml='';
if(image){
imageHtml =
'<img ' +
'loading="lazy" ' +
'src="' +
escapeHtml(image) +
'" ' +
'alt="' +
title +
'"/>';
}else{
imageHtml =
'<div class="story-image-placeholder">' +
'✦' +
'</div>';
}
html +=
'<article class="story-card">' +
'<a ' +
'class="story-image" ' +
'href="' +
escapeHtml(url) +
'">' +
imageHtml +
'</a>' +
'<div class="story-body">' +
'<div class="story-date">' +
escapeHtml(date) +
'</div>' +
'<h3 class="story-title">' +
'<a href="' +
escapeHtml(url) +
'">' +
title +
'</a>' +
'</h3>' +
'<div class="story-summary">' +
summary +
'</div>' +
'</div>' +
'</article>';
}
);
container.innerHTML=html;
}
function loadLabel(
label,
containerId
){
var container =
document.getElementById(
containerId
);
if(!container){
return;
}
var base =
document
.querySelector(
'link[rel="canonical"]'
);
var homeUrl =
window.location.origin +
window.location.pathname;
/*
* Blogger homepage biasanya berada
* pada root domain.
*/
var path =
'/feeds/posts/default/-/' +
encodeURIComponent(label);
var url =
path +
'?alt=json-in-script' +
'&max-results=4' +
'&callback=?';
/*
* JSONP Blogger Feed
*/
var callbackName =
'aldiFeed_' +
Math.random()
.toString(36)
.substring(2);
window[callbackName] =
function(data){
try{
var entries =
data.feed &&
data.feed.entry
? data.feed.entry
: [];
renderPosts(
container,
entries
);
}catch(e){
container.innerHTML =
'<div class="empty-state">' +
'Konten belum tersedia.' +
'</div>';
}
try{
delete window[callbackName];
}catch(e){
window[callbackName]=undefined;
}
};
var script =
document.createElement('script');
script.src =
path +
'?alt=json-in-script' +
'&max-results=4' +
'&callback=' +
callbackName;
script.async=true;
script.onerror =
function(){
container.innerHTML =
'<div class="empty-state">' +
'Konten belum dapat dimuat.' +
'</div>';
};
document
.body
.appendChild(script);
}
/* ========================================================
HOME CONTENT
====================================================== */
var homeKarya =
document.getElementById(
'home-karya'
);
var homePengalaman =
document.getElementById(
'home-pengalaman'
);
var homeTentang =
document.getElementById(
'home-tentang'
);
if(homeKarya){
loadLabel(
'Karya Saya',
'home-karya'
);
}
if(homePengalaman){
loadLabel(
'Pengalaman Saya',
'home-pengalaman'
);
}
if(homeTentang){
loadLabel(
'Tentang',
'home-tentang'
);
}
/* ========================================================
ESCAPE KEY
====================================================== */
document.addEventListener(
'keydown',
function(e){
if(e.key === 'Escape'){
closeSidebar();
if(searchPanel){
searchPanel.classList.remove(
'open'
);
}
}
}
);
/* ========================================================
CLOSE MOBILE MENU AFTER LINK
====================================================== */
document
.querySelectorAll(
'.sidebar-menu a'
)
.forEach(
function(link){
link.addEventListener(
'click',
closeSidebar
);
}
);
})();
//]]>
</script>
<!-- =========================================================
BLOGGER REQUIRED SECTION
========================================================== -->
<b:section
class='footer-widget-area'
id='footer-widget-area'
maxwidgets='1'
showaddelement='yes'>
</b:section>
</body>
</html>