Blog တစ်ခုလုံး သွက်လက်မြန်ဆန်တဲ့ Animation အပြည့်ပါရမယ် နောက်ခံအရောင်က အရောင်ပြေးအလှနဲ့ အမြဲပြောင်းလဲနေတဲ့ effect ပါရမယ် real blog post တွေ ပေါ်ရမယ် blog post ကိုလဲ ထွင်းဖောက်မြင်ရတဲ့ အကြည်ရောင်နဲ့ဖြစ်ရမယ် image/video တွေက ဘယ် device မှာမဆို screen fit ဖြစ်နေရမယ် blog ကလဲ screen fit ဖြစ်ရမယ် ဘယ်ညာဆွဲလို့မရစေရဘူး blog မှာ လှပတဲ့ Animation effect က အမြဲပါနေရမယ် nav menu bar ထည့်မယ် Home - နှိပ်တာနဲ့ Refresh ဖြစ်ရမယ် Search - Search box မပြထားဘူး နှိပ်လိုက်မှ search box အသေးလေးပေါ်လာမယ် စာလုံးအစရိုက်လိုက်တာနဲ့ Blog post ထဲက ရှာပီး ပြပေးရမယ် တခြား လွတ်တဲ့နေရာကို နှိပ်လိုက်ရင် search box က auto ပိတ်သွားရမယ် Theme - Light/Dark ပြောင်းလို့ရရမယ် ပြောင်းတဲ့နေရာမှာ blog တစ်ခုလုံး နေရာလပ်မကျန် ပြောင်းသွားရမယ် back to top button ကို floating button အနေနဲ့ လှုပ်ရှားနေတဲ့ icon အလှလေးနဲ့ထားမယ် Nav menu bar ကလဲ လှုပ်ရှားနေတဲ့ icon လေးတွေနဲ့ ထွင်းဖောက်မြင်ရတဲ့ Button အလှလေးတွေ ဖြစ်ရမယ် အရေးကြီးဆုံးတချက်က blogger ရဲ့ Layout setting ထဲမှာ Header, Footer တွေမှာ Gadgets ထည့်ဖို့နေရာတွေ ပါရမယ် add gadgets ခ
<!DOCTYPE html>
<html lang="my">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Blog</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--text-color: #333;
--bg-color: #f5f5f5;
--nav-bg: rgba(255, 255, 255, 0.9);
--post-bg: rgba(255, 255, 255, 0.8);
--accent-color: #007bff;
}
[data-theme="dark"] {
--text-color: #f5f5f5;
--bg-color: #1a1a1a;
--nav-bg: rgba(28, 28, 28, 0.9);
--post-bg: rgba(28, 28, 28, 0.8);
--accent-color: #4dabf7;
}
body {
font-family: 'Noto Sans Myanmar', Arial, sans-serif;
background: var(--bg-color);
color: var(--text-color);
transition: all 0.3s ease;
overflow-x: hidden;
position: relative;
}
#bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
[data-theme="dark"] #bg-animation {
background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c);
background-size: 400% 400%;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Navigation */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--nav-bg);
backdrop-filter: blur(10px);
padding: 1rem;
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
z-index: 1000;
transform: translateY(-100%);
animation: slideDown 0.5s ease forwards;
}
@keyframes slideDown {
to { transform: translateY(0); }
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.nav-item {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.5rem 1rem;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
position: relative;
overflow: hidden;
}
.nav-item:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.nav-item::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.nav-item:hover::before {
width: 300px;
height: 300px;
}
/* Content */
.content {
max-width: 1200px;
margin: 100px auto 50px;
padding: 0 20px;
}
.post {
background: var(--post-bg);
margin: 20px 0;
padding: 30px;
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transform: scale(0.9);
opacity: 0;
animation: fadeInScale 0.5s ease forwards;
transition: transform 0.3s ease;
}
.post:hover {
transform: scale(1.02);
}
@keyframes fadeInScale {
to {
transform: scale(1);
opacity: 1;
}
}
.post img, .post video {
width: 100%;
height: auto;
border-radius: 10px;
margin: 10px 0;
}
/* Search */
.search-container {
position: relative;
display: inline-block;
}
.search-box {
width: 0;
padding: 10px 0;
border: none;
border-radius: 25px;
background: rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
outline: none;
color: var(--text-color);
}
.search-box.active {
width: 200px;
padding: 10px 20px;
}
/* Back to top */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--accent-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
}
.back-to-top.show {
opacity: 1;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Gadgets */
.gadget-area {
padding: 20px;
margin: 20px 0;
border: 2px dashed rgba(255, 255, 255, 0.3);
border-radius: 10px;
min-height: 100px;
text-align: center;
color: var(--text-color);
}
.header-gadgets {
margin-top: 80px;
}
.footer-gadgets {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="bg-animation"></div>
<nav>
<div class="nav-container">
<div class="nav-item" onclick="refreshPage()">
<i>🏠</i> Home
</div>
<div class="search-container">
<div class="nav-item" onclick="toggleSearch()">
<i>🔍</i> Search
<input type="text" class="search-box" id="searchBox" placeholder="Search...">
</div>
</div>
<div class="nav-item" onclick="toggleTheme()">
<i>🎨</i> Theme
</div>
</div>
</nav>
<!-- Header Gadget Area -->
<div class="gadget-area header-gadgets">
<p>Header Gadget Area - Add your gadgets here</p>
</div>
<div class="content">
<!-- Blog Post 1 -->
<article class="post">
<h2>Welcome to My Animated Blog</h2>
<p>This is an example blog post with beautiful animations and responsive design.</p>
<img src="https://via.placeholder.com/800x400" alt="Placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<!-- Blog Post 2 -->
<article class="post">
<h2>Another Amazing Post</h2>
<p>More content to demonstrate the scrolling animations and responsive images.</p>
<video controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<!-- Blog Post 3 -->
<article class="post">
<h2>The Future is Now</h2>
<p>Exploring the possibilities of modern web design with fluid animations and interactive elements.</p>
<img src="https://via.placeholder.com/800x300" alt="Future">
</article>
</div>
<!-- Footer Gadget Area -->
<div class="gadget-area footer-gadgets">
<p>Footer Gadget Area - Add your gadgets here</p>
</div>
<div class="back-to-top" onclick="scrollToTop()">
<i>⬆️</i>
</div>
<script>
// Refresh page
function refreshPage() {
location.reload();
}
// Search functionality
function toggleSearch() {
const searchBox = document.getElementById('searchBox');
searchBox.classList.toggle('active');
if (searchBox.classList.contains('active')) {
searchBox.focus();
}
}
// Search posts
document.getElementById('searchBox').addEventListener('input', function(e) {
const searchTerm = e.target.value.toLowerCase();
const posts = document.querySelectorAll('.post');
posts.forEach(post => {
const text = post.textContent.toLowerCase();
if (text.includes(searchTerm)) {
post.style.display = 'block';
} else {
post.style.display = 'none';
}
});
});
// Close search when clicking outside
document.addEventListener('click', function(e) {
if (!e.target.closest('.search-container')) {
document.getElementById('searchBox').classList.remove('active');
}
});
// Theme toggle
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
}
// Load saved theme
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
// Back to top button
window.addEventListener('scroll', function() {
const backToTop = document.querySelector('.back-to-top');
if (window.scrollY > 300) {
backToTop.classList.add('show');
} else {
backToTop.classList.remove('show');
}
});
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// Add animation delay to posts
document.querySelectorAll('.post').forEach((post, index) => {
post.style.animationDelay = `${index * 0.2}s`;
});
</script>
</body>
</html>