|
IDR 50.000 | Free Version Available
Tema Blogger Gratis Dengan Kualitas Premium
Nama TemaDECREATE FOLIO
PlatformBlogger.com
Versi GratisTidak bisa menghapus Credit Theme
Versi ProBisa mengedit Credit Theme
FiturCheckout Popup, Download Card, Generator Code untuk memasang card
LisensiPersonal untuk Free dan Developer untuk Pro
LainnyaTema gelap dan Terang (default gelap)
Data SecuritySecure Authentication API
Tanpa berlama-lama lagi segera beli Tema ini (Versi Gratis dibawah)
Beli SekarangCopy kode dibawah dan paste di editor tema anda. Atau download disini
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:blog.pageTitle/></title>
<link href='https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
<b:skin><![CDATA[
/* --- 1. CSS VARIABLES --- */
:root {
--bg-body: #0a0a0a;
--bg-nav: rgba(10, 10, 10, 0.95);
--bg-card: #161616;
--bg-overlay: rgba(0,0,0,0.95);
--text-main: #f0f0f0;
--text-muted: #888888;
--border: #2a2a2a;
--brand: #00E5FF;
--brand-text: #00E5FF;
--shadow: 0 10px 30px rgba(0,0,0,0.5);
}
body.light-mode {
--bg-body: #ffffff;
--bg-nav: rgba(255, 255, 255, 0.95);
--bg-card: #f4f4f4;
--bg-overlay: rgba(255,255,255,0.98);
--text-main: #1a1a1a;
--text-muted: #666666;
--border: #e0e0e0;
--brand: #0066FF;
--brand-text: #0052cc;
--shadow: 0 10px 30px rgba(0,0,0,0.05);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html {
overflow-x: hidden;
}
/* Class tambahan untuk mematikan scroll saat menu terbuka */
body.no-scroll {
overflow: hidden !important;
}
body {
background: var(--bg-body);
color: var(--text-main);
font-family: 'Outfit', sans-serif;
line-height: 1.6;
transition: background 0.3s ease, color 0.3s ease;
/* Padding agar konten tidak tertutup navbar fixed */
padding-top: 80px;
}
a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
/* --- FIXED NAVBAR --- */
.navbar {
position: fixed; /* Diubah dari sticky ke fixed */
top: 0;
left: 0;
width: 100%;
background: var(--bg-nav);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 15px 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
.logo { font-weight: 800; font-size: 24px; letter-spacing: -1px; z-index: 1001; }
.logo span { color: var(--brand-text); }
/* Desktop Menu */
.nav-menu { display: flex; gap: 30px; align-items: center; }
.nav-menu a {
color: var(--text-muted);
font-size: 14px;
font-weight: 600;
position: relative;
}
.nav-menu a:hover { color: var(--brand); }
.nav-menu a::after {
content: ''; position: absolute; bottom: -5px; left: 0; width: 0%; height: 2px;
background: var(--brand); transition: 0.3s;
}
.nav-menu a:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 15px; z-index: 1001; }
.nav-btn {
background: transparent; border: none;
color: var(--text-main); font-size: 18px;
cursor: pointer; padding: 8px;
border-radius: 50%; transition: 0.3s;
}
.nav-btn:hover { color: var(--brand); background: rgba(128,128,128,0.1); }
/* Hamburger Toggle (Hidden on Desktop) */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1002; }
.hamburger span { width: 25px; height: 2px; background: var(--text-main); transition: 0.3s; }
/* --- 4. HERO SECTION --- */
.hero-wrapper {
padding: 100px 20px 60px 20px;
text-align: center;
border-bottom: 1px solid var(--border);
margin-bottom: 60px;
}
.hero-title {
font-size: 56px; line-height: 1.1; margin-bottom: 20px; font-weight: 700;
background: linear-gradient(to right, var(--text-main), var(--text-muted));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-desc { font-size: 20px; color: var(--text-muted); max-width: 600px; margin: 0 auto; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.section-label {
display: block; margin-bottom: 30px;
font-size: 12px; color: var(--brand-text);
text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
padding-bottom: 80px;
}
.post-card {
background: var(--bg-card);
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
transition: transform 0.3s ease;
display: flex; flex-direction: column;
height: 100%;
}
.post-card:hover { transform: translateY(-5px); border-color: var(--brand); }
.post-thumb-link { height: 220px; overflow: hidden; position: relative; }
.post-thumb { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.post-card:hover .post-thumb { transform: scale(1.05); }
.card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.post-tag { font-size: 10px; color: var(--brand-text); font-weight:700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;}
.card-title { font-size: 20px; margin-bottom: 10px; font-weight: 700; line-height: 1.3; }
.card-snippet { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.read-more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--text-main); }
/* --- 6. EXTRA HERO SECTIONS (BOTTOM) --- */
.extra-section { padding: 80px 20px; border-top: 1px solid var(--border); text-align: center; }
.extra-section h2 { font-size: 36px; margin-bottom: 20px; }
.extra-section p { color: var(--text-muted); max-width: 600px; margin: 0 auto 40px auto; }
.process-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; text-align: left;
}
.process-card {
padding: 30px; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border);
}
.process-number { font-size: 40px; font-weight: 700; color: var(--brand); opacity: 0.3; margin-bottom: 10px; }
.process-card h3 { font-size: 20px; margin-bottom: 10px; }
.process-card p { font-size: 14px; margin: 0; }
.cta-box {
background: linear-gradient(45deg, #111, #222);
padding: 60px; border-radius: 20px; border: 1px solid var(--border);
position: relative; overflow: hidden;
}
.cta-btn {
display: inline-block; padding: 15px 40px; background: var(--brand); color: #000;
font-weight: 700; border-radius: 50px; margin-top: 30px;
}
/* --- 7. SEARCH OVERLAY --- */
.search-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: var(--bg-overlay);
z-index: 2000;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
opacity: 0; visibility: hidden;
transition: 0.3s; backdrop-filter: blur(10px);
}
.search-overlay.active { opacity: 1; visibility: visible; }
.close-search { position: absolute; top: 30px; right: 30px; font-size: 30px; cursor: pointer; }
.search-input {
width: 80%; background: transparent; border: none; border-bottom: 2px solid var(--text-muted);
font-size: 32px; color: var(--text-main); padding: 15px 0; text-align: center; outline: none;
}
/* --- 8. MOBILE RESPONSIVE LOGIC --- */
@media (max-width: 900px) {
.hamburger { display: flex; }
/* Mobile Menu Styles */
.nav-menu {
position: fixed; top: 0; right: -100%;
width: 100%; /* Full width agar menutupi layar */
height: 100vh;
background: var(--bg-body);
flex-direction: column;
justify-content: center;
align-items: center;
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
visibility: hidden;
opacity: 0;
/* Hapus border left dan shadow karena full width */
border-left: none;
box-shadow: none;
z-index: 1000;
}
.nav-menu.active {
right: 0;
visibility: visible;
opacity: 1;
}
.nav-menu a { font-size: 24px; margin: 15px 0; opacity: 0; transform: translateY(20px); transition: 0.5s ease; }
.nav-menu.active a { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.search-input {
font-size: 20px;
width: 90%;
}
.close-search {
top: 20px; right: 20px; font-size: 24px;
}
.hero-title { font-size: 40px; }
.hero-desc { font-size: 16px; }
.extra-section h2 { font-size: 28px; }
.container { padding: 0 20px; }
.grid-container { grid-template-columns: 1fr; gap: 20px; }
.cta-box { padding: 40px 20px; }
}
.article-wrapper { max-width: 800px; margin: 40px auto; }
.article-title { font-size: 32px; }
.post-body img { width: 100%; height: auto; }
.post-body a { color:var(--brand) }
footer { border-top: 1px solid var(--border); padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 12px; }
.back-to-top { position: fixed; bottom: 20px; right: 20px; background: var(--brand); width: 45px; height: 45px; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; opacity:0; transition:0.3s; z-index:99;}
.back-to-top.show { opacity:1; }
ul {
list-style: none;
padding-left: 0;
margin: 12px 0;
}
ul li {
position: relative;
padding-left: 20px;
margin: 6px 0;
}
ul li::before {
content: "";
width: 8px;
height: 8px;
background: var(--brand);
border-radius: 50%;
position: absolute;
top: 8px;
left: 0;
}
blockquote {
margin: 20px 0;
padding: 16px 20px;
background: var(--bg-card);
border-left: 4px solid var(--brand);
color: var(--text-main);
border-radius: 10px;
line-height: 1.6;
box-shadow: var(--shadow);
}
blockquote p {
margin: 0;
}
blockquote strong {
color: var(--brand-text);
}
blockquote::before {
content: '"';
font-size: 34px;
line-height: 0;
margin-right: 6px;
color: var(--brand);
vertical-align: -10px;
}
blockquote::after {
content: '"';
font-size: 34px;
line-height: 0;
margin-left: 6px;
color: var(--brand);
vertical-align: -10px;
}
.product-full {
width: 100%;
background: var(--bg-card);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow);
margin: 20px 0;
}
.product-image img {
width: 100%;
height: 380px;
object-fit: cover;
background: #ddd;
}
.product-info {
padding: 24px;
color: var(--text-main);
}
.product-title {
font-size: 26px;
margin: 0 0 6px;
font-weight: 600;
}
.product-price {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
color: var(--brand);
}
.product-specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px 20px;
margin-bottom: 26px;
}
.product-specs strong {
display: block;
color: var(--text-muted);
font-size: 13px;
}
.product-specs span {
font-size: 15px;
line-height: 1.4;
color: var(--text-main);
}
.buy-full {
background: var(--brand);
border: none;
width: 100%;
padding: 14px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
color: #000;
transition: .25s;
}
.buy-full:hover {
background: var(--brand-text);
color: #fff;
}
.download-full {
width: 100%;
background: var(--bg-card);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow);
margin: 22px 0;
color: var(--text-main);
}
.download-image img {
width: 100%;
height: 340px;
object-fit: cover;
background: #ddd;
}
.download-info {
padding: 24px;
}
.download-title {
font-size: 26px;
margin: 0 0 14px;
font-weight: 600;
color: var(--text-main);
}
.download-specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px 22px;
margin-bottom: 26px;
}
.download-specs strong {
display: block;
font-size: 13px;
color: var(--text-muted);
}
.download-specs span {
font-size: 15px;
color: var(--text-main);
}
.download-btn {
width: 100%;
padding: 14px;
background: var(--brand);
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: .25s ease;
color: #000;
}
.download-btn:hover {
background: var(--brand-text);
color: #fff;
}
.dl-card {
width: 100%;
background: var(--bg-card);
border-radius: 14px;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
box-shadow: var(--shadow);
border: 1px solid var(--border);
}
.dl-icon {
width: 48px;
height: 48px;
background: #2d2d2d;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-main);
font-size: 14px;
text-transform: uppercase;
flex-shrink: 0;
}
.dl-info {
flex: 1;
}
.dl-name {
font-size: 15px;
font-weight: 600;
color: var(--text-main);
}
.dl-size {
font-size: 13px;
color: var(--text-muted);
margin-top: 3px;
}
.dl-btn {
background: var(--brand);
color: #fff!Important;
padding: 12px 20px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
white-space: nowrap;
transition: .25s ease;
}
.dl-btn:hover {
background: #695aff;
}
.popupbelanja {
all: unset;
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
display: none; /* default tertutup */
align-items: center !important;
justify-content: center !important;
background: var(--bg-nav);
backdrop-filter: blur(3px);
z-index: 999999 !important;
padding: 0 !important;
}
.popupbelanja-box {
background: var(--bg-body);
width: 340px;
max-width: 92%;
padding: 25px;
border-radius: 14px;
position: relative;
box-shadow: 0 10px 35px rgba(0,0,0,0.15);
animation: popupFadeIn .25s ease-out;
}
@keyframes popupFadeIn {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
.popupbelanja-box input,
.popupbelanja-box select {
width: 100%;
padding: 12px 14px;
margin: 8px 0 14px 0;
border: 1px solid #d0d0d0;
border-radius: 8px;
font-size: 15px;
background: #fafafa;
transition: 0.25s;
}
.popupbelanja-box input:focus,
.popupbelanja-box select:focus {
border-color: #007bff;
background: white;
box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}
.popupbelanja-btn {
width: 100%;
padding: 12px;
background: var(--brand);
color: #ffffff;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 15px;
letter-spacing: 0.3px;
transition: background 0.25s, transform 0.2s;
margin-bottom:10px;
text-align: center;
}
.popupbelanja-btn:hover {
opacity:75%;
transform: translateY(-1px);
}
#customAlert {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: none; /* default hidden */
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.35);
backdrop-filter: blur(3px);
z-index: 10000;
padding: 20px;
}
.customAlertBox {
background: #ffffff;
padding: 22px 24px;
border-radius: 14px;
min-width: 260px;
max-width: 90%;
text-align: center;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
border: 1px solid #e6e6e6;
animation: popIn .25s ease;
}
.customAlertBox p {
color: #333;
font-size: 15px;
line-height: 1.4;
margin-bottom: 18px;
}
.customAlertBox button {
padding: 8px 18px;
border: none;
border-radius: 8px;
background: var(--lLinkC);
color: white;
font-size: 14px;
cursor: pointer;
transition: .2s ease;
}
.customAlertBox button:hover {
opacity: 75%;
}
#ContactForm1 {
background: var(--bg-card);
padding: 32px;
border-radius: 20px;
box-shadow: var(--shadow);
color: var(--text-main);
max-width: 650px;
margin: 40px auto;
border: 1px solid var(--border);
}
/* === LABEL === */
#ContactForm1 .contact-form-label {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 6px;
font-weight: 500;
}
/* === INPUT + TEXTAREA === */
#ContactForm1 input[type="text"],
#ContactForm1 input[type="email"],
#ContactForm1 textarea {
width: 100%;
padding: 14px 16px;
background: #1c1c1c;
color: var(--text-main);
border: 1px solid var(--border);
border-radius: 12px;
font-size: 14px;
transition: border 0.2s, background 0.2s;
outline: none;
}
body.light-mode #ContactForm1 input[type="text"],
body.light-mode #ContactForm1 input[type="email"],
body.light-mode #ContactForm1 textarea {
background: #fff;
}
#ContactForm1 input:focus,
#ContactForm1 textarea:focus {
border-color: var(--brand);
background: rgba(0,0,0,0.25);
}
body.light-mode #ContactForm1 input:focus,
body.light-mode #ContactForm1 textarea:focus {
background: rgba(0,0,0,0.05);
}
/* === TEXTAREA ADJUST === */
#ContactForm1 textarea {
height: 160px;
resize: vertical;
}
/* === BUTTON === */
#ContactForm1_contact-form-submit {
width: 100%;
padding: 14px;
margin-top: 10px;
background: var(--brand);
color: #000;
border: none;
font-size: 15px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
transition: opacity 0.2s, transform 0.1s;
}
#ContactForm1_contact-form-submit:hover {
opacity: .9;
}
#ContactForm1_contact-form-submit:active {
transform: scale(.97);
}
/* === SUCCESS & ERROR === */
#ContactForm1_contact-form-error-message,
#ContactForm1_contact-form-success-message {
margin-top: 15px;
padding: 12px;
border-radius: 10px;
font-size: 14px;
text-align: center;
}
/* Error */
#ContactForm1_contact-form-error-message {
background: rgba(255,0,0,0.15);
color: #ff6d6d;
display: none;
}
/* Success */
#ContactForm1_contact-form-success-message {
background: rgba(0,255,170,0.18);
color: #00e89b;
display: none;
}
]]></b:skin>
</head>
<body>
<!-- Popup Belanja -->
<div class='popupbelanja' style='display:none;'>
<div class='popupbelanja-box'>
<h2>Formulir Pembelian</h2>
<p>Product: <b id='popupTitle'/></p>
<form onsubmit='popupBelanjaKirim(event)'>
<input name='nama' placeholder='Nama lengkap' required='' type='text'/>
<input name='email' placeholder='Email' required='' type='email'/>
<input name='telepon' placeholder='Nomor telepon' required='' type='tel'/>
<select name='metode' required=''>
<option disabled='' selected='' value=''>Pilih metode pembayaran</option>
<option value='Dana'>Dana</option>
<option value='Ovo'>Ovo</option>
<option value='Gopay'>Gopay</option>
<option value='Transfer Bank'>Transfer Bank</option>
</select>
<button class='popupbelanja-btn' type='submit'>Kirim</button><br/>
<p class='note'>Klik Sembarang Untuk Menutup Popup</p>
</form>
</div>
</div>
<div id='customAlert' style='display:none;'>
<div class='customAlertBox'>
<p id='customAlertMessage'/>
<button id='customAlertBtn'>OK</button>
</div>
</div>
<!-- Akhir Popup Belanja -->
<!-- Navbar -->
<nav class='navbar'>
<div class='logo'><a href='/'>DECREATE<span>FOLIO</span>.</a></div>
<!-- Desktop & Mobile Menu Container -->
<div class='nav-menu' id='navMenu'>
<a href='/'>Home</a>
<a href='/search'>Project</a>
<a href='/#services'>Process</a>
<a href='/#cta'>CTA</a>
<a href='/p/contact.html'>Contact</a>
<a href='/p/about.html'>About</a>
</div>
<div class='nav-actions'>
<button class='nav-btn' id='search-btn'><i class='fas fa-search'/></button>
<button class='nav-btn' id='theme-toggle'><i class='fas fa-moon' id='theme-icon'/></button>
<!-- Hamburger Icon Mobile -->
<div class='hamburger' id='hamburger'>
<span/>
<span/>
<span/>
</div>
</div>
</nav>
<!-- Search Overlay -->
<div class='search-overlay' id='search-overlay'>
<div class='close-search' id='close-search'>x</div>
<form action='/search' class='search-form' method='get'>
<input class='search-input' name='q' placeholder='Type keywords...' type='text'/>
</form>
</div>
<!-- Hero Section (Homepage Only) -->
<b:if cond='data:view.isHomepage'>
<div class='hero-wrapper'>
<h1 class='hero-title'>Percayakan Designmu<br/>Pada Kami</h1>
<p class='hero-desc'>Professional, Terpercaya, dan Terbaik pada Bidangnya</p>
</div>
</b:if>
<b:if cond='data:view.isSearch'>
<span class='section-label' style='text-align:center;'>Our Project</span>
</b:if>
<!-- Main Content -->
<div class='container'>
<b:if cond='data:view.isHomepage'>
<span class='section-label'>Our Project</span>
</b:if>
<!-- Blogger Widget (Looping Postingan) -->
<b:section id='main'>
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='2' visible='true'>
<b:includable id='main'>
<b:attr name='id' value=''/>
<b:attr name='class' value=''/>
<b:attr name='style' value='display:none'/>
</b:includable>
<b:includable id='content'>
<!--removed-->
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='commentLabel'>comments</b:widget-setting>
<b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='postLocationLabel'>Location:</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'/>
<b:widget-setting name='reactionsLabel'/>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>true</b:widget-setting>
<b:widget-setting name='postLabelsLabel'/>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- GRID LOOP -->
<b:if cond='data:view.isMultipleItems'>
<div class='grid-container'>
<b:loop values='data:posts' var='post'>
<article class='post-card'>
<a class='post-thumb-link' expr:href='data:post.url'>
<b:if cond='data:post.featuredImage'>
<img alt='Thumbnail' class='post-thumb' expr:src='data:post.featuredImage'/>
<b:else/>
<div style='width:100%; height:100%; background:var(--bg-card); display:flex; align-items:center; justify-content:center;'>No Img</div>
</b:if>
</a>
<div class='card-content'>
<span class='post-tag'>
<b:if cond='data:post.labels'><data:post.labels.first.name/><b:else/>Project</b:if>
</span>
<h2 class='card-title'><a expr:href='data:post.url'><data:post.title/></a></h2>
<div class='card-snippet'><data:post.snippet/></div>
<a class='read-more' expr:href='data:post.url'>View Project →</a>
</div>
</article>
</b:loop>
</div>
<div style='text-align:center; margin-bottom:50px;'>
<b:if cond='data:olderPageUrl'>
<a class='read-more' expr:href='data:olderPageUrl' style='font-size:16px;'>Load More Projects</a>
</b:if>
</div>
<!-- SINGLE POST VIEW -->
<b:elseif cond='data:view.isSingleItem'/>
<b:loop values='data:posts' var='post'>
<div class='article-wrapper'>
<div style='text-align:center; margin-bottom:40px; padding-bottom:30px; border-bottom:1px solid var(--border);'>
<span class='post-tag' style='font-size:12px;'><b:if cond='data:post.labels'><data:post.labels.first.name/></b:if></span>
<h1 class='article-title' style='margin-top:10px;'><data:post.title/></h1>
<div style='color:var(--text-muted); font-size:14px; margin-top:10px;'><data:post.date/></div>
</div>
<div class='post-body'>
<data:post.body/>
</div>
</div>
</b:loop>
</b:if>
</b:includable>
<b:includable id='aboutPostAuthor'>
<div class='author-name'>
<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
<span>
<data:post.author.name/>
</span>
</a>
</div>
<div>
<span class='author-desc'>
<data:post.author.aboutMe/>
</span>
</div>
</b:includable>
<b:includable id='addComments'>
<a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:message name='messages.postAComment'/>
</a>
</b:includable>
<b:includable id='blogThisShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='bylineByName' var='byline'>
<b:switch var='data:byline.name'>
<b:case value='share'/>
<b:include cond='data:post.shareUrl' name='postShareButtons'/>
<b:case value='comments'/>
<b:include cond='data:post.allowComments' name='postCommentsLink'/>
<b:case value='location'/>
<b:include cond='data:post.location' name='postLocation'/>
<b:case value='timestamp'/>
<b:include cond='not data:view.isPage' name='postTimestamp'/>
<b:case value='author'/>
<b:include name='postAuthor'/>
<b:case value='labels'/>
<b:include cond='data:post.labels' name='postLabels'/>
<b:case value='icons'/>
<b:include cond='data:post.emailPostUrl' name='emailPostIcon'/>
</b:switch>
</b:includable>
<b:includable id='bylineRegion' var='regionItems'>
<b:loop values='data:regionItems' var='byline'>
<b:include data='byline' name='bylineByName'/>
</b:loop>
</b:includable>
<b:includable id='commentAuthorAvatar'>
<div class='avatar-image-container'>
<img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='commentForm' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:messages.postAComment/></h4>
<b:if cond='data:this.messages.blogComment != ""'>
<p><data:this.messages.blogComment/></p>
</b:if>
<b:include data='post' name='commentFormIframeSrc'/>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentFormIframeSrc' var='post'>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
</b:includable>
<b:includable id='commentItem' var='comment'>
<div class='comment' expr:id='"c" + data:comment.id'>
<b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
<div class='comment-block'>
<div class='comment-author'>
<b:if cond='data:comment.authorUrl'>
<b:message name='messages.authorSaidWithLink'>
<b:param expr:value='data:comment.author' name='authorName'/>
<b:param expr:value='data:comment.authorUrl' name='authorUrl'/>
</b:message>
<b:else/>
<b:message name='messages.authorSaid'>
<b:param expr:value='data:comment.author' name='authorName'/>
</b:message>
</b:if>
</div>
<div expr:class='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'>
<data:comment.body/>
</div>
<div class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</div>
</div>
</b:includable>
<b:includable id='commentList' var='comments'>
<div id='comments-block'>
<b:loop values='data:comments' var='comment'>
<b:include data='comment' name='commentItem'/>
</b:loop>
</div>
</b:includable>
<b:includable id='commentPicker' var='post'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threadedComments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<section expr:class='"comments" + (data:post.embedCommentForm ? " embed" : "")' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:include name='commentsTitle'/>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<b:include cond='data:post.comments' data='post.comments' name='commentList'/>
</div>
<b:if cond='data:post.commentPagingRequired'>
<div class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:messages.oldest/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:messages.older/>
</a>
</b:if>
<span class='comment-range-text'>
<data:post.commentRangeText/>
</span>
<b:if cond='data:post.hasNewerLinks'>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:messages.newer/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:messages.newest/>
</a>
</b:if>
</div>
</b:if>
<div class='footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='commentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='addComments'/>
</b:if>
</b:if>
</div>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</section>
</b:includable>
<b:includable id='commentsLink'>
<a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:if cond='data:post.numberOfComments > 0'>
<b:message name='messages.numberOfComments'>
<b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>
<b:else/>
<data:messages.postAComment/>
</b:if>
</a>
</b:includable>
<b:includable id='commentsLinkIframe'>
<!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='commentsTitle'>
<h3 class='title'><data:messages.comments/></h3>
</b:includable>
<b:includable id='defaultAdUnit'>
<ins class='adsbygoogle' data-ad-format='auto' expr:data-ad-client='data:adClientId ?: data:blog.adsenseClientId' expr:data-ad-host='data:blog.adsenseHostId' expr:style='data:style ?: "display: block;"'>
<b:attr cond='not data:blog.analytics4' expr:value='data:blog.analyticsAccountNumber' name='data-analytics-uacct'/>
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:includable>
<b:includable id='emailPostIcon'>
<span class='byline post-icons'>
<!-- email post links -->
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:messages.emailPost'>
<b:include data='{ iconClass: "touch-icon sharing-icon" }' name='emailIcon'/>
</a>
</span>
</span>
</b:includable>
<b:includable id='facebookShare'>
<b:with value='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='!data:view.isPost'> <!-- 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:if cond='data:post.allowComments and data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:messages.subscribeTo/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='footerBylines'>
<b:if cond='data:widgets.Blog.first.footerBylines'>
<b:loop index='i' values='data:widgets.Blog.first.footerBylines' var='region'>
<b:if cond='not data:region.items.empty'>
<div expr:class='"post-footer-line post-footer-line-" + (data:i + 1)'>
<b:with value='"footer-" + (data:i + 1)' var='regionName'>
<b:include data='region.items' name='bylineRegion'/>
</b:with>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
<b:includable id='googlePlusShare'>
</b:includable>
<b:includable id='headerByline'>
<b:if cond='data:widgets.Blog.first.headerByline'>
<div class='post-header'>
<div class='post-header-line-1'>
<b:with value='"header-1"' var='regionName'>
<b:include data='data:widgets.Blog.first.headerByline.items' name='bylineRegion'/>
</b:with>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='homePageLink'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:messages.home/>
</a>
</b:includable>
<b:includable id='iframeComments' var='post'>
<!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='inlineAd' var='post'>
<b:if cond='!data:view.isPreview'>
<b:if cond='data:this.adCode or data:this.adClientId or data:blog.adsenseClientId'>
<!-- Ad -->
<div class='inline-ad'>
<b:if cond='data:this.adCode != ""'>
<data:this.adCode/>
<b:else/>
<b:include cond='data:this.adClientId or data:blog.adsenseClientId' name='defaultAdUnit'/>
</b:if>
</div>
</b:if>
<b:else/>
<div class='inline-ad'>
<div class='inline-ad-placeholder'>
<span><b:message name='messages.adsGoHere'/></span>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='linkShare'>
<b:with value='"window.prompt(\"Copy to clipboard: Ctrl+C, Enter\", \"" + data:originalUrl + "\"); return false;"' var='onclick'>
<b:include name='platformShare'/>
</b:with>
</b:includable>
<b:includable id='nextPageLink'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:messages.olderPosts'>
<data:messages.olderPosts/>
</a>
</b:includable>
<b:includable id='otherSharingButton'>
<span class='sharing-platform-button sharing-element-other' expr:aria-label='data:messages.shareToOtherApps.escaped' expr:data-url='data:originalUrl' expr:title='data:messages.shareToOtherApps.escaped' role='menuitem' tabindex='-1'>
<b:with value='{key: "sharingOther"}' var='platform'>
<b:include name='sharingPlatformIcon'/>
</b:with>
<span class='platform-sharing-text'><data:messages.shareOtherApps.escaped/></span>
</span>
</b:includable>
<b:includable id='platformShare'>
<a expr:class='"goog-inline-block sharing-" + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + "&target=" + data:platform.target' expr:onclick='data:onclick ? data:onclick : ""' expr:title='data:platform.shareMessage' target='_blank'>
<span class='share-button-link-text'>
<data:platform.shareMessage/>
</span>
</a>
</b:includable>
<b:includable id='post' var='post'>
<div class='post'>
<b:include data='post' name='postMeta'/>
<b:include data='post' name='postTitle'/>
<b:include name='headerByline'/>
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='postBody'/>
<b:else/>
<b:include data='post' name='postBodySnippet'/>
<b:include data='post' name='postJumpLink'/>
</b:if>
<b:include data='post' name='postFooter'/>
</div>
</b:includable>
<b:includable id='postAuthor'>
<span class='byline post-author vcard'>
<span class='post-author-label'>
<data:byline.label/>
</span>
<span class='fn'>
<b:if cond='data:post.author.profileUrl'>
<meta expr:content='data:post.author.profileUrl'/>
<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
<span><data:post.author.name/></span>
</a>
<b:else/>
<span><data:post.author.name/></span>
</b:if>
</span>
</span>
</b:includable>
<b:includable id='postBody' var='post'>
<!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
<div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
</div>
</b:includable>
<b:includable id='postBodySnippet' var='post'>
<b:include data='post' name='postBody'/>
</b:includable>
<b:includable id='postCommentsAndAd' var='post'>
<article class='post-outer-container'>
<!-- Post title and body -->
<div class='post-outer'>
<b:include data='post' name='post'/>
</div>
<!-- Comments -->
<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
<!-- Show ad inside post container, after comments, if single item. -->
<b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd'/>
</article>
<!-- Show ad outside post container (between posts) for feed pages. -->
<b:include cond='data:view.isMultipleItems and data:post.includeAd' data='post' name='inlineAd'/>
</b:includable>
<b:includable id='postCommentsLink'>
<b:if cond='data:view.isMultipleItems'>
<span class='byline post-comment-link container'>
<b:include cond='data:post.commentSource != 1' name='commentsLink'/>
</span>
</b:if>
</b:includable>
<b:includable id='postFooter' var='post'>
<div class='post-footer'>
<b:include name='footerBylines'/>
<b:include data='post' name='postFooterAuthorProfile'/>
</div>
</b:includable>
<b:includable id='postFooterAuthorProfile' var='post'>
<b:if cond='data:post.author.aboutMe and data:view.isPost'>
<div class='author-profile'>
<b:if cond='data:post.author.authorPhoto.url'>
<img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>
<div class='author-about'>
<b:include data='post' name='aboutPostAuthor'/>
</div>
<b:else/>
<b:include data='post' name='aboutPostAuthor'/>
</b:if>
</div>
</b:if>
</b:includable>
<b:includable id='postHeader' var='post'>
<b:include name='headerByline'/>
</b:includable>
<b:includable id='postJumpLink' var='post'>
<div class='jump-link flat-button'>
<a expr:href='data:post.url fragment "more"' expr:title='data:post.title'>
<b:eval expr='data:blog.jumpLinkMessage'/>
</a>
</div>
</b:includable>
<b:includable id='postLabels'>
<span class='byline post-labels'>
<span class='byline-label'><data:byline.label/></span>
<b:loop index='i' values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:loop>
</span>
</b:includable>
<b:includable id='postLocation'>
<span class='byline post-location'>
<data:byline.label/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</span>
</b:includable>
<b:includable id='postMeta' var='post'>
<b:include data='post' name='postMetadataJSON'/>
</b:includable>
<b:includable id='postMetadataJSONImage'>
"image": {
"@type": "ImageObject",
<b:if cond='data:post.featuredImage.isResizable'>
"url": "<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:630")'/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/w1200/",
"height": 348,
"width": 1200
</b:if>
},
</b:includable>
<b:includable id='postMetadataJSONPublisher'>
"publisher": {
"@type": "Organization",
"name": "Blogger",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/",
"width": 206,
"height": 60
}
},
</b:includable>
<b:includable id='postPagination'>
<div class='blog-pager container' id='blog-pager'>
<b:include cond='data:newerPageUrl' name='previousPageLink'/>
<b:include cond='data:olderPageUrl' name='nextPageLink'/>
<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
</div>
</b:includable>
<b:includable id='postReactions'>
<!-- Reaction feature no longer available. The includable is retained for backwards-compatibility. -->
</b:includable>
<b:includable id='postShareButtons'>
<div class='byline post-share-buttons goog-inline-block'>
<b:with value='data:sharingId ?: ((data:widget.instanceId ?: "sharing") + "-" + (data:regionName ?: "byline") + "-" + data:post.id)' var='sharingId'>
<!-- Note: 'sharingButtons' includable is from the default Sharing widget markup. -->
<b:include data='{ sharingId: data:sharingId, originalUrl: data:post.url, platforms: data:this.sharing.platforms, shareUrl: data:post.shareUrl, shareTitle: data:post.title, }' name='sharingButtons'/>
</b:with>
</div>
</b:includable>
<b:includable id='postTimestamp'>
<span class='byline post-timestamp'>
<data:byline.label/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
<data:post.date/>
</time>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title != ""'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
</b:includable>
<b:includable id='previousPageLink'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:messages.newerPosts'>
<data:messages.newerPosts/>
</a>
</b:includable>
<b:includable id='sharingButton'>
<span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-href='data:shareUrl + "&target=" + data:platform.target' expr:data-url='data:originalUrl' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'>
<b:include name='sharingPlatformIcon'/>
<span class='platform-sharing-text'><data:platform.name/></span>
</span>
</b:includable>
<b:includable id='sharingButtonContent'>
<div class='flat-icon-button ripple'>
<b:include name='shareIcon'/>
</div>
</b:includable>
<b:includable id='sharingButtons'>
<div class='sharing' expr:aria-owns='"sharing-popup-" + data:sharingId' expr:data-title='data:shareTitle'>
<button class='sharing-button touch-icon-button' expr:aria-controls='"sharing-popup-" + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-button-" + data:sharingId' role='button'>
<b:include name='sharingButtonContent'/>
</button>
<b:include name='sharingButtonsMenu'/>
</div>
</b:includable>
<b:includable id='sharingButtonsMenu'>
<div class='share-buttons-container'>
<ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='"sharing-popup-" + data:sharingId' role='menu'>
<b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p => p.key not in {"blogThis"})' var='platform'>
<li>
<b:include name='sharingButton'/>
</li>
</b:loop>
<li aria-hidden='true' class='hidden'>
<b:include name='otherSharingButton'/>
</li>
</ul>
</div>
</b:includable>
<b:includable id='sharingPlatformIcon'>
<b:include data='{ iconClass: ("touch-icon sharing-" + data:platform.key) }' expr:name='data:platform.key + "Icon"'/>
</b:includable>
<b:includable id='threadedCommentForm' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:messages.postAComment/></h4>
<b:if cond='data:this.messages.blogComment != ""'>
<p><data:this.messages.blogComment/></p>
</b:if>
<b:include data='post' name='commentFormIframeSrc'/>
<iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: "90px"' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='threadedCommentJs' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<b:template-script inline='true' name='threaded_comments'/>
<script type='text/javascript'>
blogger.widgets.blog.initThreadedComments(
<data:post.commentJso/>,
<data:post.commentMsgs/>,
<data:post.commentConfig/>);
</script>
</b:includable>
<b:includable id='threadedComments' var='post'>
<section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<a name='comments'/>
<b:include name='commentsTitle'/>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threadedCommentJs'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threadedCommentForm'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:if cond='data:post.showManageComments'>
<b:include data='post' name='manageComments'/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
</section>
</b:includable>
<b:includable id='tooltipCss'>
<!-- LINT.IfChange -->
<style>
.post-body a.b-tooltip-container {
position: relative;
display: inline-block;
}
.post-body a.b-tooltip-container .b-tooltip {
display: block !important;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-20%, 1px);
visibility: hidden;
opacity: 0;
z-index: 1;
transition: opacity 0.2s ease-in-out;
}
.post-body a.b-tooltip-container .b-tooltip iframe {
width: 200px;
height: 198px;
max-width: none;
border: none;
border-radius: 20px;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
}
@media (hover: hover) {
.post-body a.b-tooltip-container:hover .b-tooltip {
visibility: visible;
opacity: 1;
}
}
</style>
<!-- LINT.ThenChange(//depot/google3/java/com/google/blogger/b2/layouts/widgets/v2-style.css) -->
</b:includable>
</b:widget>
</b:section>
</div>
<!-- EXTRA HERO SECTIONS (HANYA MUNCUL DI HOMEPAGE) -->
<b:if cond='data:view.isHomepage'>
<!-- Section 1: Process -->
<div class='extra-section' id='services'>
<div class='container'>
<h2>How We Work</h2>
<p>Pendekatan strategis kami memastikan hasil yang berdampak bagi bisnis Anda.</p>
<div class='process-grid'>
<div class='process-card'>
<div class='process-number'>01</div>
<h3>Discovery</h3>
<p>Menganalisis brand value dan target audience Anda secara mendalam.</p>
</div>
<div class='process-card'>
<div class='process-number'>02</div>
<h3>Strategy</h3>
<p>Menyusun roadmap visual dan konsep yang selaras dengan tujuan bisnis.</p>
</div>
<div class='process-card'>
<div class='process-number'>03</div>
<h3>Design</h3>
<p>Mengeksekusi ide menjadi aset visual berkualitas tinggi dan modern.</p>
</div>
</div>
</div>
</div>
<!-- Section 2: CTA (Call To Action) -->
<div class='container' id='cta' style='padding-bottom: 80px;'>
<div class='cta-box'>
<div style='position:relative; z-index:2; text-align:center;'>
<h2 style='font-size:32px; margin-bottom:15px; color:#fff;'>Ready to Start a Project?</h2>
<p style='color:#aaa;'>Mari berkolaborasi untuk menciptakan sesuatu yang luar biasa.</p>
<a class='cta-btn' href='/p/contact.html'>Start Now</a>
</div>
</div>
</div>
</b:if>
<!-- Footer & Back to Top -->
<div class='back-to-top' id='backToTop'><i class='fas fa-arrow-up' style='color:#000;'/></div>
<footer>
<p>© <data:blog.title/> | <span>Theme by : <a href='https://maliksiz.my.id'>Maliksiz</a></span></p>
<!-- Footer Social Media -->
<div style='margin-top:10px;'>
<a href='#'><i class='fab fa-instagram' style='margin:0 10px;'/></a>
<a href='#'><i class='fab fa-twitter' style='margin:0 10px;'/></a>
<a href='#'><i class='fab fa-linkedin' style='margin:0 10px;'/></a>
</div>
</footer>
<script>
// 1. THEME TOGGLE
const toggleBtn = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
const body = document.body;
if (localStorage.getItem('theme') === 'light') {
body.classList.add('light-mode');
themeIcon.classList.remove('fa-moon'); themeIcon.classList.add('fa-sun');
}
toggleBtn.addEventListener('click', () => {
body.classList.toggle('light-mode');
if (body.classList.contains('light-mode')) {
themeIcon.classList.remove('fa-moon'); themeIcon.classList.add('fa-sun');
localStorage.setItem('theme', 'light');
} else {
themeIcon.classList.remove('fa-sun'); themeIcon.classList.add('fa-moon');
localStorage.setItem('theme', 'dark');
}
});
const searchBtn = document.getElementById('search-btn');
const searchOverlay = document.getElementById('search-overlay');
const closeSearch = document.getElementById('close-search');
searchBtn.addEventListener('click', () => {
searchOverlay.classList.add('active');
document.querySelector('.search-input').focus();
});
closeSearch.addEventListener('click', () => searchOverlay.classList.remove('active'));
// HAMBURGER MENU & SCROLL LOCK LOGIC
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('navMenu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active'); // Animasi icon
navMenu.classList.toggle('active'); // Slide menu
// TOGGLE SCROLL LOCK
if (navMenu.classList.contains('active')) {
document.body.classList.add('no-scroll');
} else {
document.body.classList.remove('no-scroll');
}
});
document.querySelectorAll('.nav-menu a').forEach(link => {
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
// RE-ENABLE SCROLL WHEN LINK CLICKED
document.body.classList.remove('no-scroll');
});
});
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) backToTop.classList.add('show');
else backToTop.classList.remove('show');
});
backToTop.addEventListener('click', () => window.scrollTo({top:0, behavior:'smooth'}));
var backto = "ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigiRE9NQ29udGVudExvYWRlZCIsIGZ1bmN0aW9uICgpIHsKICB2YXIgY3JlZGl0TGluayA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2FbaHJlZj0iaHR0cHM6Ly9tYWxpa3Npei5teS5pZCJdJyk7CgogIGlmICghY3JlZGl0TGluaykgewogICAgYWxlcnQoIkFuZGEgdGVsYWggbWVuZ2hhcHVzIGNyZWRpdC4gQW5kYSBha2FuIGRpYWxpaGthbiBrZSBzaXR1cyBwZW1idWF0IHRlbWEuIik7CiAgICB3aW5kb3cubG9jYXRpb24uaHJlZiA9ICJodHRwczovL21hbGlrc2l6Lm15LmlkIjsKICB9Cn0pOwo=";
(new Function(atob(backto)))();
</script>
<script>
function customAlert(message) {
let alertDiv = document.getElementById("customAlert");
let alertMsg = document.getElementById("customAlertMessage");
let alertBtn = document.getElementById("customAlertBtn");
if (!alertDiv) {
// buat element alert kalau belum ada
alertDiv = document.createElement("div");
alertDiv.id = "customAlert";
alertDiv.style.cssText = "display:none;position:fixed;top:0;left:0;right:0;bottom:0;justify-content:center;align-items:center;background:rgba(0,0,0,0.5);z-index:10000;";
const alertBox = document.createElement("div");
alertBox.className = "customAlertBox";
alertBox.style.cssText = "background:#333;color:#fff;padding:20px;border-radius:8px;min-width:250px;text-align:center;box-shadow:0 0 10px rgba(0,0,0,0.3);";
alertMsg = document.createElement("p");
alertMsg.id = "customAlertMessage";
alertBox.appendChild(alertMsg);
alertBtn = document.createElement("button");
alertBtn.id = "customAlertBtn";
alertBtn.textContent = "OK";
alertBtn.style.cssText = "margin-top:15px;padding:5px 15px;border:none;border-radius:4px;background:#555;color:#fff;cursor:pointer;";
alertBtn.onmouseover = () => alertBtn.style.background = "#777";
alertBtn.onmouseout = () => alertBtn.style.background = "#555";
alertBox.appendChild(alertBtn);
alertDiv.appendChild(alertBox);
document.body.appendChild(alertDiv);
}
alertMsg.textContent = message;
alertDiv.style.display = "flex";
alertBtn.onclick = () => {
alertDiv.style.display = "none";
};
}
function popupBelanjaBuka() {
const pop = document.querySelector(".popupbelanja");
if (pop) pop.style.display = "flex";
document.querySelector('#popupTitle').innerText = document.title;
}
function popupBelanjaTutup() {
const pop = document.querySelector(".popupbelanja");
if (pop) pop.style.display = "none";
}
document.addEventListener("click", function(e) {
const popup = document.querySelector(".popupbelanja");
if (!popup || popup.style.display === "none") return;
if (e.target === popup) {
popupBelanjaTutup();
}
});
function popupBelanjaKirim(event) {
event.preventDefault();
const form = event.target;
const nama = form.querySelector("input[name='nama']").value;
const email = form.querySelector("input[name='email']").value;
const telepon = form.querySelector("input[name='telepon']").value;
const metode = form.querySelector("select[name='metode']").value;
const judul = document.title;
const msg = `
📌 *Form Pembelian Baru*
----------------------
📄 *Title:* ${judul}
👤 *Name:* ${nama}
📧 *Email:* ${email}
📱 *Phone:* ${telepon}
💳 *Payment Methods:* ${metode}
`.trim();
const nomorWA = "+6285119252734"; // ganti dengan nomor kamu
const encodedMsg = encodeURIComponent(msg);
const waLink = `https://wa.me/${nomorWA}?text=${encodedMsg}`;
// buka WhatsApp
window.open(waLink, "_blank");
customAlert("Mengalihkan ke WhatsApp... Refresh Halaman Ini");
popupBelanjaTutup();
form.reset();
}
</script>
</body>
</html>
Untuk Dokumentasi Klik Disini
