Howww
<?xml version="1.0" encoding="UTF-8" ?>
<b:skin><![CDATA[
/* ===== BASIC RESET ===== */
body {
font-family: 'Merriweather', serif;
background: #f9f9f9;
color: #333;
margin: 0;
line-height: 1.7;
transition: background 0.3s, color 0.3s;
}
a { color: #0073e6; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: 'Lato', sans-serif; margin: 0 0 10px; }
img { max-width: 100%; border-radius: 6px; }
/* ===== NAVBAR ===== */
.navbar {
position: sticky;
top: 0;
background: #fff;
border-bottom: 1px solid #ddd;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
.navbar a { margin: 0 10px; font-weight: bold; }
.navbar-right { display: flex; align-items: center; gap: 12px; }
.search-box input {
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 0.9em;
}
.toggle-btn {
cursor: pointer;
padding: 6px 12px;
border: 1px solid #0073e6;
border-radius: 6px;
font-size: 0.9em;
background: #fff;
color: #0073e6;
transition: 0.3s;
}
.toggle-btn:hover {
background: #0073e6;
color: #fff;
}
/* ===== LAYOUT ===== */
.container { display: flex; max-width: 1200px; margin: auto; padding: 20px; }
.content { flex: 3; margin-right: 20px; }
.sidebar { flex: 1; }
/* ===== POSTS ===== */
.post-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 20px;
transition: background 0.3s, color 0.3s;
}
.post-card h2 a { color: #222; }
.read-more { display: inline-block; margin-top: 10px; font-weight: bold; }
/* ===== SIDEBAR ===== */
.sidebar .widget {
background: #fff;
padding: 15px;
margin-bottom: 20px;
border-radius: 10px;
transition: background 0.3s, color 0.3s;
}
/* ===== FOOTER ===== */
footer {
text-align: center;
padding: 20px;
font-size: 0.9em;
color: #888;
border-top: 1px solid #ddd;
margin-top: 40px;
transition: background 0.3s, color 0.3s;
}
.footer-icons {
margin: 10px 0;
}
.footer-icons a {
margin: 0 8px;
font-size: 20px;
display: inline-block;
color: #0073e6;
transition: color 0.3s;
}
.footer-icons a:hover {
color: #005bb5;
}
/* ===== DARK MODE ===== */
body.dark {
background: #1e1e1e;
color: #eee;
}
body.dark .navbar {
background: #2b2b2b;
border-color: #444;
}
body.dark .toggle-btn {
background: #2b2b2b;
color: #eee;
border-color: #eee;
}
body.dark .post-card, body.dark .sidebar .widget {
background: #2b2b2b;
color: #eee;
}
body.dark footer {
background: #2b2b2b;
color: #bbb;
}
body.dark .search-box input {
background: #2b2b2b;
color: #eee;
border: 1px solid #555;
}
body.dark .footer-icons a {
color: #eee;
}
]]></b:skin>
<b:template version="1.3" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><data:blog.pageTitle/></title>
<link href='https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Merriweather&display=swap' rel='stylesheet'/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"/>
<script>
// Dark Mode Toggle
function toggleDarkMode() {
document.body.classList.toggle("dark");
if(document.body.classList.contains("dark")) {
localStorage.setItem("theme","dark");
} else {
localStorage.setItem("theme","light");
}
}
// Load preference
window.onload = function(){
if(localStorage.getItem("theme")==="dark"){
document.body.classList.add("dark");
}
}
</script>
</head>
<body>
<!-- NAVBAR -->
<div class="navbar">
<div class="logo"><data:blog.title/></div>
<div class="navbar-right">
<a href="<data:blog.homepageUrl/>">Home</a>
<a href="/p/about.html">About</a>
<a href="/search/label/">Archive</a>
<div class="search-box">
<form expr:action='data:blog.searchUrl' method='get'>
<input type="text" name="q" placeholder="Search..."/>
</form>
</div>
<button class="toggle-btn" onclick="toggleDarkMode()">🌙</button>
</div>
</div>
<!-- MAIN CONTAINER -->
<div class="container">
<!-- POSTS -->
<div class="content">
<b:section id="main" class="post-section" showaddelement="yes">
<b:widget id="Blog1" type="Blog" title="Blog Posts">
<b:includable id="main">
<b:loop values="data:posts" var="post">
<div class="post-card">
<h2><a expr:href="data:post.url"><data:post.title/></a></h2>
<small><data:post.timestamp/></small>
<div class="post-body">
<data:post.snippet/>
</div>
<a class="read-more" expr:href="data:post.url">Read More →</a>
</div>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</div>
<!-- SIDEBAR -->
<div class="sidebar">
<b:section id="sidebar" class="sidebar-section" showaddelement="yes">
<b:widget id="AboutMe1" type="Profile" title="About Me"/>
<b:widget id="PopularPosts1" type="PopularPosts" title="Popular Posts"/>
<b:widget id="Label1" type="Label" title="Categories"/>
</b:section>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="footer-icons">
<a href="https://facebook.com/YourPage" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://instagram.com/YourProfile" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://youtube.com/YourChannel" target="_blank"><i class="fab fa-youtube"></i></a>
<a href="https://twitter.com/YourProfile" target="_blank"><i class="fab fa-x-twitter"></i></a>
</div>
© <data:blog.title/> | All Rights Reserved
</footer>
</body>
</b:template>
Comments
Post a Comment