<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<!-- 
================================================================================
TEMPLATE: BIZLINK v.1.0
TANGGAL: 03 Mei 2026
PENYUSUN: BizLink Developer
- Bangun Budi Wibowo (bizlink.my.id)
VERSI: 1.0 - Smart Landing Page & Dynamic Content System
Lisensi: Berbayar
================================================================================

NAMA TEMPLATE: "BIZLINK"
- "BizLink" adalah template serbaguna untuk keperluan bisnis dan afiliasi.
- Dirancang untuk kecepatan, SEO, dan kemudahan dalam membuat landing page.

SISTEM KERJA TEMPLATE:
1. SMART LANDING PAGE SYSTEM:
   - Postingan dengan label "landing-page" akan otomatis tampil fullscreen.
   - Widget khusus "landing-home" untuk menampilkan landing page di halaman utama.
   - Dukungan penuh untuk HTML kustom di dalam widget.

2. DYNAMIC CONTENT LOADING:
   - Data disimpan di <head> sebagai script JSON.
   - Bisa diupdate manual melalui widget Blogger.
   - Konten internal sebagai fallback jika diperlukan.

3. BEAUTIFUL URL SUPPORT:
   - URL bersih tanpa .html.
   - Navigasi yang lebih rapi dan SEO-friendly.

FITUR UTAMA v1.0:
1. Smart Landing Page Detection - Fullscreen otomatis untuk label khusus.
2. Home Landing Widget - Section khusus untuk landing page di homepage.
3. Beautiful URL Support - URL bersih tanpa .html.
4. Smooth Loading Animation - Transisi halaman yang halus.
5. Mobile Responsive - Tampilan optimal di semua perangkat.
================================================================================ --><html expr:dir='data:blog.languageDirection' lang='id' 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 & BASIC SETUP -->
  <!-- ============================================= -->
  <b:include data='blog' name='all-head-content'/>
  <meta charset='UTF-8'/>
  <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
  <meta content='index, follow' name='robots'/>
  
  <!-- ============================================= -->
  <!-- EXTERNAL RESOURCES -->
  <!-- ============================================= -->
  <!-- Font Awesome -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
  
  <!-- Google Fonts -->
  <link href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&amp;family=Inter:wght@300;400;500;600;700&amp;display=swap' rel='stylesheet'/>
  
  
  <!-- ============================================= -->
  <!-- MAIN TEMPLATE STYLESHEET -->
  <!-- ============================================= -->
  <b:skin><![CDATA[
  /* ============================================= */
  /* BIZLINK v.1.0 - MAIN CSS */
  /* Tanggal: 03 Mei 2026 */
  /* ============================================= */
  
  /* ===== BASE STYLES ===== */
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f8f9fa;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  #layout:before{content:'BIZLINK v.1.0 - Smart Landing Page System';position:absolute;top:20px;left:5px;right:5px;height:1px;text-align:center}
  #layout {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  #outer-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    transition: all 0.3s ease;
  }
  
  #content-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  
  /* ===== LOADING ANIMATION STYLES ===== */
  .bl-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.5s ease;
  }
  
  .bl-loading-content {
    text-align: center;
    color: white;
  }
  
  .bl-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: bl-spin 1s ease-in-out infinite;
    margin: 0 auto 20px;
  }
  
  @keyframes bl-spin {
    to { transform: rotate(360deg); }
  }
  
  .bl-loading-text {
    font-size: 18px;
    margin-bottom: 10px;
    opacity: 0.9;
  }
  
  .bl-loading-subtext {
    font-size: 14px;
    opacity: 0.7;
  }
  
  .bl-loading-progress {
    width: 200px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: 20px auto 0;
    overflow: hidden;
  }
  
  .bl-loading-bar {
    width: 30%;
    height: 100%;
    background: white;
    border-radius: 2px;
    animation: bl-progress 2s ease-in-out infinite;
  }
  
  @keyframes bl-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
  }
  
  /* ===== LANDING PAGE MODE STYLES ===== */
  body.bl-landing-mode {
    background: white !important;
  }
  
  body.bl-landing-mode .bl-navbar,
  body.bl-landing-mode .bl-sidebar,
  body.bl-landing-mode .bl-footer,
  body.bl-landing-mode .bl-blog-pager,
  body.bl-landing-mode .status-msg-wrap,
  body.bl-landing-mode .blog-pager,
  body.bl-landing-mode .date-header {
    display: none !important;
  }
  
  body.bl-landing-mode #outer-wrapper,
  body.bl-landing-mode #content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body.bl-landing-mode .post-body {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* ===== UTILITY CLASSES ===== */
  .bl-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .bl-section-padding {
    padding: 80px 0;
  }
  
  .bl-text-center { text-align: center; }
  .bl-mt-1 { margin-top: 0.5rem; }
  .bl-mt-2 { margin-top: 1rem; }
  .bl-mt-3 { margin-top: 1.5rem; }
  .bl-mt-4 { margin-top: 2rem; }
  .bl-mt-5 { margin-top: 3rem; }
  .bl-mb-1 { margin-bottom: 0.5rem; }
  .bl-mb-2 { margin-bottom: 1rem; }
  .bl-mb-3 { margin-bottom: 1.5rem; }
  .bl-mb-4 { margin-bottom: 2rem; }
  .bl-mb-5 { margin-bottom: 3rem; }
  
  /* ===== RESPONSIVE BREAKPOINTS ===== */
  @media (max-width: 768px) {
    .bl-container {
      padding: 0 15px;
    }
    
    .bl-section-padding {
      padding: 60px 0;
    }
  }
  
  @media (max-width: 480px) {
    .bl-container {
      padding: 0 10px;
    }
    
    .bl-section-padding {
      padding: 40px 0;
    }
    
    .bl-loading-progress {
      width: 150px;
    }
  }
/* Sembunyikan judul widget Home Landing */
.home-landing-section .title {
  display: none !important;
}

/* Atau lebih spesifik */
#home-landing .title {
  display: none !important;
}
#navbar-iframe-container,
#navbar-iframe {
  display: none !important;
}

#navbar {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}
  ]]></b:skin>
  
  <!-- ============================================= -->
  <!-- CSS RESET & GLOBAL OVERRIDES -->
  <!-- ============================================= -->
  <style>
 
  /* ============================================= */
  /* BIZLINK - GLOBAL RESET */
  /* ============================================= */
  
  /* Global CSS Variables */
  :root {
    --bl-primary: #667eea;
    --bl-secondary: #764ba2;
    --bl-accent: #f56565;
    --bl-success: #48bb78;
    --bl-dark: #2d3748;
    --bl-light: #f7fafc;
    --bl-gray: #a0aec0;
    --bl-shadow: 0 10px 30px rgba(0,0,0,0.1);
    --bl-radius: 12px;
    --bl-transition: all 0.3s ease;
  }
  
  /* Hide Blogger default elements for cleaner look */
  .date-header,
  .blog-pager,
  .comments,
  .sharepost,
  .breadcrumbs,
  .feed-links,
  .author-profile,
  .label-container {
    display: none !important;
  }
  
  /* Full width for main containers */
  .post-outer,
  .post-body {
    max-width: 100% !important;
  }
    
    /* Sembunyikan status message &quot;Tidak ada postingan&quot; */
.status-msg-wrap {
  display: none !important;
}

/* Sembunyikan area postingan blog di homepage */
.blog-posts {
  display: none !important;
}

/* Sembunyikan juga main section jika diperlukan */
.main.section {
  display: none !important;
}

.bl-credit-pro a {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
}

.bl-credit-pro a:hover {
  text-decoration: underline;
  color: #764ba2;
}

/* Sembunyikan credit di mode landing page */
body.bl-landing-mode .bl-credit-pro {
  display: none !important;
}

/* Responsive untuk mobile */
@media (max-width: 768px) {
  .bl-credit-pro {
    font-size: 9px;
    padding: 4px 10px;
    bottom: 8px;
    right: 8px;
  }
}
 /* Proteksi credit - tidak bisa disembunyikan/dikecilkan */
.bl-credit-pro,
.bl-credit-pro * {
  font-size: 11px !important;
  font-size: clamp(11px, 0.5rem, 11px) !important;
}
.bl-credit-pro {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.bl-credit-footer {
  overflow: visible !important;
  height: auto !important;
  display: block !important;
}
  </style>
  
  <!-- ============================================= -->
  <!-- BIZLINK MAIN SYSTEM JS -->
  <!-- ============================================= -->
  <script>
  //<![CDATA[
  /* ============================================= */
  /* BIZLINK v.1.0 - MAIN SYSTEM */
  /* ============================================= */
  
  // CONFIGURATION
  const BL_CONFIG = {
    debug: false,
    timeout: 5000,
    showLoading: true
  };
  
  // STATE MANAGEMENT
  let blState = {
    isLoading: false,
    isLandingPage: false,
    isHomePage: false,
    currentSlug: ''
  };
  
  // UTILITY FUNCTIONS
  const BLUtils = {
    log: function(...args) {
      if (BL_CONFIG.debug) {
        console.log('[BizLink]', ...args);
      }
    },
    
    getCurrentSlug: function() {
      const path = window.location.pathname;
      if (path === '/' || path === '') return '';
      let slug = path.replace('.html', '').replace(/^\//, '').replace(/\/$/, '');
      return slug;
    },
    
    getJsonData: function() {
      try {
        const script = document.getElementById('bizlink-dynamic-data');
        if (script && script.textContent) {
          return JSON.parse(script.textContent);
        }
      } catch (e) {
        console.error('[BizLink] Failed to parse JSON data:', e);
      }
      return [];
    },
    
    findDataBySlug: function(slug) {
      const data = this.getJsonData();
      return data.find(item => item.slug === slug);
    },
    
    showLoading: function() {
      if (!BL_CONFIG.showLoading) return;
      const overlay = document.createElement('div');
      overlay.className = 'bl-loading-overlay';
      overlay.id = 'bl-loading-overlay';
      overlay.innerHTML = `
        <div class="bl-loading-content">
          <div class="bl-spinner"></div>
          <div class="bl-loading-text">Memuat BizLink...</div>
          <div class="bl-loading-subtext">Menyiapkan konten terbaik untuk Anda</div>
          <div class="bl-loading-progress">
            <div class="bl-loading-bar"></div>
          </div>
        </div>
      `;
      document.body.appendChild(overlay);
      blState.isLoading = true;
    },
    
    hideLoading: function() {
      const overlay = document.getElementById('bl-loading-overlay');
      if (overlay) {
        overlay.style.opacity = '0';
        setTimeout(() => {
          if (overlay.parentNode) {
            overlay.parentNode.removeChild(overlay);
          }
        }, 500);
      }
      blState.isLoading = false;
    },
    
    activateLandingMode: function() {
      document.body.classList.add('bl-landing-mode');
      blState.isLandingPage = true;
      this.log('Landing page mode activated');
    },
    
    checkLandingPageLabel: function() {
      const postLabels = document.querySelector('.post-labels');
      if (postLabels) {
        const labels = Array.from(postLabels.querySelectorAll('a'));
        return labels.some(a => {
          const label = a.textContent.toLowerCase();
          return label.includes('landing') || label.includes('landing-page') || label.includes('landingpage');
        });
      }
      return false;
    }
  };
  
  // MAIN INITIALIZATION
  function initBizLinkSystem() {
    BLUtils.log('BizLink System Initializing...');
    
    blState.currentSlug = BLUtils.getCurrentSlug();
    blState.isHomePage = blState.currentSlug === '';
    
    // Check if it's a post with landing-page label
    if (BLUtils.checkLandingPageLabel()) {
      BLUtils.activateLandingMode();
      BLUtils.hideLoading();
      return;
    }
    
    // Handle Homepage
    if (blState.isHomePage) {
      BLUtils.log('Homepage detected');
      const homeData = BLUtils.findDataBySlug('');
      if (homeData && homeData.status === 'active' && homeData.target_url) {
        BLUtils.showLoading();
        setTimeout(() => {
          window.location.href = homeData.target_url;
        }, 1000);
      } else {
        BLUtils.hideLoading();
      }
      return;
    }
    
    // Handle other pages
    const pageData = BLUtils.findDataBySlug(blState.currentSlug);
    if (pageData && pageData.status === 'active') {
      if (pageData.target_url) {
        BLUtils.showLoading();
        setTimeout(() => {
          window.location.href = pageData.target_url;
        }, 1000);
      } else if (pageData.type === 'landing_page') {
        BLUtils.activateLandingMode();
      }
    }
    
    BLUtils.hideLoading();
  }
  
  // INITIALIZE ALL SYSTEMS
  document.addEventListener('DOMContentLoaded', function() {
    initBizLinkSystem();
  });
  
  // Global export for manual control
  window.BizLink = {
    version: '1.0',
    utils: BLUtils,
    config: BL_CONFIG,
    state: blState,
    init: initBizLinkSystem
  };
  
  BLUtils.log('BizLink System loaded and ready');
  //]]>
  </script>
  
</head>

<body expr:class='&quot;loading &quot; + data:blog.mobileClass'>
  <!-- ============================================= -->
<!-- NAVBAR SECTION -->
<!-- ============================================= -->
<b:section class='bl-navbar navbar' id='navbar' maxwidgets='1' showaddelement='no'>
  <b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar' version='1'>
    <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/platform.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
      gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
        if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
          gapi.iframes.getContext().openChild({
              url: &#39;https://draft.blogger.com/navbar/2428688964400466143?origin\x3dhttp://localhost:80&#39;,
              where: document.getElementById(&quot;navbar-iframe-container&quot;),
              id: &quot;navbar-iframe&quot;
          });
        }
      });
    &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
  </b:widget>
</b:section>
  <!-- ============================================= -->
  <!-- MAIN CONTENT WRAPPER -->
  <!-- ============================================= -->
  <div id='outer-wrapper'>
    <div id='content-wrapper'>
      <div class='column-center-outer'>
        <div class='column-center-inner'>
          
          <!-- ============================================= -->
          <!-- LOKASI UNTUK LANDING PAGE DI "HOME" -->
          <!-- ============================================= -->
          <!-- 
          SECTION KHUSUS UNTUK HOME LANDING PAGE
          Widget ini akan ditampilkan di halaman utama.
          Isi dengan kode HTML landing page Anda.
          -->
          <b:section class='bl-home-landing home-landing-section' id='home-landing' maxwidgets='1' preferred='no' showaddelement='yes'>
            <b:widget id='HTML3' locked='false' title='BizLink Home Landing' type='HTML' version='1'>
              <b:widget-settings>
                <b:widget-setting name='content'><![CDATA[<!-- Font Awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&amp;family=Playfair+Display:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet" />

<!-- Swiper JS CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --primary: #2D6A4F;
    --primary-dark: #1B4332;
    --secondary: #D4A373;
    --accent: #E9C46A;
    --light: #F4F1DE;
    --dark: #2D3E2B;
    --gray: #6B705C;
    --white: #FFFFFF;
    --shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 25px 40px -12px rgba(0, 0, 0, 0.15);
    --radius: 20px;
    --radius-sm: 12px;
    --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }

  section {
    padding: 80px 0;
  }

  .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    font-family: 'Playfair Display', serif;
    color: var(--primary-dark);
  }

  .section-title:after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    margin: 16px auto 0;
    border-radius: 3px;
  }

  .section-subtitle {
    text-align: center;
    color: var(--gray);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 50px auto;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
  }

  .btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(45, 106, 79, 0.3);
  }

  .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(45, 106, 79, 0.4);
  }

  .btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
  }

  .btn-outline:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px);
  }

  /* Navbar */
  .navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    z-index: 1000;
  }

  .navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
  }

  .logo {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    text-decoration: none;
  }

  .logo span {
    color: var(--secondary);
  }

  .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
  }

  .nav-links a {
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
    transition: var(--transition);
  }

  .nav-links a:hover {
    color: var(--primary);
  }

  .menu-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark);
  }

  .nav-cta {
    background: var(--primary);
    color: white !important;
    padding: 8px 24px !important;
    border-radius: 40px;
  }

  /* Hero Section */
  .hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #FDF8F0 0%, #F4F1DE 100%);
    position: relative;
    overflow: hidden;
  }

  .hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  .hero-content h3 {
    font-size: 1.2rem;
    color: var(--secondary);
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }

  .hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    color: var(--primary-dark);
  }

  .hero-content h1 .highlight {
    color: var(--secondary);
  }

  .hero-content p {
    font-size: 1.1rem;
    color: var(--gray);
    margin-bottom: 30px;
  }

  .hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 40px;
  }

  .stat-item h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
  }

  .stat-item p {
    font-size: 0.8rem;
    margin-top: 4px;
  }

  .hero-image {
    text-align: center;
  }

  .hero-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 30px;
    box-shadow: var(--shadow);
  }

  .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
  }

  .social-icons a {
    width: 40px;
    height: 40px;
    background: rgba(45, 106, 79, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--primary);
    text-decoration: none;
  }

  .social-icons a:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px);
  }

  /* About */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
  }

  .about-image img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .about-text h3 {
    font-size: 1.8rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 15px;
    color: var(--primary-dark);
  }

  .about-text p {
    color: var(--gray);
    margin-bottom: 20px;
  }

  .about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
  }

  .feature-item {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .feature-item i {
    width: 40px;
    height: 40px;
    background: rgba(45, 106, 79, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.2rem;
  }

  /* Collection Grid */
  .collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
  }

  .orchid-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
  }

  .orchid-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
  }

  .orchid-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
  }

  .orchid-content {
    padding: 20px;
  }

  .orchid-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-dark);
  }

  .orchid-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary);
    margin: 10px 0;
  }

  .orchid-desc {
    font-size: 0.85rem;
    color: var(--gray);
    margin-bottom: 15px;
  }

  .orchid-btn {
    display: inline-block;
    padding: 8px 20px;
    background: var(--primary);
    color: white;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: var(--transition);
  }

  .orchid-btn:hover {
    background: var(--primary-dark);
  }

  /* Features Grid */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
  }

  .feature-card {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
  }

  .feature-card:hover {
    transform: translateY(-5px);
  }

  .feature-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
  }

  .feature-card h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .feature-card p {
    font-size: 0.85rem;
    color: var(--gray);
  }

  /* Testimonials */
  .testimonials-slider {
    max-width: 800px;
    margin: 0 auto;
  }

  .testimonial-card {
    background: white;
    padding: 30px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow);
  }

  .testimonial-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px;
  }

  .testimonial-rating {
    color: #F4C542;
    margin-bottom: 15px;
  }

  .testimonial-text {
    font-style: italic;
    color: var(--gray);
    margin-bottom: 15px;
  }

  .testimonial-name {
    font-weight: 600;
    margin-bottom: 5px;
  }

  /* Map */
  .map-container {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  iframe {
    width: 100%;
    height: 400px;
    border: 0;
  }

  .map-info {
    text-align: center;
    margin-top: 20px;
  }

  .map-info p {
    margin: 5px 0;
    color: var(--gray);
  }

  /* Contact */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }

  .contact-info {
    background: white;
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
  }

  .contact-item i {
    width: 48px;
    height: 48px;
    background: rgba(45, 106, 79, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary);
  }

  .contact-item h4 {
    margin-bottom: 4px;
  }

  .contact-item p, .contact-item a {
    color: var(--gray);
    text-decoration: none;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 16px;
    font-family: inherit;
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: var(--primary);
  }

  .contact-form textarea {
    height: 120px;
    resize: vertical;
  }

  /* Footer Section (sebagai bagian konten, bukan tag footer) */
  .footer-section {
    background: var(--primary-dark);
    color: white;
    padding: 50px 0 20px;
    margin-top: 0;
  }

  .footer-section .social-icons {
    justify-content: center;
    margin-bottom: 20px;
  }

  .footer-section .social-icons a {
    background: rgba(255, 255, 255, 0.1);
    color: white;
  }

  .footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .footer-links a {
    color: #ccc;
    text-decoration: none;
  }

  .footer-links a:hover {
    color: var(--secondary);
  }

  .copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    font-size: 0.8rem;
  }

  /* Floating WA & Back to Top */
  .whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: #25D366;
    color: white;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
    z-index: 999;
    text-decoration: none;
    animation: pulseGreen 2s infinite;
  }

  @keyframes pulseGreen {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
  }

  .back-to-top {
    position: fixed;
    bottom: 28px;
    left: 28px;
    width: 45px;
    height: 45px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
  }

  .back-to-top.show {
    opacity: 1;
    visibility: visible;
  }

  /* Responsive */
  @media (max-width: 992px) {
    .hero .container { grid-template-columns: 1fr; text-align: center; }
    .hero-buttons { justify-content: center; }
    .hero-stats { justify-content: center; }
    .about-grid { grid-template-columns: 1fr; text-align: center; }
    .about-features { justify-content: center; }
    .contact-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 2rem; }
    .hero-content h1 { font-size: 2.5rem; }
  }

  @media (max-width: 768px) {
    section { padding: 60px 0; }
    .menu-toggle { display: block; }
    .nav-links {
      position: fixed;
      top: 70px;
      left: -100%;
      width: 100%;
      background: white;
      flex-direction: column;
      align-items: center;
      gap: 25px;
      padding: 40px 0;
      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
      transition: 0.3s ease;
      z-index: 999;
    }
    .nav-links.active { left: 0; }
    .collection-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .about-features { grid-template-columns: 1fr; }
  }

  @media (max-width: 480px) {
    .container { padding: 0 20px; }
    .hero-content h1 { font-size: 1.8rem; }
    .section-title { font-size: 1.6rem; }
    .hero-stats { gap: 15px; }
    .stat-item h4 { font-size: 1.2rem; }
  }
</style>

<!-- Navbar -->
<div class="navbar" id="navbar">
  <div class="container">
    <a href="#" class="logo">Anggrek<span>Bandung</span></a>
    <div class="menu-toggle" id="menuToggle">
      <i class="fas fa-bars"></i>
    </div>
    <ul class="nav-links" id="navLinks">
      <li><a href="#home">Beranda</a></li>
      <li><a href="#about">Tentang</a></li>
      <li><a href="#collection">Koleksi</a></li>
      <li><a href="#contact">Kontak</a></li>
      <li><a href="#contact" class="nav-cta">Pesan Sekarang</a></li>
    </ul>
  </div>
</div>

<!-- Hero Section -->
<div class="hero" id="home">
  <div class="container">
    <div class="hero-content">
      <h3>BUDIDAYA LESTARI</h3>
      <h1>Keindahan Anggrek <span class="highlight">Asli Bandung</span></h1>
      <p>Pusat anggrek hias berkualitas dengan budidaya ramah lingkungan. Koleksi lengkap anggrek eksotis, siap menghiasi rumah dan acara spesial Anda.</p>
      <div class="hero-buttons">
        <a href="#collection" class="btn btn-primary"><i class="fas fa-leaf"></i> Lihat Koleksi</a>
        <a href="#contact" class="btn btn-outline"><i class="fab fa-whatsapp"></i> Konsultasi</a>
      </div>
      <div class="hero-stats">
        <div class="stat-item"><h4>15+</h4><p>Varietas Anggrek</p></div>
        <div class="stat-item"><h4>500+</h4><p>Customer Puas</p></div>
        <div class="stat-item"><h4>24/7</h4><p>Support</p></div>
      </div>
      <div class="social-icons">
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-tiktok"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
      </div>
    </div>
    <div class="hero-image">
      <img src="https://placehold.co/500x550/2D6A4F/white?text=Anggrek+Bandung" alt="Anggrek Bandung" />
    </div>
  </div>
</div>

<!-- About Section -->
<div id="about">
  <div class="container">
    <h2 class="section-title">Tentang Kami</h2>
    <p class="section-subtitle">Budidaya anggrek lestari di kawasan Bandung Raya</p>
    <div class="about-grid">
      <div class="about-image">
        <img src="https://placehold.co/500x450/D4A373/white?text=Kebun+Anggrek+Bandung" alt="Kebun Anggrek" />
      </div>
      <div class="about-text">
        <h3>Budidaya Lestari, Bunga Berkualitas</h3>
        <p>Kami adalah pusat budidaya anggrek di Bandung yang mengedepankan prinsip lestari dan ramah lingkungan. Setiap anggrek kami rawat dengan penuh dedikasi menggunakan metode organik.</p>
        <p>Lokasi kebun kami di kaki Gunung Tangkuban Perahu memberikan kelembaban alami yang sempurna untuk pertumbuhan anggrek berkualitas tinggi.</p>
        <div class="about-features">
          <div class="feature-item"><i class="fas fa-seedling"></i><span>Budidaya Organik</span></div>
          <div class="feature-item"><i class="fas fa-truck"></i><span>Pengiriman Seluruh Indonesia</span></div>
          <div class="feature-item"><i class="fas fa-hand-holding-heart"></i><span>Garansi Tanaman Hidup</span></div>
          <div class="feature-item"><i class="fas fa-leaf"></i><span>Ramah Lingkungan</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Collection Section -->
<div id="collection" style="background: var(--light);">
  <div class="container">
    <h2 class="section-title">Koleksi Anggrek</h2>
    <p class="section-subtitle">Pilihan anggrek terbaik dari kebun kami</p>
    <div class="collection-grid">
      <div class="orchid-card">
        <img class="orchid-image" src="https://placehold.co/400x350/2D6A4F/white?text=Anggrek+Bulan" alt="Anggrek Bulan" />
        <div class="orchid-content">
          <h3 class="orchid-title">Anggrek Bulan Putih</h3>
          <div class="orchid-price">Rp 175.000</div>
          <p class="orchid-desc">Anggrek bulan dengan kelopak putih bersih, cocok untuk dekorasi ruangan atau hadiah spesial.</p>
          <a href="#contact" class="orchid-btn">Pesan Sekarang</a>
        </div>
      </div>
      <div class="orchid-card">
        <img class="orchid-image" src="https://placehold.co/400x350/2D6A4F/white?text=Anggrek+Hitam" alt="Anggrek Hitam" />
        <div class="orchid-content">
          <h3 class="orchid-title">Anggrek Hitam Langka</h3>
          <div class="orchid-price">Rp 450.000</div>
          <p class="orchid-desc">Koleksi premium anggrek hitam khas Indonesia. Langka dan eksklusif.</p>
          <a href="#contact" class="orchid-btn">Pesan Sekarang</a>
        </div>
      </div>
      <div class="orchid-card">
        <img class="orchid-image" src="https://placehold.co/400x350/2D6A4F/white?text=Anggrek+Cattleya" alt="Anggrek Cattleya" />
        <div class="orchid-content">
          <h3 class="orchid-title">Anggrek Cattleya</h3>
          <div class="orchid-price">Rp 225.000</div>
          <p class="orchid-desc">Anggrek Cattleya dengan warna ungu cerah, wangi khas dan tahan lama.</p>
          <a href="#contact" class="orchid-btn">Pesan Sekarang</a>
        </div>
      </div>
      <div class="orchid-card">
        <img class="orchid-image" src="https://placehold.co/400x350/2D6A4F/white?text=Anggrek+Dendrobium" alt="Anggrek Dendrobium" />
        <div class="orchid-content">
          <h3 class="orchid-title">Anggrek Dendrobium</h3>
          <div class="orchid-price">Rp 150.000</div>
          <p class="orchid-desc">Anggrek dendrobium dengan kombinasi warna pink dan putih. Mudah perawatan.</p>
          <a href="#contact" class="orchid-btn">Pesan Sekarang</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Why Choose Us -->
<div>
  <div class="container">
    <h2 class="section-title">Mengapa Memilih Kami?</h2>
    <p class="section-subtitle">Kualitas dan layanan terbaik untuk Anda</p>
    <div class="features-grid">
      <div class="feature-card">
        <i class="fas fa-truck-fast"></i>
        <h4>Pengiriman Cepat</h4>
        <p>Pengiriman ke seluruh Indonesia dengan packing khusus agar anggrek tetap segar.</p>
      </div>
      <div class="feature-card">
        <i class="fas fa-seedling"></i>
        <h4>Tanaman Sehat</h4>
        <p>Anggrek dari kebun sendiri, kualitas terjaga, siap tanam.</p>
      </div>
      <div class="feature-card">
        <i class="fas fa-hand-sparkles"></i>
        <h4>Garansi 100%</h4>
        <p>Garansi tanaman hidup. Jika rusak dalam perjalanan, kami ganti baru.</p>
      </div>
      <div class="feature-card">
        <i class="fas fa-chalkboard-user"></i>
        <h4>Konsultasi Gratis</h4>
        <p>Free konsultasi perawatan anggrek via WhatsApp.</p>
      </div>
    </div>
  </div>
</div>

<!-- Testimonials -->
<div style="background: var(--light);">
  <div class="container">
    <h2 class="section-title">Testimoni Pelanggan</h2>
    <p class="section-subtitle">Apa kata mereka yang sudah berbelanja di Anggrek Bandung</p>
    <div class="swiper testimonials-slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="testimonial-card">
            <img class="testimonial-avatar" src="https://placehold.co/100x100/2D6A4F/white?text=User" alt="Customer" />
            <div class="testimonial-rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
            <p class="testimonial-text">"Anggreknya sehat dan bunganya indah. Packing rapi, sampai rumah masih segar. Recomended!"</p>
            <h4 class="testimonial-name">Ibu Siti</h4>
            <p>Jakarta</p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="testimonial-card">
            <img class="testimonial-avatar" src="https://placehold.co/100x100/D4A373/white?text=User" alt="Customer" />
            <div class="testimonial-rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
            <p class="testimonial-text">"Pelayanan ramah, fast response. Anggrek cattleya-nya wangi banget, suka sekali!"</p>
            <h4 class="testimonial-name">Bambang</h4>
            <p>Bandung</p>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="testimonial-card">
            <img class="testimonial-avatar" src="https://placehold.co/100x100/2D6A4F/white?text=User" alt="Customer" />
            <div class="testimonial-rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
            <p class="testimonial-text">"Harga terjangkau, kualitas oke. Sudah 3 kali beli di sini, selalu puas. Thank you!"</p>
            <h4 class="testimonial-name">Dewi</h4>
            <p>Surabaya</p>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>

<!-- Location & Map -->
<div>
  <div class="container">
    <h2 class="section-title">Lokasi Kami</h2>
    <p class="section-subtitle">Kunjungi kebun anggrek kami di Bandung</p>
    <div class="map-container">
      <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3960.72857769214!2d107.620429309375!3d-6.917594593023481!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e68e78a2db63637%3A0x761b25232b1fd294!2sBandung%2C%20Kota%20Bandung%2C%20Jawa%20Barat!5e0!3m2!1sid!2sid!4v1700000000000!5m2!1sid!2sid" 
        allowfullscreen="" 
        loading="lazy">
      </iframe>
    </div>
    <div class="map-info">
      <p><i class="fas fa-map-marker-alt" style="color: var(--primary);"></i> Jl. Raya Lembang No. 123, Bandung Barat, Jawa Barat</p>
      <p><i class="fas fa-clock"></i> Buka setiap hari: 08.00 - 17.00 WIB</p>
    </div>
  </div>
</div>

<!-- Contact Section -->
<div id="contact" style="background: var(--light);">
  <div class="container">
    <h2 class="section-title">Hubungi Kami</h2>
    <p class="section-subtitle">Pesan sekarang atau konsultasi gratis via WhatsApp</p>
    <div class="contact-grid">
      <div class="contact-info">
        <div class="contact-item">
          <i class="fas fa-phone-alt"></i>
          <div><h4>Telepon / WhatsApp</h4><p><a href="https://wa.me/6281234567890">+62 812-3456-7890</a></p></div>
        </div>
        <div class="contact-item">
          <i class="fas fa-envelope"></i>
          <div><h4>Email</h4><p><a href="mailto:info@anggrekbandung.com">info@anggrekbandung.com</a></p></div>
        </div>
        <div class="contact-item">
          <i class="fas fa-map-marker-alt"></i>
          <div><h4>Alamat Kebun</h4><p>Jl. Raya Lembang No. 123, Bandung Barat</p></div>
        </div>
        <div class="social-icons">
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-tiktok"></i></a>
          <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
      </div>
      <div class="contact-form">
        <input type="text" id="name" placeholder="Nama Lengkap" />
        <input type="email" id="email" placeholder="Email" />
        <input type="tel" id="phone" placeholder="Nomor WhatsApp" />
        <textarea id="message" placeholder="Pesan / Pertanyaan (misal: info stok anggrek, harga, cara perawatan, dll)"></textarea>
        <button class="btn btn-primary" onclick="alert('✅ Terima kasih! Tim Anggrek Bandung akan segera menghubungi Anda maksimal 1x24 jam.')">
          <i class="fas fa-paper-plane"></i> Kirim Pesan
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Footer Section (bukan tag footer, tapi div) -->
<div class="footer-section">
  <div class="container">
    <div class="social-icons">
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-facebook-f"></i></a>
      <a href="#"><i class="fab fa-tiktok"></i></a>
      <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
    <div class="footer-links">
      <a href="#home">Beranda</a>
      <a href="#about">Tentang</a>
      <a href="#collection">Koleksi</a>
      <a href="#contact">Kontak</a>
    </div>
    <div class="copyright">
      &copy; 2026 Anggrek Bandung - Pusat Anggrek Lestari & Berkualitas
    </div>
  </div>
</div>

<!-- Floating WhatsApp -->
<a href="https://wa.me/6281234567890?text=Halo%20Anggrek%20Bandung,%20saya%20tertarik%20dengan%20koleksi%20anggrek%20Anda" class="whatsapp-float" target="_blank">
  <i class="fab fa-whatsapp"></i>
</a>

<!-- Back to Top -->
<a href="#" class="back-to-top" id="backToTop">
  <i class="fas fa-arrow-up"></i>
</a>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
  // Mobile Menu Toggle
  var menuToggle = document.getElementById('menuToggle');
  var navLinks = document.getElementById('navLinks');
  
  if (menuToggle && navLinks) {
    menuToggle.addEventListener('click', function() {
      navLinks.classList.toggle('active');
    });
    
    document.querySelectorAll('#navLinks a').forEach(function(link) {
      link.addEventListener('click', function() {
        navLinks.classList.remove('active');
      });
    });
  }
  
  // Back to Top Button
  var backToTop = document.getElementById('backToTop');
  window.addEventListener('scroll', function() {
    if (window.scrollY > 300) {
      backToTop.classList.add('show');
    } else {
      backToTop.classList.remove('show');
    }
  });
  
  if (backToTop) {
    backToTop.addEventListener('click', function(e) {
      e.preventDefault();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }
  
  // Smooth Scroll
  document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
    anchor.addEventListener('click', function(e) {
      var href = this.getAttribute('href');
      if (href === "#" || href === "") return;
      var target = document.querySelector(href);
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
  
  // Testimonial Swiper
  new Swiper('.testimonials-slider', {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    autoplay: { delay: 4000, disableOnInteraction: false },
    pagination: { el: '.swiper-pagination', clickable: true },
    breakpoints: { 768: { slidesPerView: 2 } }
  });
  
  // Scroll Reveal Animation
  var revealElements = document.querySelectorAll('.orchid-card, .feature-card, .about-grid, .contact-grid');
  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1 });
  
  revealElements.forEach(function(el) {
    el.style.opacity = '0';
    el.style.transform = 'translateY(30px)';
    el.style.transition = 'all 0.6s ease';
    observer.observe(el);
  });
</script>]]></b:widget-setting>
              </b:widget-settings>
              <b:includable id='main'>
  <!-- Widget Landing Home - Isi dengan kode landing page untuk halaman utama -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
            </b:widget>
          </b:section>
          
          <!-- ============================================= -->
          <!-- MAIN CONTENT AREA (Blog Posts) -->
          <!-- ============================================= -->
          <div class='main section' id='main'>
            <div class='main-inner'>
              <b:section class='main' id='Blog1' showaddelement='no'>
                <b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'>
                  <b:widget-settings>
                    <b:widget-setting name='showDateHeader'>false</b:widget-setting>
                    <b:widget-setting name='commentLabel'>comments</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='authorLabel'>By</b:widget-setting>
                    <b:widget-setting name='showCommentLink'>false</b:widget-setting>
                    <b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
                    <b:widget-setting name='showAuthor'>false</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'>at</b:widget-setting>
                    <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'>false</b:widget-setting>
                    <b:widget-setting name='showLocation'>false</b:widget-setting>
                    <b:widget-setting name='postLabelsLabel'>Labels:</b:widget-setting>
                    <b:widget-setting name='showTimestamp'>false</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:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>

        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </div>

    <!-- navigation -->
    <b:include name='nextprev'/>

    <!-- feed links -->
    <b:include name='feedLinks'/>

  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>
</b:includable>
                  <b:includable id='backlinkDeleteIcon' var='backlink'/>
                  <b:includable id='backlinks' var='post'/>
                  <b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
    </script>
  </div>
</b:includable>
                  <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + 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:top.deleteCommentMsg'>
        <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
  </span>
</b:includable>
                  <b:includable id='comment_count_picker' var='post'>
  <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <data:post.commentLabelFull/>:
  </a>
</b:includable>
                  <b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:includable>
                  <b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
      </b:if>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd 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>
            </dd>
          </b:loop>
        </dl>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:elseif cond='data:post.allowComments'/>
          <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
        </b:if>
      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

  </div>
</b:includable>
                  <b:includable id='feedLinks'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
    <b:if cond='data:feedLinks'>
      <div class='blog-feeds'>
        <b:include data='feedLinks' name='feedLinksBody'/>
      </div>
    </b:if>

  <b:else/> <!--Post feed links -->
    <div class='post-feeds'>
      <b:loop values='data:posts' var='post'>
        <b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>
      </b:loop>
    </div>
  </b:if>
</b:includable>
                  <b:includable id='feedLinksBody' var='links'>
  <div class='feed-links'>
  <data:feedLinksMsg/>
  <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='iframe_comments' var='post'>
  <!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
                  <b:includable id='mobile-index-post' var='post'>
  <div class='mobile-date-outer date-outer'>
    <b:if cond='data:post.dateHeader'>
      <div class='date-header'>
        <span><data:post.dateHeader/></span>
      </div>
    </b:if>

    <div class='mobile-post-outer'>
      <a expr:href='data:post.url'>
        <h3 class='mobile-index-title entry-title' itemprop='name'>
          <data:post.title/>
        </h3>

        <div class='mobile-index-arrow'>&amp;rsaquo;</div>

        <div class='mobile-index-contents'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='mobile-index-thumbnail'>
              <div class='Image'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
            </div>
          </b:if>

          <div class='post-body'>
            <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
          </div>
        </div>

        <div style='clear: both;'/>
      </a>

      <div class='mobile-index-comment'>
        <b:include cond='data:blog.pageType != &quot;static_page&quot;                          and data:post.allowComments                          and data:post.numComments != 0' data='post' name='comment_count_picker'/>
      </div>
    </div>
  </div>
</b:includable>
                  <b:includable id='mobile-main' var='top'>
    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-index-post'/>
        </b:loop>
      <b:else/>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-post'/>
        </b:loop>
      </b:if>
    </div>

   <b:include name='mobile-nextprev'/>
</b:includable>
                  <b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
      </div>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
      </div>
    </b:if>

    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>

  </div>
  <div class='clear'/>
</b:includable>
                  <b:includable id='mobile-post' var='post'>
  <div class='date-outer'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <div class='date-posts'>
      <div class='post-outer'>

        <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
          <b:if cond='data:post.thumbnailUrl'>
            <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
          </b:if>
          <meta expr:content='data:blog.blogId' itemprop='blogId'/>
          <meta expr:content='data:post.id' itemprop='postId'/>

          <a expr:name='data:post.id'/>
          <b:if cond='data:post.title'>
            <h3 class='post-title entry-title' itemprop='name'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            </h3>
          </b:if>

          <div class='post-header'>
            <div class='post-header-line-1'/>
          </div>

          <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
            <data:post.body/>
            <div style='clear: both;'/> <!-- clear for photos floats -->
          </div>

          <div class='post-footer'>
            <div class='post-footer-line post-footer-line-1'>
              <span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>

              <span class='post-timestamp'>
                <b:if cond='data:top.showTimestamp'>
                  <data:top.timestampLabel/>
                  <b:if cond='data:post.url'>
                    <meta expr:content='data:post.url.canonical' itemprop='url'/>
                    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                  </b:if>
                </b:if>
              </span>

              <span class='post-comment-link'>
                <b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                                  and data:post.allowComments' data='post' name='comment_count_picker'/>
              </span>
            </div>

            <div class='post-footer-line post-footer-line-2'>
              <b:if cond='data:top.showMobileShare'>
                <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                  <a href='javascript:void(0);'><data:shareMsg/></a>
                </div>
              </b:if>
            </div>

          </div>
        </div>

        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
      </div>
    </div>
  </div>
</b:includable>
                  <b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>
                  <b:includable id='post' var='post'>
  <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
      <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
      </span>

      <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
          <b:if cond='data:post.url'>
            <meta expr:content='data:post.url.canonical' itemprop='url'/>
            <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
          </b:if>
        </b:if>
      </span>

      <span class='post-comment-link'>
        <b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                          and data:post.allowComments' data='post' name='comment_count_picker'/>
      </span>

      <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
            <img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>

      <!-- share buttons -->
      <div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
      </div>

      </div>

      <div class='post-footer-line post-footer-line-2'>
      <span class='post-labels'>
        <b:if cond='data:top.showPostLabels and data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
          </b:loop>
        </b:if>
      </span>
      </div>

      <div class='post-footer-line post-footer-line-3'>
      <span class='post-location'>
        <b:if cond='data:top.showLocation and data:post.location'>
          <data:postLocationLabel/>
          <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
        </b:if>
      </span>
      </div>
      <b:if cond='data:post.authorAboutMe'>
        <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
          <b:if cond='data:post.authorPhoto.url'>
            <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
          </b:if>
          <div>
            <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
              <span itemprop='name'><data:post.author/></span>
            </a>
          </div>
          <span itemprop='description'><data:post.authorAboutMe/></span>
        </div>
      </b:if>
    </div>
  </div>
</b:includable>
                  <b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>
                  <b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if>
</b:includable>
                  <b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>
                  <b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
    </script>
  </div>
</b:includable>
                  <b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        var text = (entry &&
                    ((entry.content && entry.content.$t) ||
                     (entry.summary && entry.summary.$t))) ||
            '';
        if (entry && entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + text + '</span>';
            }
          }
        }
        return text;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/comment/delete/'
               + config.blogId + '/' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          replybox.src = '';
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>
                  <b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
    </div>
    </div>
  </div>
</b:includable>
                </b:widget>
              </b:section>
            </div>
          </div>
          
          <!-- ============================================= -->
          <!-- SIDEBAR SECTION -->
          <!-- ============================================= -->
          <!-- 
          SIDEBAR: Akan disembunyikan di mode landing page.
          -->
          <aside class='bl-sidebar sidebar section' id='sidebar'>
            <div class='sidebar-inner'>
              <b:section class='sidebar' id='sidebar-right' preferred='yes' showaddelement='yes'/>
            </div>
          </aside>
          
        </div>
      </div>
    </div>
  </div>
  
  <!-- ============================================= -->
  <!-- FOOTER SECTION -->
  <!-- ============================================= -->
  <!-- 
  FOOTER: Akan disembunyikan di mode landing page.
  -->
  <footer class='bl-footer'>
    <div id='footer-wrapper'>
      <b:section class='footer' id='footer' preferred='yes' showaddelement='yes'/>
    </div>
  </footer>
  
  
  <!-- ============================================= -->
  <!-- SYSTEM INITIALIZATION SCRIPT -->
  <!-- ============================================= -->
  <script>
  //<![CDATA[
  /* ============================================= */
  /* BIZLINK FINAL INITIALIZATION */
  /* ============================================= */
  
  console.log('╔══════════════════════════════════════════╗');
  console.log('║        BIZLINK TEMPLATE v.1.0           ║');
  console.log('╠══════════════════════════════════════════╣');
  console.log('║ Template: BizLink - Smart Solution      ║');
  console.log('║ Version: 1.0                            ║');
  console.log('║ Status: Production Ready                ║');
  console.log('╚══════════════════════════════════════════╝');
  
  console.log('\n=== CARA PENGGUNAAN BIZLINK ===');
  console.log('1. Landing Page di Homepage:');
  console.log('   - Tambah widget HTML di section "home-landing"');
  console.log('   - Masukkan kode HTML landing page Anda');
  console.log('');
  console.log('2. Landing Page di Post:');
  console.log('   - Buat postingan dengan label "landing-page"');
  console.log('   - Otomatis tampil fullscreen');
  console.log('');
  console.log('3. Update Data JSON:');
  console.log('   - Gunakan widget di section "json-updater"');
  console.log('');
  console.log('4. Landing page akan otomatis:');
  console.log('   - Menghilangkan navbar, sidebar, footer');
  console.log('   - Tampil fullscreen tanpa elemen Blogger');
  //]]>
  
  // =============================================
// C Smart Protection - anti manual deletion
// =============================================
  // =============================================
  // PROTEKSI CREDIT - NEMPEL DI FOOTER
  // =============================================
  (function() {
    function checkAndRestoreCredit() {
      var credit = document.querySelector(&#39;.bl-credit-pro&#39;);
      if (!credit) {
        var footerContainer = document.querySelector(&#39;.bl-footer, .footer, .footer-section, #footer, .footer-wrapper, footer&#39;);
        if (!footerContainer) {
          footerContainer = document.body;
        }
        var wrapper = document.createElement(&#39;div&#39;);
        wrapper.className = &#39;bl-credit-footer&#39;;
        wrapper.style.cssText = &#39;text-align:center; padding:12px 0; margin-top:20px; border-top:1px solid rgba(255,255,255,0.1);&#39;;
        var newCredit = document.createElement(&#39;div&#39;);
        newCredit.className = &#39;bl-credit-pro&#39;;
        newCredit.style.cssText = &#39;display:inline-block; background:rgba(0,0,0,0.5); padding:5px 15px; border-radius:30px; font-size:9px; color:#ccc;&#39;;
        newCredit.innerHTML = &#39;<i class='fas fa-code'/> theme by <a href='https://bizlink.my.id' rel='noopener noreferrer' style='color:#FFD700; text-decoration:none;' target='_blank'>bizlink.my.id</a>&#39;;
        wrapper.appendChild(newCredit);
        footerContainer.appendChild(wrapper);
      }
    }
    
    setInterval(checkAndRestoreCredit, 2000);
    
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.type === &#39;childList&#39; &amp;&amp; mutation.removedNodes.length) {
          checkAndRestoreCredit();
        }
      });
    });
    observer.observe(document.body, { childList: true, subtree: true });
  })();
  
  </script>
  
  <!-- FOOTER CREDIT - NEMPEL DI FOOTER (TIDAK FLOATING) -->
  <div class='bl-credit-footer' style='text-align: center; padding: 12px 0; margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1);'>
    <div class='bl-credit-pro' style='display: inline-block; background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 30px; font-size: 9px; color: #ccc;'>
      <i class='fas fa-code'/> theme by <a href='https://bizlink.my.id' rel='noopener noreferrer' style='color: #FFD700; text-decoration: none;' target='_blank'>bizlink.my.id</a>
    </div>
  </div>

</body>
</html>