Hello Dunia, Selamat Datang di Oase Web Indonesia
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:js='false' b:version='2' class='light-mode' 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 charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:include data='blog' name='all-head-content'/>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' rel='stylesheet'/>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap' rel='stylesheet'/>
<b:skin><![CDATA[
/*--------------------------------------------------------------
# Core Theme Styles (Blogger Required & Custom Variables)
--------------------------------------------------------------*/
:root {
--bg-primary: #ffffff;
--bg-surface: #f8f9fa;
--text-primary: #121416d8;
--text-secondary: #5f676d;
--border-color: #dee2e6;
--accent-color: #0d6efd;
}
.dark-mode {
--bg-primary: #0f172a;
--bg-surface: #1e293b;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--border-color: #334155;
--accent-color: #38bdf8;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
transition: background-color 0.3s, color 0.3s;
}
a { color: var(--accent-color); text-decoration: none; }
.card { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); }
.text-muted { color: var(--text-secondary) !important; }
border, .border-bottom, .border-top { border-color: var(--border-color) !important; }
/* Header & Hero */
.hero-section {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
color: white;
padding: 60px 0;
}
.dark-mode .hero-section {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-bottom: 1px solid var(--border-color);
}
/* Floating Navigation Menu */
@media (max-width: 767.98px) {
.navbar-desktop { display: none !important; }
.mobile-floating-nav {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 400px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 30px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
z-index: 1050;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px 20px;
}
.dark-mode .mobile-floating-nav {
background: rgba(30, 41, 59, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav-link {
color: var(--text-secondary);
font-size: 1.2rem;
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.75rem;
}
.mobile-nav-link i { font-size: 1.4rem; }
.mobile-nav-link.active, .mobile-nav-link:hover { color: var(--accent-color); }
body { padding-bottom: 90px; } /* Prevent nav overlap footer */
}
@media (min-width: 768px) {
.mobile-floating-nav { display: none !important; }
.navbar-desktop {
background-color: var(--bg-surface);
border-bottom: 1px solid var(--border-color);
}
}
/* Blog View Switcher (Grid/List) */
.blog-container.list-view .blog-post-card {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
}
@media (max-width: 576px) {
.blog-container.list-view .blog-post-card { flex-direction: column; align-items: stretch; }
}
.blog-container.list-view .blog-post-card img {
width: 200px; height: 150px; object-fit: cover;
}
@media (max-width: 576px) {
.blog-container.list-view .blog-post-card img { width: 100%; height: 200px; }
}
.blog-container.list-view .grid-item-col {
width: 100% !important;
}
/* Blogger Required CSS Structural Stub */
#header-wrapper, #main-wrapper, #sidebar-wrapper, #footer-wrapper {}
]]></b:skin>
</head>
<body>
<nav class='navbar navbar-expand-md navbar-desktop sticky-top'>
<div class='container'>
<a class='navbar-brand fw-bold text-primary' href='/'>
<i class='bi bi-cpu-fill text-primary me-2'/>TechAgency
</a>
<div class='collapse navbar-collapse' id='navbarNav'>
<ul class='navbar-nav ms-auto align-items-center'>
<li class='nav-item'><a class='nav-link text-primary px-3' href='/'>Home</a></li>
<li class='nav-item'><a class='nav-link text-primary px-3' href='#services'>Services</a></li>
<li class='nav-item'><a class='nav-link text-primary px-3' href='#blog'>Blog</a></li>
<li class='nav-item'>
<button class='btn btn-link nav-link text-primary px-3' id='darkModeToggle' type='button'>
<i class='bi bi-moon-stars-fill'/>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class='mobile-floating-nav d-flex justify-content-between align-items-center'>
<a class='mobile-nav-link active' href='/'>
<i class='bi bi-house-door-fill'/><span>Home</span>
</a>
<a class='mobile-nav-link' href='#services'>
<i class='bi bi-layers-fill'/><span>Services</span>
</a>
<a class='mobile-nav-link' href='#blog'>
<i class='bi bi-rss-fill'/><span>Blog</span>
</a>
<button class='btn mobile-nav-link border-0 bg-transparent' id='darkModeToggleMobile' type='button'>
<i class='bi bi-moon-stars-fill'/><span>Theme</span>
</button>
</div>
<header class='hero-section text-center text-md-start'>
<div class='container'>
<div class='row align-items-center py-4'>
<div class='col-md-7 mb-4 mb-md-0'>
<h1 class='display-5 fw-bold mb-3'>Transformasi Digital & Informasi Teknologi Terkini</h1>
<p class='lead opacity-75 mb-4'>Kami membantu bisnis Anda berkembang dengan solusi web modern dan menyajikan wawasan teknologi paling update.</p>
<a class='btn btn-light btn-lg fw-semibold me-2' href='#services'>Layanan Kami</a>
<a class='btn btn-outline-light btn-lg fw-semibold' href='#blog'>Baca Blog</a>
</div>
<div class='col-md-5 text-center d-none d-md-block'>
<i class='bi bi-code-slash text-white opacity-25' style='font-size: 12rem;'/>
</div>
</div>
</div>
</header>
<main class='container my-5'>
<div class='row'>
<div class='col-lg-8' id='main-wrapper'>
<section class='mb-5' id='services'>
<h2 class='fw-bold mb-4'><i class='bi bi-briefcase me-2 text-primary'/>Our Services</h2>
<div class='row g-3'>
<div class='col-md-6'>
<div class='card h-100 p-4'>
<i class='bi bi-laptop display-6 text-primary mb-3'/>
<h4 class='fw-bold'>Web Development</h4>
<p class='text-muted small mb-0'>Pembuatan website custom, landing page, dan sistem web apps performa tinggi dengan teknologi mutakhir.</p>
</div>
</div>
<div class='col-md-6'>
<div class='card h-100 p-4'>
<i class='bi bi-search display-6 text-primary mb-3'/>
<h4 class='fw-bold'>SEO & Digital Marketing</h4>
<p class='text-muted small mb-0'>Optimasi mesin pencari dan strategi pemasaran digital terukur untuk meningkatkan visibilitas brand Anda.</p>
</div>
</div>
</div>
</section>
<section id='blog'>
<div class='d-flex justify-content-between align-items-center mb-4 border-bottom pb-2'>
<h2 class='fw-bold m-0'><i class='bi bi-newspaper me-2 text-primary'/>Tech Insights</h2>
<div class='btn-group' role='group'>
<button class='btn btn-outline-secondary active' id='btnGrid' type='button'>
<i class='bi bi-grid-3x3-gap-fill'/>
</button>
<button class='btn btn-outline-secondary' id='btnList' type='button'>
<i class='bi bi-list-task'/>
</button>
</div>
</div>
<b:section id='main-blog-section' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='main'>
<div class='row g-4 blog-container' id='blogContainer'>
<div class='col-md-6 grid-item-col'>
<article class='card h-100 overflow-hidden shadow-sm blog-post-card'>
<img alt='Tech Post' class='img-fluid' src='https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&auto=format&fit=crop&q=60'/>
<div class='card-body p-4'>
<div class='mb-2'><span class='badge bg-primary-subtle text-primary'>Web Dev</span></div>
<h4 class='card-title fw-bold'><a class='text-reset' href='#'>Membangun Website Cepat dengan Framework Modern 2026</a></h4>
<p class='card-text text-muted small'>Kombinasi performa tinggi dan optimasi core web vitals krusial untuk SEO website modern saat ini...</p>
</div>
</article>
</div>
<div class='col-md-6 grid-item-col'>
<article class='card h-100 overflow-hidden shadow-sm blog-post-card'>
<img alt='Tech Post' class='img-fluid' src='https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=600&auto=format&fit=crop&q=60'/>
<div class='card-body p-4'>
<div class='mb-2'><span class='badge bg-success-subtle text-success'>Artificial Intelligence</span></div>
<h4 class='card-title fw-bold'><a class='text-reset' href='#'>Perkembangan AI Agent yang Mengubah Pola Kerja Developer</a></h4>
<p class='card-text text-muted small'>Eksplorasi ekosistem kecerdasan buatan terbaru dalam membantu produktivitas rekayasa perangkat lunak...</p>
</div>
</article>
</div>
<b:loop values='data:posts' var='post'>
</b:loop>
</div>
</b:includable>
</b:widget>
</b:section>
</section>
</div>
<div class='col-lg-4 mt-5 mt-lg-0' id='sidebar-wrapper'>
<b:section id='sidebar-section' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='About Agency' type='HTML'>
<b:includable id='main'>
<div class='card p-4 mb-4 shadow-sm'>
<h4 class='fw-bold mb-3 border-bottom pb-2'><data:title/></h4>
<p class='text-muted small mb-0'>Kami adalah tim profesional yang bergerak di bidang solusi teknologi, pengembangan platform digital, dan publikasi edukasi IT terpercaya.</p>
</div>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Trending Topics' type='Label'>
<b:includable id='main'>
<div class='card p-4 shadow-sm'>
<h4 class='fw-bold mb-3 border-bottom pb-2'><data:title/></h4>
<div class='d-flex flex-wrap gap-2'>
<a class='btn btn-sm btn-outline-secondary rounded-pill' href='#'>#WebDev</a>
<a class='btn btn-sm btn-outline-secondary rounded-pill' href='#'>#Gadget</a>
<a class='btn btn-sm btn-outline-secondary rounded-pill' href='#'>#AI</a>
<a class='btn btn-sm btn-outline-secondary rounded-pill' href='#'>#CyberSecurity</a>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</main>
<footer class='border-top py-4 mt-5' id='footer-wrapper'>
<div class='container text-center'>
<p class='mb-1 fw-bold'>&copy; 2026 TechAgency. All Rights Reserved.</p>
<p class='text-muted small mb-0'>Designed with Modern Mobile-First UX Framework.</p>
</div>
</footer>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js'/>
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
// Dark Mode Logic Toggle
const toggleBtn = document.getElementById('darkModeToggle');
const toggleBtnMobile = document.getElementById('darkModeToggleMobile');
const htmlElement = document.documentElement;
function switchTheme() {
if (htmlElement.classList.contains('light-mode')) {
htmlElement.classList.remove('light-mode');
htmlElement.classList.add('dark-mode');
localStorage.setItem('theme', 'dark-mode');
} else {
htmlElement.classList.remove('dark-mode');
htmlElement.classList.add('light-mode');
localStorage.setItem('theme', 'light-mode');
}
}
// Apply saved theme on load
const savedTheme = localStorage.getItem('theme') || 'light-mode';
htmlElement.className = savedTheme;
if(toggleBtn) toggleBtn.addEventListener('click', switchTheme);
if(toggleBtnMobile) toggleBtnMobile.addEventListener('click', switchTheme);
// Grid vs List View Switcher
const btnGrid = document.getElementById('btnGrid');
const btnList = document.getElementById('btnList');
const blogContainer = document.getElementById('blogContainer');
if(btnGrid && btnList && blogContainer) {
btnGrid.addEventListener('click', function() {
blogContainer.classList.remove('list-view');
btnGrid.classList.add('active');
btnList.classList.remove('active');
});
btnList.addEventListener('click', function() {
blogContainer.addClass = blogContainer.classList.add('list-view');
btnList.classList.add('active');
btnGrid.classList.remove('active');
});
}
});
//]]>
</script>
</body>
</html>
Posting Komentar