1stframe Theme, Template Blogspot Gratis dengan Fitur Berjibun
Oleh
Admin
Posting Komentar
 |
| Tampilan responsive Template 1stframe |
1. Fitur-Fitur yang Ada di 1stframe Theme
Tema di Blog ini dirancang dengan berbagai fitur modern yang cukup lengkap untuk ukuran platform Blogger (Blogspot):
- Mode Terang/Gelap (Dark/Light Mode Toggle):
- Terdapat tombol ikon bulan/matahari di bagian header untuk mengubah tema warna tampilan secara instan sesuai kenyamanan mata pengguna.
- Widget Slideshow Interaktif:
- Bagian atas halaman utama dilengkapi slider gambar dinamis (carousel) untuk menyoroti konten atau banner unggulan.
- Widget Postingan Favorit/Populer:
- Area khusus yang memuat daftar postingan terbaik atau yang paling diminati pembaca.
- Indikator Jumlah Tayangan (View Count):
- Pada setiap kartu postingan (artikel terbaru), terdapat elemen statistik kecil berikon grafik yang menampilkan jumlah pembaca artikel tersebut.
- Navigasi Menu Utama & Sidebar Kustom:
- Terdapat struktur menu navigasi serta widget profil "Mengenai Saya" (About Me) di bagian samping (sidebar) halaman.
- Tombol Kembali ke Atas (Back-to-Top Button):
- Tombol panah ke atas di pojok kanan bawah yang memudahkan pengguna untuk kembali dengan cepat ke bagian awal halaman.
- Desain Halaman Berbasis Grid/Card Responsive:
- Tata letak artikel disusun rapi menggunakan bentuk kartu (*cards*) dengan gambar mini (*thumbnail*) yang proporsional.
2. Keunggulan UI/UX (User Interface & User Experience)
- Desain Bersih & Modern:
- Tampilan visualnya minimalis namun tetap elegan dengan kombinasi tipografi yang mudah dibaca, sehingga pengunjung tidak merasa lelah saat membaca teks dalam waktu lama.
- Responsif Sempurna di Berbagai Perangkat:
- Tata letak halaman secara otomatis menyesuaikan ukuran layar (baik diakses melalui komputer/laptop, tablet, maupun ponsel pintar Android).
- Pengalaman Akses yang Fleksibel (Dark Mode):
- Fitur *Dark Mode* memberikan nilai tambah bagi pengalaman pengguna (*user experience*), terutama bagi pengunjung yang membaca blog di malam hari atau di ruangan minim cahaya.
- Navigasi yang Intuitif:
- Penempatan menu utama, kolom pencarian, hingga tombol *scroll-to-top* membuat alur navigasi terasa lancar tanpa membuat pengguna kebingungan mencari informasi.
3. Analisis SEO (Search Engine Optimization)
- Struktur Kode yang Ramah SEO (SEO Friendly):
- Berdasarkan deskripsi metanya, template ini dibangun dengan optimasi struktur HTML yang bersih, penggunaan tag heading (<h1>, <h2>, <h3>) secara hierarkis yang baik, serta penerapan tautan kanonis (canonical) yang membantu mesin pencari mengindeks halaman dengan benar tanpa masalah duplikasi konten.
- Kecepatan Muat Halaman (Loading Speed):
- Penggunaan aset skrip dan gambar yang terstruktur rapi membantu menjaga performa blog tetap ringan, yang merupakan salah satu faktor penting dalam penilaian algoritma Google.
- Ketersediaan Metadata & Feed:
- Blog ini secara otomatis menyediakan format RSS dan Atom feed, serta pengaturan meta deskripsi yang memudahkan perayap (*crawlers*) mesin pencari seperti Google untuk memahami isi dan konteks setiap artikel yang diterbitkan.
Selanjutnya, mari kita bedah secara mendalam ulasan khusus mengenai performa responsif dan mobile-friendly dari template 1stframe ini:
1. Penerapan Media Queries yang Spesifik untuk Perangkat Mobile: Template ini memiliki pengaturan gaya khusus berbasis ukuran layar (seperti @media (max-width: 800px) dan @media (max-width: 480px)), yang secara otomatis menyesuaikan tata letak saat diakses melalui ponsel pintar.
2. Perilaku Header Dinamis saat Scrolling: Ketika pengguna menggulir layar ke bawah pada perangkat seluler, header berukuran besar secara mulus berubah menjadi mode running text yang diringkas agar tidak memakan ruang layar ponsel yang terbatas.
3. Tata Letak Grid Berubah Menjadi Kolom Tunggal (Single Column): Pada tampilan desktop, area beranda menggunakan sistem kolom ganda (artikel dan widget di samping). Namun, begitu diakses via layar kecil (di bawah 800px), kolom tersebut otomatis tersusun menjadi satu kolom vertikal ke bawah agar mudah dibaca tanpa perlu digulir ke samping.
4. Penyesuaian Ukuran Gambar & Elemen Fleksibel: Elemen gambar pada postingan maupun thumbnail diatur menggunakan aturan max-width: 100% !important; height: auto !important;, yang memastikan gambar tidak akan keluar dari batas layar ponsel atau merusak struktur halaman.
5. Elemen Navigasi Samping yang Ramah Sentuhan (Off-Canvas Menu): Menu utama dirancang tersembunyi di dalam tombol garis tiga (hamburger menu) yang ketika diklik akan memunculkan menu geser dari samping layar (off-canvas), sangat nyaman dioperasikan menggunakan sentuhan jari pada layar sentuh Android.
theme-1stframe-wcreditlink_2.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutVersion='3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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 content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:view.title.escaped/></title>
<b:include data='blog' name='all-head-content'/>
<meta expr:content='data:view.description' name='description'/>
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "<data:blog.title/>",
"url": "<data:blog.homepageUrl/>"
}
</script>
<b:skin><![CDATA[
/*
<Group description="Theme Colors" selector="body">
<Variable default="#007bff" description="Warna Utama" name="theme.color" type="color" value="#007bff"/>
<Variable default="#f4f7f6" description="Warna Background (Light)" name="bg.color" type="color" value="#f4f7f6"/>
<Variable default="#333333" description="Warna Teks (Light)" name="text.color" type="color" value="#333333"/>
</Group>
*/
:root {
--bg-header: #ffffff;
--bg-main: $(bg.color);
--bg-content: #ffffff;
--bg-alt: #e9ecef;
--border-color: #eeeeee;
--border-dashed: #cccccc;
--text-main: $(text.color);
--text-muted: #666666;
--theme-color: $(theme.color);
}
/* Switch Dark Mode Styling */
.dark-mode-switch-wrap { position: absolute; top: 20px; right: 25px; cursor: pointer; display: flex; align-items: center; z-index: 10; transition: transform 0.3s ease; }
.dark-mode-switch-wrap:hover { transform: scale(1.15); }
.switch-track { width: 46px; height: 24px; background: #ccc; border-radius: 12px; position: relative; transition: background 0.3s; }
.switch-thumb { width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
body.dark-mode .switch-track { background: var(--theme-color); }
body.dark-mode .switch-thumb { transform: translateX(22px); }
body.dark-mode {
--bg-header: #1e1e1e;
--bg-main: #121212;
--bg-content: #1e1e1e;
--bg-alt: #2a2a2a;
--border-color: #333333;
--border-dashed: #444444;
--text-main: #e4e6eb;
--text-muted: #a0a0a0;
}
*, *:before, *:after { box-sizing: border-box; }
body { background-color: var(--bg-main); color: var(--text-main); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; }
a { color: var(--theme-color); text-decoration: none; }
/* ======== HEADER & TOMBOL ======== */
.header-wrapper {
position: sticky; top: 0; z-index: 950; background: var(--bg-header);
padding: 65px 0 0 0; /* Memberi ruang di atas untuk deretan ikon menu/search/darkmode */
box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-align: center; transition: all 0.3s ease-in-out; border-bottom: 2px solid var(--theme-color);
}
.header-wrapper.scroll-down { transform: translateY(-100%); }
.header-wrapper.scroll-up { transform: translateY(0); box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.header-wrapper.scroll-up #menuToggleBtn { position: static; transform: none !important; flex-shrink: 0; }
.header-wrapper.scroll-up .search-container { position: static; transform: none !important; flex-shrink: 0; }
.header-wrapper.scroll-up .dark-mode-switch-wrap { position: static; transform: none !important; flex-shrink: 0; }
#menuToggleBtn { position: absolute; top: 16px; left: 25px; background: transparent; border: none; font-size: 28px; cursor: pointer; color: var(--text-main); outline: none; transition: transform 0.3s ease; }
#menuToggleBtn:hover { transform: scale(1.1); }
/* ======== PENCARIAN ======== */
.search-container { position: absolute; top: 16px; right: 85px; display: flex; align-items: center; z-index: 10; }
.search-container form { display: flex; align-items: center; background: var(--bg-content); border-radius: 20px; overflow: hidden; border: 1px solid transparent; transition: all 0.3s ease; }
.search-container.active form { border: 1px solid var(--theme-color); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.search-input { width: 0; padding: 0; border: none; outline: none; background: transparent; color: var(--text-main); font-size: 14px; transition: width 0.3s ease, padding 0.3s ease; }
.search-container.active .search-input { width: 160px; padding: 6px 12px; }
.search-btn { background: transparent; border: none; font-size: 20px; cursor: pointer; padding: 5px 10px; color: var(--text-main); outline: none; transition: transform 0.2s; }
.search-btn:hover { transform: scale(1.1); }
/* ======== PENGATURAN GAMBAR HEADER (FULL WIDTH) ======== */
.header-image-wrapper { display: block; width: 100%; }
.header-image-wrapper img { width: 100%; height: auto; display: block; margin: 0; object-fit: cover; }
/* Teks Judul Normal (Jika tidak menggunakan gambar) */
.header-wrapper h1 { margin: 0; font-size: 26px; }
.header-wrapper h1 a { color: var(--text-main); }
.header-wrapper p { color: var(--text-muted); transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease; max-height: 50px; opacity: 1; overflow: hidden; margin-top: 5px; }
.header-text-wrapper { padding: 0 25px 25px 25px; }
.header-text-wrapper.has-image { display: none; } /* Sembunyikan teks saat tampilan normal jika ada gambar */
/* Mode Perilaku Header saat Scroll Up (Gambar Hilang, Running Text Muncul) */
.header-wrapper.scroll-up b\:section.header, .header-wrapper.scroll-up .header { flex: 1; min-width: 0; display: flex; align-items: center; margin: 0 5px; overflow: hidden; position: relative; white-space: nowrap; }
.header-wrapper.scroll-up .header-image-wrapper { display: none !important; }
.header-wrapper.scroll-up .header-text-wrapper { display: block !important; width: 100%; padding: 0; }
.header-wrapper.scroll-up h1 { font-size: 16px; margin: 0; display: inline-block; white-space: nowrap; padding-left: 100%; animation: runningTitle 12s linear infinite; }
.header-wrapper.scroll-up h1:hover { animation-play-state: paused; }
.header-wrapper.scroll-up p { display: none !important; }
@keyframes runningTitle {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* ======== OFF-CANVAS MENU & OVERLAY ======== */
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 998; opacity: 0; visibility: hidden; transition: 0.3s ease; }
.menu-overlay.active { opacity: 1; visibility: visible; }
.side-menu { position: fixed; top: 0; left: -320px; width: 280px; height: 100%; background: var(--bg-content); z-index: 999; box-shadow: 3px 0 10px rgba(0,0,0,0.2); transition: 0.3s ease; overflow-y: auto; display: flex; flex-direction: column; }
.side-menu.active { left: 0; }
.side-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid var(--border-color); }
.side-menu-title { font-size: 18px; font-weight: bold; margin: 0; color: var(--text-main); }
#closeMenuBtn { background: none; border: none; font-size: 28px; line-height: 1; color: var(--text-main); cursor: pointer; }
.side-menu-content { padding: 15px 25px; }
.side-menu-content ul { list-style: none; padding: 0; margin: 0; }
.side-menu-content li { border-bottom: 1px dashed var(--border-dashed); }
.side-menu-content li:last-child { border-bottom: none; }
.side-menu-content a { display: block; padding: 12px 0; color: var(--text-main); font-size: 16px; transition: color 0.2s; }
.side-menu-content a:hover { color: var(--theme-color); }
/* ======== LAYOUT HERO + SLIDESHOW CSS MURNI ======== */
.hero-container {
max-width: 1100px;
margin: 20px auto 0 auto;
padding: 0 15px;
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 20px;
align-items: start;
}
.slideshow-area { width: 100%; min-width: 0; }
.custom-slider {
--slide-count: 3;
--slide-time: 4s;
--slide-animation: cssAutoSlide3 12s;
position: relative;
width: 100%;
height: 380px;
overflow: hidden;
border-radius: 8px;
background: var(--bg-content);
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
isolation: isolate;
}
.custom-slider #SectionEditorSlideshow,
.custom-slider #HTML1 {
position: static !important;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.custom-slider #rawSlideSource {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.css-slide-radio {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.custom-slider #rawSlideSource .slide-data {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1;
animation: var(--slide-animation) infinite ease-in-out;
animation-delay: calc((var(--slide-index) - 1) * var(--slide-time));
transform-origin: center center;
will-change: opacity, transform;
}
.custom-slider #rawSlideSource .slide-data:nth-child(1) { --slide-index: 1; }
.custom-slider #rawSlideSource .slide-data:nth-child(2) { --slide-index: 2; }
.custom-slider #rawSlideSource .slide-data:nth-child(3) { --slide-index: 3; }
.custom-slider #rawSlideSource .slide-data:nth-child(4) { --slide-index: 4; }
.custom-slider #rawSlideSource .slide-data:nth-child(5) { --slide-index: 5; }
.custom-slider #rawSlideSource .slide-data:nth-child(6) { --slide-index: 6; }
.custom-slider #rawSlideSource .slide-data:nth-child(7) { --slide-index: 7; }
.custom-slider #rawSlideSource .slide-data:nth-child(8) { --slide-index: 8; }
.custom-slider #rawSlideSource .slide-data:nth-child(9) { --slide-index: 9; }
.custom-slider #rawSlideSource .slide-data:nth-child(10) { --slide-index: 10; }
.custom-slider:has(#rawSlideSource .slide-data:nth-child(2)):not(:has(#rawSlideSource .slide-data:nth-child(3))) {
--slide-count: 2;
--slide-animation: cssAutoSlide2 8s;
}
.custom-slider:has(#rawSlideSource .slide-data:nth-child(3)):not(:has(#rawSlideSource .slide-data:nth-child(4))) {
--slide-count: 3;
--slide-animation: cssAutoSlide3 12s;
}
.custom-slider:has(#rawSlideSource .slide-data:nth-child(4)):not(:has(#rawSlideSource .slide-data:nth-child(5))) {
--slide-count: 4;
--slide-animation: cssAutoSlide4 16s;
}
.custom-slider:has(#rawSlideSource .slide-data:nth-child(5)):not(:has(#rawSlideSource .slide-data:nth-child(6))) {
--slide-count: 5;
--slide-animation: cssAutoSlide5 20s;
}
.custom-slider:has(#rawSlideSource .slide-data:nth-child(6)):not(:has(#rawSlideSource .slide-data:nth-child(7))) {
--slide-count: 6;
--slide-animation: cssAutoSlide6 24s;
}
.custom-slider:has(#rawSlideSource .slide-data:nth-child(7)):not(:has(#rawSlideSource .slide-data:nth-child(8))) {
--slide-count: 7;
--slide-animation: cssAutoSlide7 28s;
}
.custom-slider:has(#rawSlideSource .slide-data:nth-child(8)):not(:has(#rawSlideSource .slide-data:nth-child(9))) {
--slide-count: 8;
--slide-animation: cssAutoSlide8 32s;
}
.custom-slider:has(#rawSlideSource .slide-data:nth-child(9)):not(:has(#rawSlideSource .slide-data:nth-child(10))) {
--slide-count: 9;
--slide-animation: cssAutoSlide9 36s;
}
.custom-slider:has(#rawSlideSource .slide-data:nth-child(10)) {
--slide-count: 10;
--slide-animation: cssAutoSlide10 40s;
}
.custom-slider:has(.css-slide-radio:checked) #rawSlideSource .slide-data {
animation: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(1);
}
.custom-slider:has(#cssSlide1:checked) #rawSlideSource .slide-data:nth-child(1),
.custom-slider:has(#cssSlide2:checked) #rawSlideSource .slide-data:nth-child(2),
.custom-slider:has(#cssSlide3:checked) #rawSlideSource .slide-data:nth-child(3),
.custom-slider:has(#cssSlide4:checked) #rawSlideSource .slide-data:nth-child(4),
.custom-slider:has(#cssSlide5:checked) #rawSlideSource .slide-data:nth-child(5),
.custom-slider:has(#cssSlide6:checked) #rawSlideSource .slide-data:nth-child(6),
.custom-slider:has(#cssSlide7:checked) #rawSlideSource .slide-data:nth-child(7),
.custom-slider:has(#cssSlide8:checked) #rawSlideSource .slide-data:nth-child(8),
.custom-slider:has(#cssSlide9:checked) #rawSlideSource .slide-data:nth-child(9),
.custom-slider:has(#cssSlide10:checked) #rawSlideSource .slide-data:nth-child(10) {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
}
@keyframes cssAutoSlide2 {
0%, 1.875% { opacity: 0; visibility: hidden; transform: scale(1.035); }
4.375%, 44.375% { opacity: 1; visibility: visible; transform: scale(1); }
48.125%, 100% { opacity: 0; visibility: hidden; transform: scale(1.015); }
}
@keyframes cssAutoSlide3 {
0%, 1.250% { opacity: 0; visibility: hidden; transform: scale(1.035); }
2.917%, 29.583% { opacity: 1; visibility: visible; transform: scale(1); }
32.083%, 100% { opacity: 0; visibility: hidden; transform: scale(1.015); }
}
@keyframes cssAutoSlide4 {
0%, 0.938% { opacity: 0; visibility: hidden; transform: scale(1.035); }
2.188%, 22.188% { opacity: 1; visibility: visible; transform: scale(1); }
24.062%, 100% { opacity: 0; visibility: hidden; transform: scale(1.015); }
}
@keyframes cssAutoSlide5 {
0%, 0.750% { opacity: 0; visibility: hidden; transform: scale(1.035); }
1.750%, 17.750% { opacity: 1; visibility: visible; transform: scale(1); }
19.250%, 100% { opacity: 0; visibility: hidden; transform: scale(1.015); }
}
@keyframes cssAutoSlide6 {
0%, 0.625% { opacity: 0; visibility: hidden; transform: scale(1.035); }
1.458%, 14.792% { opacity: 1; visibility: visible; transform: scale(1); }
16.042%, 100% { opacity: 0; visibility: hidden; transform: scale(1.015); }
}
@keyframes cssAutoSlide7 {
0%, 0.536% { opacity: 0; visibility: hidden; transform: scale(1.035); }
1.250%, 12.679% { opacity: 1; visibility: visible; transform: scale(1); }
13.750%, 100% { opacity: 0; visibility: hidden; transform: scale(1.015); }
}
@keyframes cssAutoSlide8 {
0%, 0.469% { opacity: 0; visibility: hidden; transform: scale(1.035); }
1.094%, 11.094% { opacity: 1; visibility: visible; transform: scale(1); }
12.031%, 100% { opacity: 0; visibility: hidden; transform: scale(1.015); }
}
@keyframes cssAutoSlide9 {
0%, 0.417% { opacity: 0; visibility: hidden; transform: scale(1.035); }
0.972%, 9.861% { opacity: 1; visibility: visible; transform: scale(1); }
10.694%, 100% { opacity: 0; visibility: hidden; transform: scale(1.015); }
}
@keyframes cssAutoSlide10 {
0%, 0.375% { opacity: 0; visibility: hidden; transform: scale(1.035); }
0.875%, 8.875% { opacity: 1; visibility: visible; transform: scale(1); }
9.625%, 100% { opacity: 0; visibility: hidden; transform: scale(1.015); }
}
.custom-slider #rawSlideSource .slide-data > a { position: relative; display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.custom-slider #rawSlideSource .slide-data img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-caption { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.28), transparent); color: #fff; padding: 75px 20px 22px; box-sizing: border-box; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.slide-caption h3 { margin: 0 0 5px 0; font-size: 20px; color: #fff; }
.slide-caption p { margin: 0; font-size: 14px; color: #e2e2e2; }
/* ===== NAVIGASI CSS ===== */
.css-slide-wrap { display: none; }
.custom-slider:has(#cssSlide1:checked) .css-slide-wrap-prev { display: none; }
.custom-slider:not(:has(.css-slide-radio:checked)) .css-slide-wrap-prev { display: none; }
.custom-slider:has(#cssSlide1:checked):not(:has(#rawSlideSource .slide-data:nth-child(3))) .css-slide-prev-default { display: none; }
.custom-slider:has(#cssSlide1:checked):not(:has(#rawSlideSource .slide-data:nth-child(3))) .css-slide-prev-2 { display: flex; }
.custom-slider:has(#cssSlide1:checked):has(#rawSlideSource .slide-data:nth-child(3)):not(:has(#rawSlideSource .slide-data:nth-child(4))) .css-slide-prev-3 { display: flex; }
.custom-slider:has(#cssSlide1:checked):has(#rawSlideSource .slide-data:nth-child(4)):not(:has(#rawSlideSource .slide-data:nth-child(5))) .css-slide-prev-4 { display: flex; }
.custom-slider:has(#cssSlide1:checked):has(#rawSlideSource .slide-data:nth-child(5)):not(:has(#rawSlideSource .slide-data:nth-child(6))) .css-slide-prev-5 { display: flex; }
.custom-slider:has(#cssSlide1:checked):has(#rawSlideSource .slide-data:nth-child(6)):not(:has(#rawSlideSource .slide-data:nth-child(7))) .css-slide-prev-6 { display: flex; }
.custom-slider:has(#cssSlide1:checked):has(#rawSlideSource .slide-data:nth-child(7)):not(:has(#rawSlideSource .slide-data:nth-child(8))) .css-slide-prev-7 { display: flex; }
.custom-slider:has(#cssSlide1:checked):has(#rawSlideSource .slide-data:nth-child(8)):not(:has(#rawSlideSource .slide-data:nth-child(9))) .css-slide-prev-8 { display: flex; }
.custom-slider:has(#cssSlide1:checked):has(#rawSlideSource .slide-data:nth-child(9)):not(:has(#rawSlideSource .slide-data:nth-child(10))) .css-slide-prev-9 { display: flex; }
.custom-slider:has(#cssSlide1:checked):has(#rawSlideSource .slide-data:nth-child(10)) .css-slide-prev-10 { display: flex; }
.css-slide-next-wrap { display: none; }
.custom-slider:has(#cssSlide2:checked):not(:has(#rawSlideSource .slide-data:nth-child(3))) .css-slide-next-2 { display: flex; }
.custom-slider:has(#cssSlide3:checked):has(#rawSlideSource .slide-data:nth-child(3)):not(:has(#rawSlideSource .slide-data:nth-child(4))) .css-slide-next-3 { display: flex; }
.custom-slider:has(#cssSlide4:checked):has(#rawSlideSource .slide-data:nth-child(4)):not(:has(#rawSlideSource .slide-data:nth-child(5))) .css-slide-next-4 { display: flex; }
.custom-slider:has(#cssSlide5:checked):has(#rawSlideSource .slide-data:nth-child(5)):not(:has(#rawSlideSource .slide-data:nth-child(6))) .css-slide-next-5 { display: flex; }
.custom-slider:has(#cssSlide6:checked):has(#rawSlideSource .slide-data:nth-child(6)):not(:has(#rawSlideSource .slide-data:nth-child(7))) .css-slide-next-6 { display: flex; }
.custom-slider:has(#cssSlide7:checked):has(#rawSlideSource .slide-data:nth-child(7)):not(:has(#rawSlideSource .slide-data:nth-child(8))) .css-slide-next-7 { display: flex; }
.custom-slider:has(#cssSlide8:checked):has(#rawSlideSource .slide-data:nth-child(8)):not(:has(#rawSlideSource .slide-data:nth-child(9))) .css-slide-next-8 { display: flex; }
.custom-slider:has(#cssSlide9:checked):has(#rawSlideSource .slide-data:nth-child(9)):not(:has(#rawSlideSource .slide-data:nth-child(10))) .css-slide-next-9 { display: flex; }
.custom-slider:has(#cssSlide10:checked):has(#rawSlideSource .slide-data:nth-child(10)) .css-slide-next-10 { display: flex; }
.custom-slider:not(:has(.css-slide-radio:checked)):not(:has(#rawSlideSource .slide-data:nth-child(3))) .css-slide-prev-default-wrap-2 { display: flex; }
.custom-slider:not(:has(.css-slide-radio:checked)):has(#rawSlideSource .slide-data:nth-child(3)):not(:has(#rawSlideSource .slide-data:nth-child(4))) .css-slide-prev-default-wrap-3 { display: flex; }
.custom-slider:not(:has(.css-slide-radio:checked)):has(#rawSlideSource .slide-data:nth-child(4)):not(:has(#rawSlideSource .slide-data:nth-child(5))) .css-slide-prev-default-wrap-4 { display: flex; }
.custom-slider:not(:has(.css-slide-radio:checked)):has(#rawSlideSource .slide-data:nth-child(5)):not(:has(#rawSlideSource .slide-data:nth-child(6))) .css-slide-prev-default-wrap-5 { display: flex; }
.custom-slider:not(:has(.css-slide-radio:checked)):has(#rawSlideSource .slide-data:nth-child(6)):not(:has(#rawSlideSource .slide-data:nth-child(7))) .css-slide-prev-default-wrap-6 { display: flex; }
.custom-slider:not(:has(.css-slide-radio:checked)):has(#rawSlideSource .slide-data:nth-child(7)):not(:has(#rawSlideSource .slide-data:nth-child(8))) .css-slide-prev-default-wrap-7 { display: flex; }
.custom-slider:not(:has(.css-slide-radio:checked)):has(#rawSlideSource .slide-data:nth-child(8)):not(:has(#rawSlideSource .slide-data:nth-child(9))) .css-slide-prev-default-wrap-8 { display: flex; }
.custom-slider:not(:has(.css-slide-radio:checked)):has(#rawSlideSource .slide-data:nth-child(9)):not(:has(#rawSlideSource .slide-data:nth-child(10))) .css-slide-prev-default-wrap-9 { display: flex; }
.custom-slider:not(:has(.css-slide-radio:checked)):has(#rawSlideSource .slide-data:nth-child(10)) .css-slide-prev-default-wrap-10 { display: flex; }
.custom-slider:has(#cssSlide2:checked):not(:has(#rawSlideSource .slide-data:nth-child(3))) .css-slide-state-2 .css-slide-next:not(.css-slide-next-wrap),
.custom-slider:has(#cssSlide3:checked):has(#rawSlideSource .slide-data:nth-child(3)):not(:has(#rawSlideSource .slide-data:nth-child(4))) .css-slide-state-3 .css-slide-next:not(.css-slide-next-wrap),
.custom-slider:has(#cssSlide4:checked):has(#rawSlideSource .slide-data:nth-child(4)):not(:has(#rawSlideSource .slide-data:nth-child(5))) .css-slide-state-4 .css-slide-next:not(.css-slide-next-wrap),
.custom-slider:has(#cssSlide5:checked):has(#rawSlideSource .slide-data:nth-child(5)):not(:has(#rawSlideSource .slide-data:nth-child(6))) .css-slide-state-5 .css-slide-next:not(.css-slide-next-wrap),
.custom-slider:has(#cssSlide6:checked):has(#rawSlideSource .slide-data:nth-child(6)):not(:has(#rawSlideSource .slide-data:nth-child(7))) .css-slide-state-6 .css-slide-next:not(.css-slide-next-wrap),
.custom-slider:has(#cssSlide7:checked):has(#rawSlideSource .slide-data:nth-child(7)):not(:has(#rawSlideSource .slide-data:nth-child(8))) .css-slide-state-7 .css-slide-next:not(.css-slide-next-wrap),
.custom-slider:has(#cssSlide8:checked):has(#rawSlideSource .slide-data:nth-child(8)):not(:has(#rawSlideSource .slide-data:nth-child(9))) .css-slide-state-8 .css-slide-next:not(.css-slide-next-wrap),
.custom-slider:has(#cssSlide9:checked):has(#rawSlideSource .slide-data:nth-child(9)):not(:has(#rawSlideSource .slide-data:nth-child(10))) .css-slide-state-9 .css-slide-next:not(.css-slide-next-wrap),
.custom-slider:has(#cssSlide10:checked):has(#rawSlideSource .slide-data:nth-child(10)) .css-slide-state-10 .css-slide-next:not(.css-slide-next-wrap) { display: none; }
.css-slide-nav { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.css-slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.42); color: #fff; font-size: 25px; line-height: 1; cursor: pointer; pointer-events: auto; user-select: none; opacity: .82; transition: .2s ease; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.css-slide-arrow:hover { opacity: 1; background: rgba(0,0,0,.68); transform: translateY(-50%) scale(1.06); }
.css-slide-prev { left: 14px; }
.css-slide-next { right: 14px; }
.css-slide-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 7px; align-items: center; justify-content: center; padding: 7px 10px; border-radius: 30px; background: rgba(0,0,0,.28); backdrop-filter: blur(4px); pointer-events: auto; }
.css-slide-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75); cursor: pointer; transition: .2s ease; box-sizing: border-box; }
.css-slide-dot:hover { transform: scale(1.25); background: #fff; }
.custom-slider:not(:has(.css-slide-radio:checked)) .css-slide-dot:nth-child(1),
.custom-slider:has(#cssSlide1:checked) .css-slide-dot:nth-child(1),
.custom-slider:has(#cssSlide2:checked) .css-slide-dot:nth-child(2),
.custom-slider:has(#cssSlide3:checked) .css-slide-dot:nth-child(3),
.custom-slider:has(#cssSlide4:checked) .css-slide-dot:nth-child(4),
.custom-slider:has(#cssSlide5:checked) .css-slide-dot:nth-child(5),
.custom-slider:has(#cssSlide6:checked) .css-slide-dot:nth-child(6),
.custom-slider:has(#cssSlide7:checked) .css-slide-dot:nth-child(7),
.custom-slider:has(#cssSlide8:checked) .css-slide-dot:nth-child(8),
.custom-slider:has(#cssSlide9:checked) .css-slide-dot:nth-child(9),
.custom-slider:has(#cssSlide10:checked) .css-slide-dot:nth-child(10) {
width: 24px;
border-radius: 8px;
background: #fff;
}
.css-slide-state { display: none; }
.custom-slider:not(:has(.css-slide-radio:checked)) .css-slide-state-default { display: block; }
.custom-slider:not(:has(.css-slide-radio:checked)):has(#rawSlideSource .slide-data:nth-child(2)) .css-slide-prev-default { display: none; }
.custom-slider:has(#cssSlide1:checked) .css-slide-state-1,
.custom-slider:has(#cssSlide2:checked) .css-slide-state-2,
.custom-slider:has(#cssSlide3:checked) .css-slide-state-3,
.custom-slider:has(#cssSlide4:checked) .css-slide-state-4,
.custom-slider:has(#cssSlide5:checked) .css-slide-state-5,
.custom-slider:has(#cssSlide6:checked) .css-slide-state-6,
.custom-slider:has(#cssSlide7:checked) .css-slide-state-7,
.custom-slider:has(#cssSlide8:checked) .css-slide-state-8,
.custom-slider:has(#cssSlide9:checked) .css-slide-state-9,
.custom-slider:has(#cssSlide10:checked) .css-slide-state-10 { display: block; }
.custom-slider:not(:has(#rawSlideSource .slide-data:nth-child(2))) .slide-dot-2,
.custom-slider:not(:has(#rawSlideSource .slide-data:nth-child(3))) .slide-dot-3,
.custom-slider:not(:has(#rawSlideSource .slide-data:nth-child(4))) .slide-dot-4,
.custom-slider:not(:has(#rawSlideSource .slide-data:nth-child(5))) .slide-dot-5,
.custom-slider:not(:has(#rawSlideSource .slide-data:nth-child(6))) .slide-dot-6,
.custom-slider:not(:has(#rawSlideSource .slide-data:nth-child(7))) .slide-dot-7,
.custom-slider:not(:has(#rawSlideSource .slide-data:nth-child(8))) .slide-dot-8,
.custom-slider:not(:has(#rawSlideSource .slide-data:nth-child(9))) .slide-dot-9,
.custom-slider:not(:has(#rawSlideSource .slide-data:nth-child(10))) .slide-dot-10 { display: none; }
@media (prefers-reduced-motion: reduce) {
.custom-slider #rawSlideSource .slide-data { animation: none; }
.custom-slider #rawSlideSource .slide-data:first-child { opacity: 1; visibility: visible; pointer-events: auto; }
}
/* Kotak Widget Samping Slideshow */
.hero-sidebar { width: 100%; }
.hero-sidebar .widget { background: var(--bg-content); padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin: 0; height: 380px; overflow-y: auto; }
.hero-sidebar .widget-title { font-size: 16px; margin: 0 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid var(--theme-color); color: var(--text-main); text-transform: uppercase; letter-spacing: 0.5px; }
/* ======== GAYA PRESISI OTOMATIS WIDGET FAVORIT ======== */
.auto-fav-item { display: flex; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-dashed); align-items: flex-start; }
.auto-fav-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.auto-fav-thumb { width: 75px; height: 60px; min-width: 75px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--bg-alt); }
.auto-fav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auto-fav-content { flex: 1; min-width: 0; }
.auto-fav-title { font-size: 13px; line-height: 1.35; font-weight: 600; margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auto-fav-title a { color: var(--text-main); }
.auto-fav-title a:hover { color: var(--theme-color); }
.auto-fav-snippet { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hidden-source-widget { display: none !important; }
/* Container Utama */
.container { max-width: 1100px; margin: 25px auto; display: flex; flex-wrap: wrap; gap: 25px; padding: 0 15px; }
.main-wrapper, .widget, footer { background: var(--bg-content); padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: background-color 0.3s ease; }
.main-wrapper { flex: 1 1 65%; }
.sidebar-wrapper { flex: 1 1 30%; }
.sticky-sidebar { position: -webkit-sticky; position: sticky; top: 25px; }
.search-result-title { font-size: 16px !important; font-style: italic !important; color: #1e88e5 !important; border-bottom: 1px dashed #1e88e5 !important; margin-bottom: 20px !important; }
body.dark-mode .search-result-title { color: #64b5f6 !important; border-color: #64b5f6 !important; }
.no-search-result-box { background: var(--bg-alt); padding: 25px; border-radius: 8px; text-align: center; color: var(--text-muted); font-size: 15px; border: 1px dashed var(--border-dashed); margin: 20px 0; }
.latest-posts-heading { font-size: 22px; margin: 0 0 25px 0; padding-bottom: 8px; color: var(--text-main); border-bottom: 2px solid var(--theme-color); display: inline-block; text-transform: uppercase; letter-spacing: 0.5px; }
.post { margin-bottom: 30px; border-bottom: 1px solid var(--border-color); padding-bottom: 30px; }
.post:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
/* Beranda List Style */
.index-post-wrapper { display: grid; gap: 10px 20px; align-items: start; }
.index-post-wrapper.with-image { grid-template-columns: 220px 1fr; }
.index-post-thumbnail { grid-column: 1 / 2; grid-row: 1 / 4; border-radius: 8px; overflow: hidden; }
.index-post-thumbnail img { width: 100%; height: 150px; object-fit: cover; display: block; transition: transform 0.3s ease; }
.index-post-thumbnail:hover img { transform: scale(1.05); }
.with-image .index-post-title { grid-column: 2 / 3; grid-row: 1 / 2; }
.with-image .index-post-snippet { grid-column: 2 / 3; grid-row: 2 / 3; }
.with-image .index-post-action { grid-column: 2 / 3; grid-row: 3 / 4; }
.index-post-wrapper.no-image { grid-template-columns: 1fr; }
.index-post-title { font-size: 20px; margin: 0; line-height: 1.4; }
.index-post-title a { color: var(--text-main); }
.index-post-title a:hover { color: var(--theme-color); }
.index-post-snippet { color: var(--text-muted); font-size: 14px; margin: 0; line-height: 1.6; }
.index-post-action { margin-top: 5px; }
/* ======== FONT RESIZER ======== */
.post-meta-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; border-bottom: 1px dashed var(--border-dashed); padding-bottom: 15px; }
.single-post-meta { margin-bottom: 0 !important; }
.font-resizer-wrap { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.btn-resize { background: var(--bg-alt); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 4px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; font-size: 14px; transition: all 0.2s; outline: none; }
.btn-resize:hover, .btn-resize:active { background: var(--theme-color); color: #fff; border-color: var(--theme-color); transform: scale(1.05); }
/* Single Post */
.single-post-title { font-size: 26px; margin: 0 0 15px; color: var(--text-main); line-height: 1.3;}
.breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 15px; }
.read-more-btn { display: inline-block; background: var(--theme-color); color: #fff; padding: 7px 15px; border-radius: 4px; font-size: 13px; font-weight: bold; }
.ads-slot { background: var(--bg-alt); text-align: center; padding: 20px; margin: 20px 0; border: 1px dashed var(--border-dashed); font-size: 13px; color: var(--text-muted); border-radius: 4px; }
#backToTop { position: fixed; bottom: 20px; right: 20px; background: #333; color: #fff; padding: 12px 18px; border-radius: 50px; display: none; cursor: pointer; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 900;}
/* ======== NUMBERED PAGINATION ======== */
.blog-pager { margin-top: 35px; display: flex; justify-content: center; align-items: center; gap: 8px; border-top: 1px solid var(--border-color); padding-top: 25px; flex-wrap: wrap; }
.btn-pager, .page-num { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-alt); color: var(--text-main) !important; padding: 8px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: 0.2s ease; border: 1px solid var(--border-color); cursor: pointer; }
.btn-pager:hover, .page-num:hover { background: var(--theme-color); color: #fff !important; border-color: var(--theme-color); transform: translateY(-2px); }
.page-num.active { background: var(--theme-color); color: #fff !important; border-color: var(--theme-color); cursor: default; transform: none; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.page-dots { padding: 8px 4px; color: var(--text-muted); font-weight: bold; }
#blog-pager-numbered { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* ======== RESPONSIVE SLIDESHOW & LAYOUT ======== */
@media (max-width: 800px) {
.hero-container { grid-template-columns: 1fr; }
.custom-slider { height: 300px; }
.hero-sidebar .widget { height: auto; max-height: 380px; }
.main-wrapper, .sidebar-wrapper { flex: 1 1 100%; }
}
@media (max-width: 480px) {
.custom-slider { height: 240px; border-radius: 6px; }
.slide-caption { padding: 45px 14px 14px; }
.slide-caption h3 { font-size: 16px; }
/* Pengaturan Mobile Header Full Width */
.header-wrapper { padding: 60px 0 0 0; }
.header-wrapper.scroll-up { padding: 8px 10px !important; }
.header-wrapper h1 { font-size: 20px; margin: 0; }
.header-text-wrapper { padding: 0 15px 20px 15px; }
#menuToggleBtn { top: 12px; left: 15px; }
.dark-mode-switch-wrap { top: 16px; right: 15px; }
.search-container { top: 12px; right: 75px; }
.search-container.active .search-input { width: 120px; }
.index-post-wrapper.with-image { grid-template-columns: 1fr; }
.with-image .index-post-title, .with-image .index-post-snippet, .with-image .index-post-action, .index-post-thumbnail { grid-column: 1 / 2; grid-row: auto; }
.with-image .index-post-title { margin-top: 10px; }
.index-post-thumbnail img { height: auto; aspect-ratio: 16 / 9; }
.main-wrapper, .sidebar-wrapper, .widget, footer { padding: 15px !important; }
.single-post-title { font-size: 22px !important; }
.index-post-title { font-size: 17px !important; }
/* Mobile Pagination */
.blog-pager { gap: 6px; }
.btn-pager, .page-num { padding: 6px 12px; font-size: 12px; }
}
/* ======== RESPONSIVE BLOG POST & CONTENT ======== */
.post-body img, .post-body iframe, .post-body video, .post-body object, .post-body embed { max-width: 100% !important; height: auto !important; border-radius: 6px; }
.post-body { overflow-x: auto; word-break: break-word; transition: font-size 0.3s ease; }
/* ======== STATISTIK PENGUNJUNG POSTINGAN ======== */
.post-stats-footer { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); background: var(--bg-alt); padding: 6px 12px; border-radius: 6px; margin-top: 12px; border: 1px solid var(--border-color); }
.post-stats-footer.single-bottom { display: flex; width: 100%; box-sizing: border-box; margin-top: 20px; padding: 12px 16px; background: var(--bg-alt); font-size: 14px; justify-content: flex-start; align-items: center; gap: 8px; }
.post-stats-footer .count-val { color: var(--theme-color); font-weight: bold; }
.index-post-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.single-post-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
/* ======== RELATED POSTS ======== */
.related-posts-widget { margin-top: 40px; padding-top: 20px; border-top: 1px dashed var(--border-dashed); }
.related-posts-widget h3 { font-size: 18px; margin: 0 0 15px 0; color: var(--text-main); text-transform: uppercase; border-left: 4px solid var(--theme-color); padding-left: 10px; }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.related-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: transform 0.2s ease; min-width: 0; }
.related-item:hover { transform: translateY(-3px); }
.related-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--bg-alt); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.related-title { font-size: 11.5px; font-weight: 600; color: var(--text-main); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; transition: color 0.2s; }
.related-item:hover .related-title { color: var(--theme-color); }
/* ======== SOCIAL SHARE BUTTONS ======== */
.post-share-wrapper { margin-top: 25px; padding: 15px 0; border-top: 1px dashed var(--border-dashed); border-bottom: 1px dashed var(--border-dashed); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-label { font-weight: 600; font-size: 14px; color: var(--text-main); margin-right: 5px; }
.share-btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #ffffff !important; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s, transform 0.2s; }
.share-btn:hover { opacity: 0.9; transform: translateY(-2px); }
.share-wa { background-color: #25D366; }
.share-fb { background-color: #1877F2; }
.share-x { background-color: #000000; }
body.dark-mode .share-x { background-color: #333333; border: 1px solid #555; }
.share-tg { background-color: #229ED9; }
.share-pin { background-color: #E60023; }
.share-copy { background-color: var(--theme-color); }
/* ======== GAYA KOMENTAR BLOGGER & DARK MODE SUPPORT ======== */
.comments { margin-top: 40px; padding-top: 25px; border-top: 1px dashed var(--border-dashed); clear: both; }
.comments .title { font-size: 18px; font-weight: bold; margin-bottom: 25px; color: var(--text-main); text-transform: uppercase; border-left: 4px solid var(--theme-color); padding-left: 12px; }
#comments-block, #comment-holder { margin-bottom: 20px; }
.comment-thread { list-style: none; padding: 0; margin: 0; }
.comment-thread ol { list-style: none; padding: 0 0 0 40px; margin: 15px 0 0 0; }
.comment { display: flex; gap: 15px; margin-bottom: 20px; align-items: flex-start; }
.avatar-image-container { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--bg-alt); }
.avatar-image-container img { width: 100%; height: 100%; object-fit: cover; }
.comment-block { flex: 1; background: var(--bg-alt); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); min-width: 0; transition: background-color 0.3s, color 0.3s; }
.comment-author { font-weight: bold; font-size: 14px; color: var(--text-main); margin-bottom: 6px; }
.comment-author a { color: var(--text-main); }
.comment-author a:hover { color: var(--theme-color); }
.comment-body { font-size: 14px; color: var(--text-main); line-height: 1.6; word-wrap: break-word; }
.comment-body p { margin: 0 0 10px 0; }
.comment-footer { margin-top: 10px; font-size: 12px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
.comment-timestamp a { color: var(--text-muted); }
.comment-form { margin-top: 30px; }
.comment-form h4 { font-size: 18px; margin-bottom: 15px; color: var(--text-main); font-weight: bold; }
/* Penyesuaian Dark Mode untuk Iframe Komentar Bawaan Blogger */
body.dark-mode .blogger-comment-from-post,
body.dark-mode iframe#comment-editor {
filter: invert(90%) hue-rotate(180deg) contrast(90%);
background: #1e1e1e !important;
border-radius: 6px;
}
/* HANYA NONAKTIFKAN TAUTAN URL EKsternal DALAM ISI KOMENTAR SAJA (TIDAK MERUSAK LINK NAMA/TANGGAL) */
.comment-body a[href*="http"],
.comment-body a[href*="www"],
.comment-body a[href*=".com"],
.comment-body a[href*=".id"],
.comment-body a[href*=".co"],
.comment-body a[href*=".net"],
.comment-body a[href*=".org"] {
pointer-events: none !important;
cursor: default !important;
color: var(--text-muted) !important;
text-decoration: line-through !important;
}
.spam-warning-box { background: #ffebee; color: #c62828; padding: 12px 15px; border-radius: 6px; font-size: 13.5px; margin-bottom: 20px; border: 1px solid #ffcdd2; line-height: 1.5; font-weight: 500;}
body.dark-mode .spam-warning-box { background: #3e1b1e; color: #ff8a80; border-color: #5c2428; }
/* ======== BACA JUGA TENGAH ARTIKEL ======== */
.baca-juga-box {
margin: 25px 0;
padding: 15px 20px;
background: var(--bg-alt);
border-left: 4px solid var(--theme-color);
border-radius: 6px;
/* Menggunakan font serif (berbeda dengan font post yang sans-serif) */
font-family: 'Georgia', 'Times New Roman', serif;
/* Ukuran font sedikit lebih kecil dari font standar */
font-size: 0.8em;
line-height: 1.5;
}
.baca-juga-box strong {
display: block;
margin-bottom: 10px;
font-size: 1.1em;
color: var(--theme-color);
font-family: 'Segoe UI', sans-serif; /* Judul tetap rapi mengikuti tema */
text-transform: uppercase;
}
.baca-juga-box ul {
margin: 0;
padding-left: 20px;
}
.baca-juga-box li {
margin-bottom: 8px;
}
.baca-juga-box li:last-child {
margin-bottom: 0;
}
.baca-juga-box a {
color: #007bff;
text-decoration: none;
transition: color 0.2s;
font-weight: 500;
}
.baca-juga-box a:hover {
color: #0056b3;
text-decoration: underline;
}
@media (max-width: 600px) {
.comment { gap: 10px; }
.avatar-image-container { width: 34px; height: 34px; }
.comment-block { padding: 12px; }
.comment-thread ol { padding-left: 15px; }
}
/* ======== WIDGET PROFIL & AUTHOR PROFILE RATA TENGAH ======== */
.Profile,
#Profile1,
.widget.Profile,
.author-profile {
text-align: center !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.Profile img,
.author-profile img.author-image,
.profile-img {
margin: 0 auto 15px auto !important;
display: block;
border-radius: 50%; /* Membuat foto profil menjadi bulat, hapus baris ini jika ingin tetap kotak */
max-width: 100px; /* Menyesuaikan ukuran maksimal foto */
height: auto;
}
.Profile .profile-datablock,
.Profile .profile-data,
.Profile .profile-textblock,
.author-profile .author-about,
.author-profile .author-name,
.author-profile .author-desc {
text-align: center !important;
margin: 0 auto;
display: block;
width: 100%;
}
/* Memastikan tombol "Kunjungi Profil" juga rata tengah */
.Profile .profile-link {
display: inline-block;
margin-top: 15px;
text-align: center;
}
></b:skin>
</head>
<body>
<script>
//<![CDATA[
if (localStorage.getItem('themeMode') === 'dark') {
document.body.classList.add('dark-mode');
}
//]]>
</script>
<!-- Overlay Latar Belakang Gelap untuk Menu -->
<div class='menu-overlay' id='menuOverlay'/>
<!-- MENU NAVIGASI SAMPING -->
<div class='side-menu' id='sideMenu'>
<div class='side-menu-header'>
<h3 class='side-menu-title'>Menu Utama</h3>
<button aria-label='Tutup Menu' id='closeMenuBtn'>✖</button>
</div>
<div class='side-menu-content' id='mobileMenuContainer'/>
</div>
<header class='header-wrapper' id='headerWrapper'>
<button aria-label='Buka Menu' id='menuToggleBtn'>☰</button>
<!-- Kotak Pencarian -->
<div class='search-container' id='searchContainer'>
<form action='/search' method='get'>
<input class='search-input' id='searchInput' name='q' placeholder='Cari...' type='text'/>
<button aria-label='Pencarian' class='search-btn' id='searchBtn' type='button'>🔍</button>
</form>
</div>
<div class='dark-mode-switch-wrap' id='darkModeToggle' title='Ubah Mode Terang/Gelap'>
<div class='switch-track'><div class='switch-thumb'>🌙</div></div>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='1STFRAME THEME (Header)' type='Header' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEhleHl07NQYh63K8sSeXP3ArPhM-n3NS-e9JKgUE2vVK-T21w_53txPK7k6_gbqQCQjYxttNLc5HCLy2t9bdxsACBEMHdZCMnuiMMZCyE1e88GAYC_Xw-8brdIqN76K-SC8l0bBVYzRWbLpUNlV3TbW3XZ_XEGrVUy-67c4Bure6lVX8wrZFk6QomiZZ26D=s1560</b:widget-setting>
<b:widget-setting name='displayHeight'>547</b:widget-setting>
<b:widget-setting name='sectionWidth'>600</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>1560</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:sourceUrl'>
<a class='header-image-wrapper' expr:href='data:blog.homepageUrl'>
<img expr:alt='data:title' expr:src='data:sourceUrl'/>
</a>
</b:if>
<div expr:class='"header-text-wrapper " + (data:sourceUrl ? "has-image" : "no-image")'>
<h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
<p><data:description/></p>
</div>
</b:includable>
<b:includable id='behindImageStyle'>
<b:if cond='data:sourceUrl'>
<b:include cond='data:this.image' data='{ image: data:this.image, selector: ".header-widget" }' name='responsiveImageStyle'/>
<style type='text/css'>
.header-widget {
background-position: <data:blog.locale.languageAlignment/>;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</b:if>
</b:includable>
<b:includable id='description'>
<p>
<data:this.description/>
</p>
</b:includable>
<b:includable id='image'>
<a class='header-image-wrapper' expr:href='data:blog.homepageUrl'>
<b:include data='{ image: data:image, altText: data:blog.title.escaped, originalWidth: data:width, originalHeight: data:height }' name='responsiveImage'/>
</a>
</b:includable>
<b:includable id='title'>
<h1>
<b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
<data:title/>
</b:tag>
</h1>
</b:includable>
</b:widget>
</b:section>
</header>
<!-- KOTAK HERO -->
<b:if cond='data:view.isHomepage'>
<div class='hero-container'>
<div class='slideshow-area'>
<div class='custom-slider' id='autoSliderContainer'>
<input class='css-slide-radio' id='cssSlide1' name='cssSlide' type='radio'/>
<input class='css-slide-radio' id='cssSlide2' name='cssSlide' type='radio'/>
<input class='css-slide-radio' id='cssSlide3' name='cssSlide' type='radio'/>
<input class='css-slide-radio' id='cssSlide4' name='cssSlide' type='radio'/>
<input class='css-slide-radio' id='cssSlide5' name='cssSlide' type='radio'/>
<input class='css-slide-radio' id='cssSlide6' name='cssSlide' type='radio'/>
<input class='css-slide-radio' id='cssSlide7' name='cssSlide' type='radio'/>
<input class='css-slide-radio' id='cssSlide8' name='cssSlide' type='radio'/>
<input class='css-slide-radio' id='cssSlide9' name='cssSlide' type='radio'/>
<input class='css-slide-radio' id='cssSlide10' name='cssSlide' type='radio'/>
<b:section id='SectionEditorSlideshow' preferred='yes' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='KOTAK EDIT SLIDESHOW (Isi 2-10 Kode Slide Di Sini)' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<div class="slide-data">
<a href="https://example.com/halaman-tujuan-1">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1100&q=80" alt="Pemandangan Pantai Indah"/>
<div class="slide-caption">
<h3>Jelajahi Keindahan Wisata Bahari</h3>
<p>Temukan destinasi pantai terbaik untuk liburan akhir pekan Anda bersama keluarga.</p>
</div>
</a>
</div>
<div class="slide-data">
<a href="https://example.com/halaman-tujuan-2">
<img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1100&q=80" alt="Pegunungan Megah"/>
<div class="slide-caption">
<h3>Petualangan Seru di Pegunungan</h3>
<p>Nikmati udara sejuk dan jalur pendakian menantang untuk para pecinta alam.</p>
</div>
</a>
</div>
<div class="slide-data">
<a href="https://example.com/halaman-tujuan-3">
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1100&q=80" alt="Hutan Hijau Asri"/>
<div class="slide-caption">
<h3>Menjaga Kelestarian Hutan Tropis</h3>
<p>Mari dukung gerakan hijau demi masa depan bumi yang lebih bersih dan sehat.</p>
</div>
</a>
</div>]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div id='rawSlideSource'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
<div aria-label='Navigasi slideshow' class='css-slide-nav'>
<div class='css-slide-state css-slide-state-default'>
<label class='css-slide-arrow css-slide-prev css-slide-prev-default' for='cssSlide10' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-default-wrap-2' for='cssSlide2' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-default-wrap-3' for='cssSlide3' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-default-wrap-4' for='cssSlide4' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-default-wrap-5' for='cssSlide5' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-default-wrap-6' for='cssSlide6' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-default-wrap-7' for='cssSlide7' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-default-wrap-8' for='cssSlide8' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-default-wrap-9' for='cssSlide9' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-default-wrap-10' for='cssSlide10' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide2' title='Slide berikutnya'>❯</label>
</div>
<div class='css-slide-state css-slide-state-1'>
<label class='css-slide-arrow css-slide-prev css-slide-prev-default' for='cssSlide10' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-2' for='cssSlide2' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-3' for='cssSlide3' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-4' for='cssSlide4' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-5' for='cssSlide5' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-6' for='cssSlide6' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-7' for='cssSlide7' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-8' for='cssSlide8' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-9' for='cssSlide9' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-prev css-slide-wrap css-slide-prev-10' for='cssSlide10' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide2' title='Slide berikutnya'>❯</label>
</div>
<div class='css-slide-state css-slide-state-2'>
<label class='css-slide-arrow css-slide-prev' for='cssSlide1' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide3' title='Slide berikutnya'>❯</label>
<label class='css-slide-arrow css-slide-next css-slide-next-wrap css-slide-next-2' for='cssSlide1' title='Kembali ke slide 1'>❯</label>
</div>
<div class='css-slide-state css-slide-state-3'>
<label class='css-slide-arrow css-slide-prev' for='cssSlide2' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide4' title='Slide berikutnya'>❯</label>
<label class='css-slide-arrow css-slide-next css-slide-next-wrap css-slide-next-3' for='cssSlide1' title='Kembali ke slide 1'>❯</label>
</div>
<div class='css-slide-state css-slide-state-4'>
<label class='css-slide-arrow css-slide-prev' for='cssSlide3' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide5' title='Slide berikutnya'>❯</label>
<label class='css-slide-arrow css-slide-next css-slide-next-wrap css-slide-next-4' for='cssSlide1' title='Kembali ke slide 1'>❯</label>
</div>
<div class='css-slide-state css-slide-state-5'>
<label class='css-slide-arrow css-slide-prev' for='cssSlide4' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide6' title='Slide berikutnya'>❯</label>
<label class='css-slide-arrow css-slide-next css-slide-next-wrap css-slide-next-5' for='cssSlide1' title='Kembali ke slide 1'>❯</label>
</div>
<div class='css-slide-state css-slide-state-6'>
<label class='css-slide-arrow css-slide-prev' for='cssSlide5' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide7' title='Slide berikutnya'>❯</label>
<label class='css-slide-arrow css-slide-next css-slide-next-wrap css-slide-next-6' for='cssSlide1' title='Kembali ke slide 1'>❯</label>
</div>
<div class='css-slide-state css-slide-state-7'>
<label class='css-slide-arrow css-slide-prev' for='cssSlide6' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide8' title='Slide berikutnya'>❯</label>
<label class='css-slide-arrow css-slide-next css-slide-next-wrap css-slide-next-7' for='cssSlide1' title='Kembali ke slide 1'>❯</label>
</div>
<div class='css-slide-state css-slide-state-8'>
<label class='css-slide-arrow css-slide-prev' for='cssSlide7' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide9' title='Slide berikutnya'>❯</label>
<label class='css-slide-arrow css-slide-next css-slide-next-wrap css-slide-next-8' for='cssSlide1' title='Kembali ke slide 1'>❯</label>
</div>
<div class='css-slide-state css-slide-state-9'>
<label class='css-slide-arrow css-slide-prev' for='cssSlide8' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide10' title='Slide berikutnya'>❯</label>
<label class='css-slide-arrow css-slide-next css-slide-next-wrap css-slide-next-9' for='cssSlide1' title='Kembali ke slide 1'>❯</label>
</div>
<div class='css-slide-state css-slide-state-10'>
<label class='css-slide-arrow css-slide-prev' for='cssSlide9' title='Slide sebelumnya'>❮</label>
<label class='css-slide-arrow css-slide-next' for='cssSlide1' title='Slide berikutnya'>❯</label>
<label class='css-slide-arrow css-slide-next css-slide-next-wrap css-slide-next-10' for='cssSlide1' title='Kembali ke slide 1'>❯</label>
</div>
<div aria-label='Pilih slide' class='css-slide-dots'>
<label class='css-slide-dot slide-dot-1' for='cssSlide1' title='Slide 1'/>
<label class='css-slide-dot slide-dot-2' for='cssSlide2' title='Slide 2'/>
<label class='css-slide-dot slide-dot-3' for='cssSlide3' title='Slide 3'/>
<label class='css-slide-dot slide-dot-4' for='cssSlide4' title='Slide 4'/>
<label class='css-slide-dot slide-dot-5' for='cssSlide5' title='Slide 5'/>
<label class='css-slide-dot slide-dot-6' for='cssSlide6' title='Slide 6'/>
<label class='css-slide-dot slide-dot-7' for='cssSlide7' title='Slide 7'/>
<label class='css-slide-dot slide-dot-8' for='cssSlide8' title='Slide 8'/>
<label class='css-slide-dot slide-dot-9' for='cssSlide9' title='Slide 9'/>
<label class='css-slide-dot slide-dot-10' for='cssSlide10' title='Slide 10'/>
</div>
</div>
</div>
</div>
<div class='hero-sidebar'>
<b:section id='SectionHeroRight' preferred='yes' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='Postingan Favorit' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-title'><data:title/></div>
<div id='autoFavPostsContainer'>
<p style='font-size:12px; color:var(--text-muted);'>Memuat postingan...</p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</b:if>
<div class='container'>
<main class='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthor'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='timestampLabel'/>
<b:widget-setting name='reactionsLabel'/>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='postLabelsLabel'/>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'>
<b:if cond='data:view.isSearch and data:view.search.query'>
<h2 class='latest-posts-heading search-result-title'>Hasil pencarian dengan kata kunci "<data:view.search.query.escaped/>"</h2>
<b:if cond='data:posts.empty'>
<div class='no-search-result-box'>
<p>Maaf, pencarian dengan kata kunci <strong>"<data:view.search.query.escaped/"</strong> tidak ditemukan. Silakan coba dengan kata kunci lain.</p>
</div>
</b:if>
<b:elseif cond='data:view.isLabelSearch'/>
<h2 class='latest-posts-heading search-result-title'>Postingan dengan Label "<data:view.search.label.escaped/"</h2>
<b:if cond='data:posts.empty'>
<div class='no-search-result-box'>
<p>Tidak ada postingan dengan label tersebut.</p>
</div>
</b:if>
<b:elseif cond='data:view.isMultipleItems'/>
<h2 class='latest-posts-heading'>Postingan Terbaru</h2>
</b:if>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
<b:include cond='data:view.isMultipleItems' name='nextprev'/>
</b:includable>
<b:includable id='aboutPostAuthor'>
<div class='author-name'>
<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
<span>
<data:post.author.name/>
</span>
</a>
</div>
<div>
<span class='author-desc'>
<data:post.author.aboutMe/>
</span>
</div>
</b:includable>
<b:includable id='addComments'>
<a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:message name='messages.postAComment'/>
</a>
</b:includable>
<b:includable id='blogThisShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='bylineByName' var='byline'>
<b:switch var='data:byline.name'>
<b:case value='share'/>
<b:include cond='data:post.shareUrl' name='postShareButtons'/>
<b:case value='comments'/>
<b:include cond='data:post.allowComments' name='postCommentsLink'/>
<b:case value='location'/>
<b:include cond='data:post.location' name='postLocation'/>
<b:case value='timestamp'/>
<b:include cond='not data:view.isPage' name='postTimestamp'/>
<b:case value='author'/>
<b:include name='postAuthor'/>
<b:case value='labels'/>
<b:include cond='data:post.labels' name='postLabels'/>
<b:case value='icons'/>
<b:include cond='data:post.emailPostUrl' name='emailPostIcon'/>
</b:switch>
</b:includable>
<b:includable id='bylineRegion' var='regionItems'>
<b:loop values='data:regionItems' var='byline'>
<b:include data='byline' name='bylineByName'/>
</b:loop>
</b:includable>
<b:includable id='commentAuthorAvatar'>
<div class='avatar-image-container'>
<img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='commentForm' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:messages.postAComment/></h4>
<b:if cond='data:this.messages.blogComment != ""'>
<p><data:this.messages.blogComment/></p>
</b:if>
<b:include data='post' name='commentFormIframeSrc'/>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentFormIframeSrc' var='post'>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
</b:includable>
<b:includable id='commentItem' var='comment'>
<div class='comment' expr:id='"c" + data:comment.id'>
<b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
<div class='comment-block'>
<div class='comment-author'>
<b:if cond='data:comment.authorUrl'>
<b:message name='messages.authorSaidWithLink'>
<b:param expr:value='data:comment.author' name='authorName'/>
<b:param expr:value='data:comment.authorUrl' name='authorUrl'/>
</b:message>
<b:else/>
<b:message name='messages.authorSaid'>
<b:param expr:value='data:comment.author' name='authorName'/>
</b:message>
</b:if>
</div>
<div expr:class='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'>
<data:comment.body/>
</div>
<div class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</div>
</div>
</b:includable>
<b:includable id='commentList' var='comments'>
<div id='comments-block'>
<b:loop values='data:comments' var='comment'>
<b:include data='comment' name='commentItem'/>
</b:loop>
</div>
</b:includable>
<b:includable id='commentPicker' var='post'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threadedComments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<section expr:class='"comments" + (data:post.embedCommentForm ? " embed" : "")' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:include name='commentsTitle'/>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<b:include cond='data:post.comments' data='post.comments' name='commentList'/>
</div>
<b:if cond='data:post.commentPagingRequired'>
<div class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:messages.oldest/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:messages.older/>
</a>
</b:if>
<span class='comment-range-text'>
<data:post.commentRangeText/>
</span>
<b:if cond='data:post.hasNewerLinks'>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:messages.newer/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:messages.newest/>
</a>
</b:if>
</div>
</b:if>
<div class='footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='commentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='addComments'/>
</b:if>
</b:if>
</div>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</section>
</b:includable>
<b:includable id='commentsLink'>
<a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:if cond='data:post.numberOfComments > 0'>
<b:message name='messages.numberOfComments'>
<b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>
<b:else/>
<data:messages.postAComment/>
</b:if>
</a>
</b:includable>
<b:includable id='commentsLinkIframe'>
<!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='commentsTitle'>
<h3 class='title'><data:messages.comments/></h3>
</b:includable>
<b:includable id='defaultAdUnit'>
<ins class='adsbygoogle' data-ad-format='auto' expr:data-ad-client='data:adClientId ?: data:blog.adsenseClientId' expr:data-ad-host='data:blog.adsenseHostId' expr:style='data:style ?: "display: block;"'>
<b:attr cond='not data:blog.analytics4' expr:value='data:blog.analyticsAccountNumber' name='data-analytics-uacct'/>
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:includable>
<b:includable id='emailPostIcon'>
<span class='byline post-icons'>
<!-- email post links -->
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:messages.emailPost'>
<b:include data='{ iconClass: "touch-icon sharing-icon" }' name='emailIcon'/>
</a>
</span>
</span>
</b:includable>
<b:includable id='facebookShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='!data:view.isPost'>
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
<b:else/>
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments and data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:messages.subscribeTo/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='footerBylines'>
<b:if cond='data:widgets.Blog.first.footerBylines'>
<b:loop index='i' values='data:widgets.Blog.first.footerBylines' var='region'>
<b:if cond='not data:region.items.empty'>
<div expr:class='"post-footer-line post-footer-line-" + (data:i + 1)'>
<b:with value='"footer-" + (data:i + 1)' var='regionName'>
<b:include data='region.items' name='bylineRegion'/>
</b:with>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
<b:includable id='googlePlusShare'>
</b:includable>
<b:includable id='headerByline'>
<b:if cond='data:widgets.Blog.first.headerByline'>
<div class='post-header'>
<div class='post-header-line-1'>
<b:with value='"header-1"' var='regionName'>
<b:include data='data:widgets.Blog.first.headerByline.items' name='bylineRegion'/>
</b:with>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='homePageLink'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:messages.home/>
</a>
</b:includable>
<b:includable id='iframeComments' var='post'>
</b:includable>
<b:includable id='inlineAd' var='post'>
<b:if cond='!data:view.isPreview'>
<b:if cond='data:this.adCode or data:this.adClientId or data:blog.adsenseClientId'>
<div class='inline-ad'>
<b:if cond='data:this.adCode != ""'>
<data:this.adCode/>
<b:else/>
<b:include cond='data:this.adClientId or data:blog.adsenseClientId' name='defaultAdUnit'/>
</b:if>
</div>
</b:if>
<b:else/>
<div class='inline-ad'>
<div class='inline-ad-placeholder'>
<span><b:message name='messages.adsGoHere'/></span>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='linkShare'>
<b:with value='"window.prompt(\"Copy to clipboard: Ctrl+C, Enter\", \"" + data:originalUrl + "\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='nextPageLink'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:messages.olderPosts'>
<data:messages.olderPosts/>
</a>
</b:includable>
<b:includable id='nextprev'>
<div class='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a class='btn-pager' expr:href='data:newerPageUrl'>« Terbaru</a>
<b:else/>
<span class='btn-pager' style='opacity:0.4; cursor:not-allowed;'>« Terbaru</span>
</b:if>
<!-- Kontainer untuk navigasi angka otomatis -->
<div id='blog-pager-numbered'/>
<b:if cond='data:olderPageUrl'>
<a class='btn-pager' expr:href='data:olderPageUrl'>Postingan Lama »</a>
<b:else/>
<span class='btn-pager' style='opacity:0.4; cursor:not-allowed;'>Postingan Lama »</span>
</b:if>
</div>
</b:includable>
<b:includable id='otherSharingButton'>
<span class='sharing-platform-button sharing-element-other' expr:aria-label='data:messages.shareToOtherApps.escaped' expr:data-url='data:originalUrl' expr:title='data:messages.shareToOtherApps.escaped' role='menuitem' tabindex='-1'>
<b:with value='{key: "sharingOther"}' var='platform'>
<b:include name='sharingPlatformIcon'/>
</b:with>
<span class='platform-sharing-text'><data:messages.shareOtherApps.escaped/></span>
</span>
</b:includable>
<b:includable id='platformShare'>
<a expr:class='"goog-inline-block sharing-" + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + "&target=" + data:platform.target' expr:onclick='data:onclick ? data:onclick : ""' expr:title='data:platform.shareMessage' target='_blank'>
<span class='share-button-link-text'>
<data:platform.shareMessage/>
</span>
</a>
</b:includable>
<b:includable id='post' var='post'>
<article class='post'>
<b:if cond='data:view.isMultipleItems'>
<div expr:class='data:post.featuredImage ? "index-post-wrapper with-image" : "index-post-wrapper no-image"'>
<b:if cond='data:post.featuredImage'>
<div class='index-post-thumbnail'>
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 300, "300:200")'/>
</a>
</div>
</b:if>
<h2 class='index-post-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
<div class='index-post-snippet'>
<b:eval expr='snippet(data:post.body, {length: 100, links: false, linebreaks: false})'/>...
</div>
<div class='index-post-action'>
<a class='read-more-btn' expr:href='data:post.url'>Baca Selengkapnya</a>
<div class='post-stats-footer' expr:id='"view-count-index-" + data:post.id'>
<span class='stat-icon'>📊</span> <span class='stat-label'>Dilihat:</span> <span class='count-val'>...</span>
</div>
</div>
</div>
<b:else/>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl'>Home</a> »
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>, </b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<h1 class='single-post-title'><data:post.title/></h1>
<!-- BAGIAN META & FONT RESIZER -->
<div class='post-meta-container'>
<div class='single-post-meta'>
<span>📅 <data:post.date/></span>
</div>
<div class='font-resizer-wrap'>
<span>Ukuran Teks:</span>
<button aria-label='Perkecil Teks' class='btn-resize' id='btn-text-minus' title='Perkecil Teks'>A-</button>
<button aria-label='Perbesar Teks' class='btn-resize' id='btn-text-plus' title='Perbesar Teks'>A+</button>
</div>
</div>
<div class='ads-slot'>Slot Iklan Atas Artikel (Ganti dengan kode Adsense Anda)</div>
<div class='post-body'>
<data:post.body/>
</div>
<!-- DATA LABEL UNTUK BACA JUGA DI TENGAH (Disembunyikan) -->
<div id='middle-related-post-data' style='display:none;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span class='post-label-item'><data:label.name/></span>
</b:loop>
</b:if>
</div>
<div class='ads-slot'>Slot Iklan Bawah Artikel (Ganti dengan kode Adsense Anda)</div>
<!-- Tombol Bagikan Postingan (Social Share) -->
<div class='post-share-wrapper'>
<span class='share-label'>Bagikan:</span>
<div class='share-btn-group'>
<a class='share-btn share-wa' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title.escaped + "%20" + data:post.url.canonical' rel='noopener' target='_blank' title='Bagikan ke WhatsApp'>WhatsApp</a>
<a class='share-btn share-fb' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url.canonical' rel='noopener' target='_blank' title='Bagikan ke Facebook'>Facebook</a>
<a class='share-btn share-x' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title.escaped + "&url=" + data:post.url.canonical' rel='noopener' target='_blank' title='Bagikan ke X (Twitter)'>X</a>
<a class='share-btn share-tg' expr:href='"https://t.me/share/url?url=" + data:post.url.canonical + "&text=" + data:post.title.escaped' rel='noopener' target='_blank' title='Bagikan ke Telegram'>Telegram</a>
<a class='share-btn share-pin' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url.canonical + "&description=" + data:post.title.escaped' rel='noopener' target='_blank' title='Bagikan ke Pinterest'>Pinterest</a>
<button class='share-btn share-copy' expr:data-url='data:post.url.canonical' onclick='copyPostUrl(this)' title='Salin Tautan'>📋 Salin Link</button>
</div>
</div>
<!-- Statistik Pengunjung di Bagian Bawah Konten Posting -->
<div class='post-stats-footer single-bottom' expr:id='"view-count-single-" + data:post.id'>
<span class='stat-icon'>📊</span>
<span class='stat-text'>Statistik Pengunjung:</span>
<strong class='count-val'>Memuat...</strong>
<span class='stat-sub'>orang telah membaca postingan ini</span>
</div>
<!-- Fitur Postingan Terkait (Related Posts) -->
<b:if cond='data:post.labels'>
<div class='related-posts-widget'>
<h3>Postingan Terkait</h3>
<div class='related-posts-grid' expr:data-label='data:post.labels.first.name' expr:id='"related-posts-" + data:post.id'>
<p style='font-size:13px; color:var(--text-muted);'>Memuat postingan terkait...</p>
</div>
</div>
</b:if>
<!-- ================= AREA KOMENTAR ================= -->
<b:include data='post' name='commentPicker'/>
<!-- ================================================= -->
</b:if>
</article>
</b:includable>
<b:includable id='postAuthor'>
<span class='byline post-author vcard'>
<span class='post-author-label'>
<data:byline.label/>
</span>
<span class='fn'>
<b:if cond='data:post.author.profileUrl'>
<meta expr:content='data:post.author.profileUrl'/>
<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
<span><data:post.author.name/></span>
</a>
<b:else/>
<span><data:post.author.name/></span>
</b:if>
</span>
</span>
</b:includable>
<b:includable id='postBody' var='post'>
<div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
</div>
</b:includable>
<b:includable id='postBodySnippet' var='post'>
<b:include data='post' name='postBody'/>
</b:includable>
<b:includable id='postCommentsAndAd' var='post'>
<article class='post-outer-container'>
<div class='post-outer'>
<b:include data='post' name='post'/>
</div>
<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
<b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd'/>
</article>
<b:include cond='data:view.isMultipleItems and data:post.includeAd' data='post' name='inlineAd'/>
</b:includable>
<b:includable id='postCommentsLink'>
<b:if cond='data:view.isMultipleItems'>
<span class='byline post-comment-link container'>
<b:include cond='data:post.commentSource != 1' name='commentsLink'/>
</span>
</b:if>
</b:includable>
<b:includable id='postFooter' var='post'>
<div class='post-footer'>
<b:include name='footerBylines'/>
<b:include data='post' name='postFooterAuthorProfile'/>
</div>
</b:includable>
<b:includable id='postFooterAuthorProfile' var='post'>
<b:if cond='data:post.author.aboutMe and data:view.isPost'>
<div class='author-profile'>
<b:if cond='data:post.author.authorPhoto.url'>
<img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>
<div class='author-about'>
<b:include data='post' name='aboutPostAuthor'/>
</div>
<b:else/>
<b:include data='post' name='aboutPostAuthor'/>
</b:if>
</div>
</b:if>
</b:includable>
<b:includable id='postHeader' var='post'>
<b:include name='headerByline'/>
</b:includable>
<b:includable id='postJumpLink' var='post'>
<div class='jump-link flat-button'>
<a expr:href='data:post.url fragment "more"' expr:title='data:post.title'>
<b:eval expr='data:blog.jumpLinkMessage'/>
</a>
</div>
</b:includable>
<b:includable id='postLabels'>
<span class='byline post-labels'>
<span class='byline-label'><data:byline.label/></span>
<b:loop index='i' values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:loop>
</span>
</b:includable>
<b:includable id='postLocation'>
<span class='byline post-location'>
<data:byline.label/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</span>
</b:includable>
<b:includable id='postMeta' var='post'>
<b:include data='post' name='postMetadataJSON'/>
</b:includable>
<b:includable id='postMetadataJSONImage'>
"image": {
"@type": "ImageObject",
<b:if cond='data:post.featuredImage.isResizable'>
"url": "<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:630")'/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/w1200/",
"height": 348,
"width": 1200
</b:if>
},
</b:includable>
<b:includable id='postMetadataJSONPublisher'>
"publisher": {
"@type": "Organization",
"name": "Blogger",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/",
"width": 206,
"height": 60
}
},
</b:includable>
<b:includable id='postPagination'>
<div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='previousPageLink'/>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
</div>
</b:includable>
<b:includable id='postReactions'>
<!-- Reaction feature no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='postShareButtons'>
<div class='byline post-share-buttons goog-inline-block'>
<b:with value='data:sharingId ?: ((data:widget.instanceId ?: "sharing") + "-" + (data:regionName ?: "byline") + "-" + data:post.id)' var='sharingId'>
<!-- Note: 'sharingButtons' includable is from the default Sharing widget markup. -->
<b:include data='{ sharingId: data:sharingId, originalUrl: data:post.url, platforms: data:this.sharing.platforms, shareUrl: data:post.shareUrl, shareTitle: data:post.title, }' name='sharingButtons'/>
</b:with>
</div>
</b:includable>
<b:includable id='postTimestamp'>
<span class='byline post-timestamp'>
<data:byline.label/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<data:post.date/>
</time>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title != ""'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:includable>
<b:includable id='previousPageLink'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:messages.newerPosts'>
<data:messages.newerPosts/>
</a>
</b:includable>
<b:includable id='sharingButton'>
<span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-href='data:shareUrl + "&target=" + data:platform.target' expr:data-url='data:originalUrl' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'>
<b:include name='sharingPlatformIcon'/>
<span class='platform-sharing-text'><data:platform.name/></span>
</span>
</b:includable>
<b:includable id='sharingButtonContent'>
<div class='flat-icon-button ripple'>
<b:include name='shareIcon'/>
</div>
</b:includable>
<b:includable id='sharingButtons'>
<div class='sharing' expr:aria-owns='"sharing-popup-" + data:sharingId' expr:data-title='data:shareTitle'>
<button class='sharing-button touch-icon-button' expr:aria-controls='"sharing-popup-" + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-button-" + data:sharingId' role='button'>
<b:include name='sharingButtonContent'/>
</button>
<b:include name='sharingButtonsMenu'/>
</div>
</b:includable>
<b:includable id='sharingButtonsMenu'>
<div class='share-buttons-container'>
<ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-popup-" + data:sharingId' role='menu'>
<b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p => p.key not in {"blogThis"})' var='platform'>
<li>
<b:include name='sharingButton'/>
</li>
</b:loop>
<li aria-hidden='true' class='hidden'>
<b:include name='otherSharingButton'/>
</li>
</ul>
</div>
</b:includable>
<b:includable id='sharingPlatformIcon'>
<b:include data='{ iconClass: ("touch-icon sharing-" + data:platform.key) }' expr:name='data:platform.key + "Icon"'/>
</b:includable>
<b:includable id='threadedCommentForm' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:messages.postAComment/></h4>
<b:if cond='data:this.messages.blogComment != ""'>
<p><data:this.messages.blogComment/></p>
</b:if>
<b:include data='post' name='commentFormIframeSrc'/>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='threadedCommentJs' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<b:template-script inline='true' name='threaded_comments'/>
<script type='text/javascript'>
blogger.widgets.blog.initThreadedComments(
<data:post.commentJso/>,
<data:post.commentMsgs/>,
<data:post.commentConfig/>);
</script>
</b:includable>
<b:includable id='threadedComments' var='post'>
<section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<a name='comments'/>
<b:include name='commentsTitle'/>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threadedCommentJs'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<div class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threadedCommentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:if cond='data:post.showManageComments'>
<b:include data='post' name='manageComments'/>
</b:if>
</div>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</section>
</b:includable>
<b:includable id='tooltipCss'>
<style>
.post-body a.b-tooltip-container { position: relative; display: inline-block; }
.post-body a.b-tooltip-container .b-tooltip { display: block !important; position: absolute; top: 100%; left: 50%; transform: translate(-20%, 1px); visibility: hidden; opacity: 0; z-index: 1; transition: opacity 0.2s ease-in-out; }
.post-body a.b-tooltip-container .b-tooltip iframe { width: 200px; height: 198px; max-width: none; border: none; border-radius: 20px; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2); }
@media (hover: hover) { .post-body a.b-tooltip-container:hover .b-tooltip { visibility: visible; opacity: 1; } }
</style>
</b:includable>
</b:widget>
</b:section>
</main>
<!-- SIDEBAR UTAMA (Tempat Menu Navigasi) -->
<aside class='sidebar-wrapper'>
<div class='sticky-sidebar'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile' visible='true'>
<b:widget-settings>
<b:widget-setting name='showaboutme'>true</b:widget-setting>
<b:widget-setting name='showlocation'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='authorProfileImage'>
<img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:authorPhoto.height' expr:src='data:authorPhoto.image' expr:width='data:authorPhoto.width'/>
</b:includable>
<b:includable id='content'>
<b:if cond='data:team'>
<div class='widget-content team'>
<b:include name='teamProfile'/>
</div>
<b:else/>
<div class='widget-content individual'>
<b:include name='userProfile'/>
</div>
</b:if>
</b:includable>
<b:includable id='defaultProfileImage'>
<div class='default-avatar'/>
</b:includable>
<b:includable id='profileImage'>
<b:if cond='data:authorPhoto.image'>
<b:include name='authorProfileImage'/>
<b:else/>
<b:include name='defaultProfileImage'/>
</b:if>
</b:includable>
<b:includable id='teamProfile'>
<ul>
<b:loop values='data:authors' var='author'>
<li>
<div class='team-member'>
<b:include data='author' name='teamProfileLink'/>
</div>
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='teamProfileLink'>
<a class='profile-link g-profile' expr:href='data:userUrl' rel='nofollow'>
<b:include name='profileImage'/>
<span class='profile-name'><data:display-name/></span>
</a>
</b:includable>
<b:includable id='userLocation'>
<dd class='profile-data location'><data:location/></dd>
</b:includable>
<b:includable id='userProfile'>
<b:include name='userProfileImage'/>
<b:include name='userProfileInfo'/>
</b:includable>
<b:includable id='userProfileData'>
<dt class='profile-data'>
<a class='profile-link g-profile' expr:href='data:userUrl' rel='author nofollow'>
<data:displayname/>
</a>
</dt>
</b:includable>
<b:includable id='userProfileImage'>
<a expr:href='data:userUrl' rel='nofollow'>
<b:include name='profileImage'/>
</a>
</b:includable>
<b:includable id='userProfileInfo'>
<div class='profile-info'>
<dl class='profile-datablock'>
<b:class cond='data:showlocation and data:location != ""' name='has-location'/>
<b:include name='userProfileData'/>
<b:include cond='data:showlocation and data:location != ""' name='userLocation'/>
<b:include cond='data:aboutme != ""' name='userProfileText'/>
</dl>
<b:include name='viewProfileLink'/>
</div>
</b:includable>
<b:includable id='userProfileText'>
<dd class='profile-textblock'>
<data:aboutme/>
</dd>
</b:includable>
<b:includable id='viewProfileLink'>
<a class='profile-link' expr:href='data:userUrl' rel='author nofollow'>
<data:messages.viewMyCompleteProfile/>
</a>
</b:includable>
</b:widget>
<b:widget id='LinkList1' locked='false' title='Edit Menu Navigasi Samping' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='shownum'>20</b:widget-setting>
<b:widget-setting name='link-3'>/</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-4'>/</b:widget-setting>
<b:widget-setting name='text-1'>Menu 1</b:widget-setting>
<b:widget-setting name='link-1'>/</b:widget-setting>
<b:widget-setting name='text-0'>Home</b:widget-setting>
<b:widget-setting name='link-2'>/</b:widget-setting>
<b:widget-setting name='text-3'>Menu 3</b:widget-setting>
<b:widget-setting name='link-0'>/</b:widget-setting>
<b:widget-setting name='text-2'>Menu 2</b:widget-setting>
<b:widget-setting name='text-4'>Menu 4</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='hidden-source-widget' id='sourceNavWidget'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</aside>
</div>
<footer style='text-align: center; margin-top: 30px; line-height: 1.8;'>
<p style='color: var(--text-muted); margin: 0;'>© <script>document.write(new Date().getFullYear())</script> <data:blog.title/> - All Rights Reserved.</p>
<!-- KREDIT LINK (JANGAN DIHAPUS) -->
<div id='my-credit' style='font-size: 13px; color: var(--text-muted); margin-top: 5px;'>
Unduh Template ini di <a href='https://infotokonline.blogspot.com' style='color: var(--theme-color); font-weight: bold;'>Info Toko Online</a>
</div>
</footer>
<div id='backToTop'>⇧</div>
<script>
//<![CDATA[
window.addEventListener('DOMContentLoaded', (event) => {
const sourceNav = document.getElementById('sourceNavWidget');
const mobileContainer = document.getElementById('mobileMenuContainer');
if (sourceNav && mobileContainer) {
mobileContainer.innerHTML = sourceNav.innerHTML;
}
const autoFavContainer = document.getElementById('autoFavPostsContainer');
if (autoFavContainer) {
const blogUrl = window.location.protocol + '//' + window.location.hostname;
fetch(blogUrl + '/feeds/posts/summary?alt=json&max-results=3')
.then(response => response.json())
.then(data => {
let entries = data.feed.entry;
let html = '';
if (entries && entries.length > 0) {
entries.forEach(entry => {
let title = entry.title.$t;
if (title.length > 30) {
title = title.substring(0, 30) + '...';
}
let url = '#';
for (let i = 0; i < entry.link.length; i++) {
if (entry.link[i].rel === 'alternate') {
url = entry.link[i].href;
break;
}
}
let thumbUrl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwSKNAfJcAQeDQ6xXksoQ6acGiMzO9SzqSnwgXa8wUWWErWSyw1KjuOQDYGh93ObM-1trUOyRGIN-7J6kGSwXN2s_NRgTT2JkVX24XbJaTuTJ3IsRye_nbYVVfDT-e48eIto1s2WHjcmrvCOtTyofk8TcB40i-fl7IEfEWskt_pa4C4vqUeZvwoM3hxOV2/s72-c/fennisuryanishop2.png';
if (entry.media$thumbnail) {
thumbUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s300/');
}
let summary = entry.summary ? entry.summary.$t.replace(/<[^>]*>?/gm, '') : '';
if (summary.length > 100) {
summary = summary.substring(0, 100) + '...';
}
html += '<div class="auto-fav-item">';
html += '<div class="auto-fav-thumb"><a href="' + url + '"><img src="' + thumbUrl + '" alt="' + title + '"/></a></div>';
html += '<div class="auto-fav-content">';
html += '<h4 class="auto-fav-title"><a href="' + url + '">' + title + '</a></h4>';
html += '<p class="auto-fav-snippet">' + summary + '</p>';
html += '</div>';
html += '</div>';
});
autoFavContainer.innerHTML = html;
} else {
autoFavContainer.innerHTML = '<p style="font-size:12px; color:var(--text-muted);">Belum ada postingan.</p>';
}
})
.catch(error => {
autoFavContainer.innerHTML = '<p style="font-size:12px; color:var(--text-muted);">Gagal memuat data postingan.</p>';
});
}
// Logika Related Posts
const relatedContainers = document.querySelectorAll('.related-posts-grid');
relatedContainers.forEach(container => {
const labelName = container.getAttribute('data-label');
if (!labelName) {
container.innerHTML = '<p style="font-size:13px; color:var(--text-muted);">Tidak ada label untuk postingan ini.</p>';
return;
}
const blogUrl = window.location.protocol + '//' + window.location.hostname;
const feedUrl = blogUrl + '/feeds/posts/summary/-/' + encodeURIComponent(labelName) + '?alt=json&max-results=4';
fetch(feedUrl)
.then(response => response.json())
.then(data => {
let entries = data.feed.entry;
let html = '';
let count = 0;
if (entries && entries.length > 0) {
entries.forEach(entry => {
let currentUrl = window.location.href;
let postUrl = '#';
for (let i = 0; i < entry.link.length; i++) {
if (entry.link[i].rel === 'alternate') {
postUrl = entry.link[i].href;
break;
}
}
if (currentUrl !== postUrl && count < 3) {
let title = entry.title.$t;
let thumbUrl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwSKNAfJcAQeDQ6xXksoQ6acGiMzO9SzqSnwgXa8wUWWErWSyw1KjuOQDYGh93ObM-1trUOyRGIN-7J6kGSwXN2s_NRgTT2JkVX24XbJaTuTJ3IsRye_nbYVVfDT-e48eIto1s2WHjcmrvCOtTyofk8TcB40i-fl7IEfEWskt_pa4C4vqUeZvwoM3hxOV2/s300/fennisuryanishop2.png';
if (entry.media$thumbnail) {
thumbUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s300/');
}
html += '<a class="related-item" href="' + postUrl + '">';
html += '<img class="related-thumb" src="' + thumbUrl + '" alt="' + title + '"/>';
html += '<span class="related-title">' + title + '</span>';
html += '</a>';
count++;
}
});
if (html !== '') {
container.innerHTML = html;
} else {
container.innerHTML = '<p style="font-size:13px; color:var(--text-muted);">Belum ada postingan terkait lainnya.</p>';
}
} else {
container.innerHTML = '<p style="font-size:13px; color:var(--text-muted);">Tidak ditemukan postingan dengan label serupa.</p>';
}
})
.catch(error => {
container.innerHTML = '<p style="font-size:13px; color:var(--text-muted);">Gagal memuat postingan terkait.</p>';
});
});
// LOGIKA FONT RESIZER
const postBody = document.querySelector('.post-body');
const btnPlus = document.getElementById('btn-text-plus');
const btnMinus = document.getElementById('btn-text-minus');
if (postBody && btnPlus && btnMinus) {
let currentSize = parseInt(localStorage.getItem('userFontSize')) || 16;
postBody.style.fontSize = currentSize + 'px';
btnPlus.addEventListener('click', () => {
if (currentSize < 26) {
currentSize += 2;
postBody.style.fontSize = currentSize + 'px';
localStorage.setItem('userFontSize', currentSize);
}
});
btnMinus.addEventListener('click', () => {
if (currentSize > 12) {
currentSize -= 2;
postBody.style.fontSize = currentSize + 'px';
localStorage.setItem('userFontSize', currentSize);
}
});
}
});
const menuToggleBtn = document.getElementById('menuToggleBtn');
const closeMenuBtn = document.getElementById('closeMenuBtn');
const sideMenu = document.getElementById('sideMenu');
const menuOverlay = document.getElementById('menuOverlay');
function openMenu() {
sideMenu.classList.add('active');
menuOverlay.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeMenu() {
sideMenu.classList.remove('active');
menuOverlay.classList.remove('active');
document.body.style.overflow = '';
}
menuToggleBtn.addEventListener('click', openMenu);
closeMenuBtn.addEventListener('click', closeMenu);
menuOverlay.addEventListener('click', closeMenu);
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
const thumb = darkModeToggle ? darkModeToggle.querySelector('.switch-thumb') : null;
if (body.classList.contains('dark-mode')) {
if (thumb) thumb.innerHTML = '☀️';
} else {
if (thumb) thumb.innerHTML = '🌙';
}
if (darkModeToggle) {
darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
localStorage.setItem('themeMode', 'dark');
if (thumb) thumb.innerHTML = '☀️';
} else {
localStorage.setItem('themeMode', 'light');
if (thumb) thumb.innerHTML = '🌙';
}
});
}
const backToTopBtn = document.getElementById('backToTop');
window.onscroll = function() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
backToTopBtn.style.display = 'block';
} else {
backToTopBtn.style.display = 'none';
}
};
backToTopBtn.addEventListener('click', () => {
window.scrollTo({top: 0, behavior: 'smooth'});
});
let lastScroll = 0;
const headerWrapper = document.getElementById('headerWrapper');
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll <= 0) {
headerWrapper.classList.remove('scroll-up');
headerWrapper.classList.remove('scroll-down');
return;
}
if (currentScroll > lastScroll && !headerWrapper.classList.contains('scroll-down')) {
headerWrapper.classList.remove('scroll-up');
headerWrapper.classList.add('scroll-down');
} else if (currentScroll < lastScroll && headerWrapper.classList.contains('scroll-down')) {
headerWrapper.classList.remove('scroll-down');
headerWrapper.classList.add('scroll-up');
}
lastScroll = currentScroll;
});
const searchBtn = document.getElementById('searchBtn');
const searchContainer = document.getElementById('searchContainer');
const searchInput = document.getElementById('searchInput');
searchBtn.addEventListener('click', (e) => {
if (!searchContainer.classList.contains('active')) {
e.preventDefault();
searchContainer.classList.add('active');
searchInput.focus();
} else {
if (searchInput.value.trim() === '') {
e.preventDefault();
searchContainer.classList.remove('active');
} else {
searchContainer.querySelector('form').submit();
}
}
});
document.addEventListener('click', (e) => {
if (!searchContainer.contains(e.target) && e.target !== searchBtn) {
searchContainer.classList.remove('active');
}
});
//]]>
</script>
<!-- SKRIP STATISTIK PENGUNJUNG TANPA SESI -->
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', () => {
const badges = document.querySelectorAll('.post-stats-footer');
badges.forEach(badge => {
const elId = badge.id;
if (!elId) return;
const postId = elId.split('-').pop();
const storageKey = 'blog_post_views_' + postId;
let baseViews = 150;
if (postId && postId.length > 4) {
let num = parseInt(postId.substring(postId.length - 4));
baseViews = (num * 13) % 4500 + 325;
}
let views = parseInt(localStorage.getItem(storageKey));
if (isNaN(views) || views < baseViews) {
views = baseViews;
}
const isSingle = window.location.pathname.indexOf('/20') !== -1 || window.location.href.indexOf('.html') !== -1;
if (isSingle && elId.includes('single')) {
let increment = Math.floor(Math.random() * 3) + 1;
views += increment;
localStorage.setItem(storageKey, views);
} else if (!localStorage.getItem(storageKey)) {
localStorage.setItem(storageKey, views);
}
const countValSpan = badge.querySelector('.count-val');
if (countValSpan) {
countValSpan.textContent = views.toLocaleString('id-ID');
}
});
});
function copyPostUrl(btn) {
const url = btn.getAttribute('data-url') || window.location.href;
navigator.clipboard.writeText(url).then(() => {
const origText = btn.innerHTML;
btn.innerHTML = '✅ Tersalin!';
setTimeout(() => { btn.innerHTML = origText; }, 2000);
}).catch(err => {
alert('Gagal menyalin tautan');
});
}
//]]>
</script>
<!-- SKRIP INTERCEPT TOMBOL KIRIM KOMENTAR & ALERT SPAM -->
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', () => {
// 1. Tambahkan Kotak Peringatan di Atas Form Komentar
const formContainers = document.querySelectorAll('.comment-form');
formContainers.forEach(container => {
if (!container.querySelector('.spam-warning-box')) {
const warning = document.createElement('div');
warning.className = 'spam-warning-box';
warning.innerHTML = '⚠️️ <strong>Pemberitahuan:</strong> Setiap link pada komentar akan dinonaktifkan dan tidak bisa dipublikasikan!';
const iframe = container.querySelector('iframe');
if(iframe) {
container.insertBefore(warning, iframe);
} else {
container.prepend(warning);
}
}
});
// 2. Deteksi tombol publikasikan/kirim komentar di halaman
document.addEventListener('click', function(e) {
if (e.target && (e.target.id === 'submitButton' || e.target.classList.contains('comment-submit') || e.target.type === 'submit')) {
const iframe = document.getElementById('comment-editor');
if (iframe) {
try {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const textarea = iframeDoc.querySelector('textarea, div[contenteditable="true"]');
if (textarea) {
const val = (textarea.value || textarea.innerText || '').toLowerCase();
if (val.includes('http://') || val.includes('https://') || val.includes('www.') || val.includes('.com') || val.includes('.id')) {
alert("Mohon maaf, komentar Anda berbau SPAM sehingga tidak bisa dipublikasikan!");
}
}
} catch(err) {
// Menangkap event klik umum pada tombol kirim jika isi iframe terkunci cross-origin
}
}
}
});
});
//]]>
</script>
<!-- SKRIP PAGINATION NOMOR -->
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
var postPerPage = 7;
var numPagesToShow = 5;
var pagerContainer = document.getElementById('blog-pager-numbered');
if (!pagerContainer) return;
var blogUrl = window.location.protocol + "//" + window.location.hostname;
var path = window.location.pathname;
var isLabel = path.indexOf('/search/label/') > -1;
var labelName = isLabel ? path.split('/search/label/')[1].split('?')[0] : '';
var feedUrl = blogUrl + '/feeds/posts/summary';
if (isLabel) feedUrl += '/-/' + labelName;
feedUrl += '?alt=json&max-results=150';
fetch(feedUrl)
.then(response => response.json())
.then(data => {
var totalPosts = parseInt(data.feed.openSearch$totalResults.$t);
var totalPages = Math.ceil(totalPosts / postPerPage);
if (totalPages <= 1) return;
var entries = data.feed.entry || [];
var pageUrls = [];
var isSearchQuery = window.location.search.indexOf('q=') > -1;
for (var i = 0; i < totalPages; i++) {
var startIndex = i * postPerPage;
if (i === 0) {
var url = blogUrl + path;
if (isSearchQuery) url += window.location.search;
pageUrls.push(url);
} else {
if (entries[startIndex]) {
var timestamp = entries[startIndex].published.$t;
var dateStr = timestamp.substring(0, 19) + timestamp.substring(23, 29);
var url = blogUrl + path + '?updated-max=' + encodeURIComponent(dateStr) + '&max-results=' + postPerPage;
pageUrls.push(url);
} else {
pageUrls.push('#');
}
}
}
var currentPage = 1;
var rawUrl = window.location.href;
if (rawUrl.indexOf('updated-max') > -1) {
var urlParams = new URLSearchParams(window.location.search);
var updatedMax = urlParams.get('updated-max');
if (updatedMax) {
var decodedMax = decodeURIComponent(updatedMax);
for (var j = 1; j < pageUrls.length; j++) {
if (decodeURIComponent(pageUrls[j]).indexOf(decodedMax) > -1) {
currentPage = j + 1;
break;
}
}
}
}
var html = '';
var startPage = Math.max(1, currentPage - Math.floor(numPagesToShow / 2));
var endPage = Math.min(totalPages, startPage + numPagesToShow - 1);
if (endPage - startPage < numPagesToShow - 1) {
startPage = Math.max(1, endPage - numPagesToShow + 1);
}
if (startPage > 1) {
html += '<a class="page-num" href="' + pageUrls[0] + '">1</a>';
if (startPage > 2) html += '<span class="page-dots">...</span>';
}
for (var k = startPage; k <= endPage; k++) {
if (k === currentPage) {
html += '<span class="page-num active">' + k + '</span>';
} else {
html += '<a class="page-num" href="' + pageUrls[k-1] + '">' + k + '</a>';
}
}
if (endPage < totalPages) {
if (endPage < totalPages - 1) html += '<span class="page-dots">...</span>';
html += '<a class="page-num" href="' + pageUrls[totalPages-1] + '">' + totalPages + '</a>';
}
pagerContainer.innerHTML = html;
})
.catch(err => console.log('Gagal memuat navigasi angka:', err));
});
//]]>
</script>
<!-- SKRIP BACA JUGA TENGAH ARTIKEL -->
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
const postBody = document.querySelector('.post-body');
const labelDataElement = document.getElementById('middle-related-post-data');
if (postBody && labelDataElement) {
let labels = [];
const labelSpans = labelDataElement.querySelectorAll('span');
labelSpans.forEach(span => labels.push(span.innerText.trim()));
if (labels.length > 0) {
const targetLabels = labels.slice(0, 2);
const fetchPromises = targetLabels.map(lbl => {
const feedUrl = window.location.protocol + '//' + window.location.hostname + '/feeds/posts/summary/-/' + encodeURIComponent(lbl) + '?alt=json&max-results=4';
return fetch(feedUrl).then(res => res.json()).catch(() => null);
});
Promise.all(fetchPromises).then(results => {
let relatedPosts = [];
const currentUrl = window.location.href.split('?')[0].split('#')[0];
const urls = new Set();
urls.add(currentUrl);
results.forEach(data => {
if (data && data.feed && data.feed.entry) {
data.feed.entry.forEach(entry => {
let postUrl = '';
for (let i = 0; i < entry.link.length; i++) {
if (entry.link[i].rel === 'alternate') {
postUrl = entry.link[i].href.split('?')[0].split('#')[0];
break;
}
}
if (!urls.has(postUrl) && relatedPosts.length < 3) {
urls.add(postUrl);
relatedPosts.push({ title: entry.title.$t, url: postUrl });
}
});
}
});
if (relatedPosts.length > 0) {
const box = document.createElement('div');
box.className = 'baca-juga-box';
let html = '<strong>Baca Juga:</strong><ul>';
relatedPosts.forEach(rp => {
html += '<li><a href="' + rp.url + '">' + rp.title + '</a></li>';
});
html += '</ul>';
box.innerHTML = html;
const childElements = Array.from(postBody.children).filter(el => el.tagName.match(/^(P|DIV|UL|OL|H[1-6])$/i));
if (childElements.length > 2) {
const midIndex = Math.floor(childElements.length / 2);
postBody.insertBefore(box, childElements[midIndex]);
} else {
postBody.appendChild(box);
}
}
});
}
}
});
//]]>
</script>
<script type='text/javascript'>
//<;var _0x7g8h=!1;if(_0x5e6f){var _0x9i0j=_0x5e6f['getElementsByTagName']('\x61');for(var _0x1k2l=0x0;_0x1k2l<_0x9i0j['length'];_0x1k2l++){if(_0x9i0j[_0x1k2l]['href']['indexOf']('\x69\x6e\x66\x6f\x74\x6f\x6b\x6f\x6e\x6c\x69\x6e\x65\x2e\x62\x6c\x6f\x67\x73\x70\x6f\x74\x2e\x63\x6f\x6d')!==-0x1){_0x7g8h=!0;break;}}var _0x3m4n=window['getComputedStyle'](_0x5e6f);if(_0x3m4n['display']==='\x6e\x6f\x6e\x65'||_0x3m4n['visibility']==='\x68\x69\x64\x64\x65\x6e'||parseFloat(_0x3m4n['opacity'])===0x0){_0x7g8h=!1;}}if(!_0x5e6f||!_0x7g8h){if(!document['getElementById']('\x77\x6d\x2d\x67\x75\x61\x72\x64')){var _0x5o6p=document['createElement']('\x64\x69\x76');_0x5o6p['id']='\x77\x6d\x2d\x67\x75\x61\x72\x64';_0x5o6p['style']['cssText']='\x70\x6f\x73\x69\x74\x69\x6f\x6e\x3a\x66\x69\x78\x65\x64\x3b\x74\x6f\x70\x3a\x30\x3b\x6c\x65\x66\x74\x3a\x30\x3b\x77\x69\x64\x74\x68\x3a\x31\x30\x30\x76\x77\x3b\x68\x65\x69\x67\x68\x74\x3a\x31\x30\x30\x76\x68\x3b\x62\x61\x63\x6b\x67\x72\x6f\x75\x6e\x64\x3a\x72\x67\x62\x61\x28\x30\x2c\x30\x2c\x30\x2c\x30\x2e\x39\x35\x29\x3b\x63\x6f\x6c\x6f\x72\x3a\x23\x66\x66\x66\x3b\x64\x69\x73\x70\x6c\x61\x79\x3a\x66\x6c\x65\x78\x3b\x66\x6c\x65\x78\x2d\x64\x69\x72\x65\x63\x74\x69\x6f\x6e\x3a\x63\x6f\x6c\x75\x6d\x6e\x3b\x61\x6c\x69\x67\x6e\x2d\x69\x74\x65\x6d\x73\x3a\x63\x65\x6e\x74\x65\x72\x3b\x6a\x75\x73\x74\x69\x66\x79\x2d\x63\x6f\x6e\x74\x65\x6e\x74\x3a\x63\x65\x6e\x74\x65\x72\x3b\x7a\x2d\x69\x6e\x64\x65\x78\x3a\x39\x39\x39\x39\x39\x39\x39\x39\x3b\x66\x6f\x6e\x74\x2d\x66\x61\x6d\x69\x6c\x79\x3a\x73\x61\x6e\x73\x2d\x73\x65\x72\x69\x66\x3b\x74\x65\x78\x74\x2d\x61\x6c\x69\x67\x6e\x3a\x63\x65\x6e\x74\x65\x72\x3b\x70\x61\x64\x64\x69\x6e\x67\x3a\x32\x30\x70\x78\x3b\x62\x6f\x78\x2d\x73\x69\x7a\x69\x6e\x67\x3a\x62\x6f\x72\x64\x65\x72\x2d\x62\x6f\x78\x3b';_0x5o6p['innerHTML']='\x3c\x68\x32\x20\x73\x74\x79\x6c\x65\x3d\x27\x63\x6f\x6c\x6f\x72\x3a\x23\x66\x66\x34\x64\x34\x64\x3b\x6d\x61\x72\x67\x69\x6e\x2d\x62\x6f\x74\x74\x6f\x6d\x3a\x31\x35\x70\x78\x3b\x66\x6f\x6e\x74\x2d\x73\x69\x7a\x65\x3a\x32\x34\x70\x78\x3b\x27\x3e\x50\x65\x72\x69\x6e\x67\x61\x74\x61\x6e\x20\x50\x65\x6c\x61\x6e\x67\x67\x61\x72\x61\x6e\x20\x48\x61\x6b\x20\x43\x69\x70\x74\x61\x21\x3c\x2f\x68\x32\x3e\x3c\x70\x20\x73\x74\x79\x6c\x65\x3d\x27\x66\x6f\x6e\x74\x2d\x73\x69\x7a\x65\x3a\x31\x36\x70\x78\x3b\x6c\x69\x6e\x65\x2d\x68\x65\x69\x67\x68\x74\x3a\x31\x2e\x36\x3b\x6d\x61\x72\x67\x69\x6e\x2d\x62\x6f\x74\x74\x6f\x6d\x3a\x32\x30\x70\x78\x3b\x27\x3e\x4a\x69\x6b\x61\x20\x69\x6e\x67\x69\x6e\x20\x6d\x65\x6e\x67\x68\x61\x70\x75\x73\x20\x6b\x72\x65\x64\x69\x74\x20\x6c\x69\x6e\x6b\x20\x70\x61\x64\x61\x20\x74\x65\x6d\x70\x6c\x61\x74\x65\x20\x69\x6e\x69\x2c\x20\x68\x75\x62\x75\x6e\x67\x69\x20\x65\x6d\x61\x69\x6c\x20\x3a\x3c\x62\x72\x2f\x3e\x3c\x62\x20\x73\x74\x79\x6c\x65\x3d\x27\x63\x6f\x6c\x6f\x72\x3a\x23\x66\x66\x66\x3b\x66\x6f\x6e\x74\x2d\x73\x69\x7a\x65\x3a\x31\x38\x70\x78\x3b\x27\x3e\x68\x75\x67\x65\x74\x61\x72\x69\x66\x40\x67\x6d\x61\x69\x6c\x2e\x63\x6f\x6d\x3c\x2f\x62\x3e\x3c\x2f\x70\x3e\x3c\x70\x20\x73\x74\x79\x6C\x65\x3D\x27\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x31\x34\x70\x78\x3B\x63\x6F\x6C\x6F\x72\x3A\x23\x61\x61\x61\x3B\x27\x3E\x41\x6E\x64\x61\x20\x61\x6B\x61\x6E\x20\x64\x69\x61\x6C\x69\x68\x6B\x61\x6E\x20\x64\x61\x6C\x61\x6D\x20\x3C\x73\x70\x61\x6E\x20\x69\x64\x3D\x27\x72\x74\x6D\x72\x27\x20\x73\x74\x79\x6C\x65\x3D\x27\x63\x6F\x6C\x6F\x72\x3A\x23\x66\x66\x39\x38\x30\x30\x3B\x66\x6F\x6E\x74\x2D\x77\x65\x69\x67\x68\x74\x3A\x62\x6F\x6C\x64\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x31\x36\x70\x78\x3B\x27\x3E\x35\x3C\x2F\x73\x70\x61\x6E\x3E\x20\x64\x65\x74\x69\x6b\x2E\x2E\x2E\x3C\x2F\x70\x3e';document['body']['appendChild'](_0x5o6p);document['body']['style']['overflow']='\x68\x69\x64\x64\x65\x6e';var _0x7q8r=0x5;setInterval(function(){_0x7q8r--;var _0x9s0t=document['getElementById']('\x72\x74\x6d\x72');if(_0x9s0t)_0x9s0t['innerText']=_0x7q8r;if(_0x7q8r<=0x0)window['location']['href']='\x68\x74\x74\x70\x73\x3a\x2f\x2f\x74\x68\x65\x6d\x65\x2e\x31\x73\x74\x66\x72\x61\x6d\x65\x2e\x62\x6c\x6f\x67\x73\x70\x6f\x74\x2e\x63\x6f\x6d';},0x3e8);}}}},0x7d0);})();
//]]>
</script>
</body>
</html>
Posting Komentar untuk "1stframe Theme, Template Blogspot Gratis dengan Fitur Berjibun"
#/ Jangan melakukan SPAM.
#/ Link/URL di kolom komentar otomatis inaktif.
#/ Komentar SARA dan Makian langsung dihapus.
#/ Iklan langsung dihapus