✦ CODE SNIPPET
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' expr:dir='data:blog.languageDirection' lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gdata/b' xmlns:data='http://www.google.com/2005/gdata/data' xmlns:expr='http://www.google.com/2005/gdata/expr'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<!-- Google Fonts -->
<link rel='preconnect' href='https://fonts.googleapis.com'/>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin='anonymous'/>
<link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap' rel='stylesheet'/>
<!-- FontAwesome Icons -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'/>
<b:skin><![CDATA[
:root {
--bg-main: #f6f7f9;
--bg-card: #ffffff;
--bg-sidebar: #ffffff;
--bg-header: rgba(255, 255, 255, 0.9);
--bg-hover: #f0f2f5;
--text-main: #0f172a;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--border-color: #e2e8f0;
--accent: #6366f1;
--accent-hover: #4f46e5;
--accent-glow: rgba(99, 102, 241, 0.15);
--danger: #ef4444;
--success: #22c55e;
--card-radius: 18px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
--shadow-md: 0 10px 25px -5px rgba(0,0,0,0.05);
--transition: all 0.25s ease;
}
[data-theme="dark"] {
--bg-main: #0b0b0f;
--bg-card: #15151b;
--bg-sidebar: #121217;
--bg-header: rgba(21, 21, 27, 0.9);
--bg-hover: #1e1e26;
--text-main: #f8fafc;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--border-color: #272730;
--accent: #818cf8;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-main); color: var(--text-main); min-height: 100vh; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.app-container { display: flex; min-height: 100vh; position: relative; }
.app-header {
position: fixed; top: 0; left: 0; right: 0; height: 65px;
background: var(--bg-header); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px; z-index: 1000;
}
.header-left, .header-right { display: flex; align-items: center; gap: 12px; }
.brand-logo { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.header-search { flex: 1; max-width: 450px; margin: 0 16px; }
.search-form { display: flex; align-items: center; background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: 30px; padding: 0 14px; height: 38px; }
.search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-main); font-size: 13px; padding-left: 6px; }
.search-btn { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; }
.icon-btn {
width: 36px; height: 36px; border-radius: 50%; background: var(--bg-hover);
border: 1px solid var(--border-color); color: var(--text-main);
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.app-sidebar {
width: 240px; background: var(--bg-sidebar); border-right: 1px solid var(--border-color);
position: fixed; top: 65px; bottom: 0; left: 0; overflow-y: auto; padding: 20px 12px; z-index: 900;
}
.sidebar-menu { display: flex; flex-direction: column; gap: 4px; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: var(--text-secondary); font-weight: 500; font-size: 13px; }
.menu-item:hover, .menu-item.active { background: var(--accent-glow); color: var(--accent); }
.sidebar-divider { height: 1px; background: var(--border-color); margin: 12px 0; }
.sidebar-title { font-size: 11px; text-transform: uppercase; color: var(--text-muted); padding: 0 14px 6px; font-weight: 600; }
.main-wrapper { flex: 1; margin-left: 240px; margin-top: 65px; padding: 20px; display: flex; justify-content: center; }
.main-content-area { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 20px; }
.category-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.cat-chip { background: var(--bg-card); border: 1px solid var(--border-color); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.cat-chip:hover, .cat-chip.active { background: var(--accent); color: #fff; }
/* Post Card UI */
.post-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 16px; }
.post-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.author-info { display: flex; align-items: center; gap: 10px; }
.author-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; overflow: hidden; }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-meta h4 { font-size: 14px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 4px; }
.author-meta h4 i.verified { color: var(--accent); font-size: 12px; }
.post-time { font-size: 11px; color: var(--text-muted); }
/* ফিক্সড ভিডিও থাম্বনেইল ও সেন্টারে প্লে বাটন */
.video-thumb-wrapper {
position: relative;
display: block;
width: 100%;
background: #000;
}
.video-thumb-wrapper img {
width: 100%;
max-height: 450px;
object-fit: cover;
display: block;
}
.video-thumb-wrapper .play-btn-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.video-thumb-wrapper:hover .play-btn-overlay {
background: rgba(0, 0, 0, 0.45);
}
.play-icon-box {
width: 60px; height: 60px;
background: var(--accent);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.6);
transition: transform 0.2s ease;
padding-left: 3px;
}
.video-thumb-wrapper:hover .play-icon-box {
transform: scale(1.1);
}
.video-type-badge {
position: absolute; top: 12px; right: 12px;
background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(6px);
color: #fff; padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
display: flex; align-items: center; gap: 5px; z-index: 10; border: 1px solid rgba(255,255,255,0.15);
}
.video-type-badge i { color: var(--accent); }
.post-body-content { padding: 14px 16px; }
.post-title-link { font-size: 16px; font-weight: 600; color: var(--text-main); margin-bottom: 6px; display: block; }
.post-title-link:hover { color: var(--accent); }
.post-snippet { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.post-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hashtag { font-size: 12px; color: var(--accent); font-weight: 500; }
.post-metrics-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
.post-actions { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; }
.action-btn { flex: 1; background: transparent; border: none; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 8px; }
.action-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.action-btn.liked { color: var(--danger); }
.widget.HTML { background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--card-radius); padding: 16px; margin-bottom: 16px; text-align: center; }
/* Mobile Nav */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: var(--bg-card); border-top: 1px solid var(--border-color); z-index: 1000; align-items: center; justify-content: space-around; padding: 0 8px; }
.mob-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-secondary); font-size: 10px; background: none; border: none; cursor: pointer; }
.mob-nav-item i { font-size: 16px; }
.mob-nav-item.active { color: var(--accent); }
.mob-center-btn { width: 42px; height: 42px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-top: -14px; }
/* Single Post Page Layout */
.single-post-container { display: grid; grid-template-columns: 1fr 320px; gap: 20px; width: 100%; max-width: 1100px; margin: 0 auto; }
.single-main-col { display: flex; flex-direction: column; gap: 16px; }
.single-sidebar-col { display: flex; flex-direction: column; gap: 14px; }
.related-card { display: flex; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-color); padding: 8px; border-radius: 10px; }
.related-thumb { width: 100px; height: 65px; border-radius: 6px; object-fit: cover; background: #000; }
.related-info h5 { font-size: 12px; font-weight: 600; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.related-meta { font-size: 10px; color: var(--text-muted); }
.app-footer { background: var(--bg-card); border-top: 1px solid var(--border-color); padding: 24px 16px; margin-top: 30px; text-align: center; font-size: 12px; color: var(--text-muted); }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
@media(max-width: 1024px) {
.app-sidebar { transform: translateX(-100%); }
.main-wrapper { margin-left: 0; padding: 12px; }
.single-post-container { grid-template-columns: 1fr; }
}
@media(max-width: 768px) {
.app-header { padding: 0 12px; height: 60px; }
.main-wrapper { margin-top: 60px; padding: 8px; padding-bottom: 75px; }
.mobile-nav { display: flex; }
}
]]></b:skin>
</head>
<body>
<!-- Header -->
<header class='app-header'>
<div class='header-left'>
<a class='brand-logo' expr:href='data:blog.homepageUrl'>
<i class='fa-solid fa-play-circle'></i>
<data:blog.title/>
</a>
</div>
<div class='header-search'>
<form action='/search' class='search-form' method='get'>
<button class='search-btn' type='submit'><i class='fa-solid fa-search'></i></button>
<input class='search-input' name='q' placeholder='Search videos...' type='text' value=''/>
</form>
</div>
<div class='header-right'>
<button aria-label='Toggle Dark Mode' class='icon-btn' id='darkModeToggle' title='Dark Mode'>
<i class='fa-solid fa-moon' id='themeIcon'></i>
</button>
<a aria-label='Submit Post' class='icon-btn' href='/p/submit.html' title='Create Post'>
<i class='fa-solid fa-plus'></i>
</a>
</div>
</header>
<div class='app-container'>
<!-- Sidebar -->
<aside class='app-sidebar'>
<ul class='sidebar-menu'>
<li><a class='menu-item active' expr:href='data:blog.homepageUrl'><i class='fa-solid fa-house'></i>Home</a></li>
<li><a class='menu-item' href='/search?q=video'><i class='fa-solid fa-clapperboard'></i>Videos</a></li>
<li><a class='menu-item' href='/search?q=image'><i class='fa-solid fa-image'></i>Images</a></li>
<li><a class='menu-item' href='/search?q=trending'><i class='fa-solid fa-fire'></i>Trending</a></li>
<li><a class='menu-item' href='/search?q=latest'><i class='fa-solid fa-bolt'></i>Latest</a></li>
</ul>
<div class='sidebar-divider'></div>
<div class='sidebar-title'>Categories</div>
<ul class='sidebar-menu'>
<li><a class='menu-item' href='/search/label/Technology'><i class='fa-solid fa-microchip'></i>Technology</a></li>
<li><a class='menu-item' href='/search/label/AI'><i class='fa-solid fa-wand-magic-sparkles'></i>AI & Tech</a></li>
<li><a class='menu-item' href='/search/label/Tutorial'><i class='fa-solid fa-graduation-cap'></i>Tutorials</a></li>
<li><a class='menu-item' href='/search/label/Gaming'><i class='fa-solid fa-gamepad'></i>Gaming</a></li>
<li><a class='menu-item' href='/search/label/Entertainment'><i class='fa-solid fa-face-smile'></i>Entertainment</a></li>
</ul>
</aside>
<!-- Main Wrapper -->
<div class='main-wrapper'>
<!-- HOMEPAGE & FEED VIEW -->
<b:if cond='data:blog.pageType == "index" or data:blog.pageType == "archive" or data:blog.searchQuery or data:blog.searchLabel'>
<div class='main-content-area'>
<!-- Category Chips Bar -->
<div class='category-bar'>
<a class='cat-chip active' expr:href='data:blog.homepageUrl'>All</a>
<a class='cat-chip' href='/search/label/Technology'>Technology</a>
<a class='cat-chip' href='/search/label/AI'>AI</a>
<a class='cat-chip' href='/search/label/Tutorial'>Tutorial</a>
<a class='cat-chip' href='/search/label/Gaming'>Gaming</a>
<a class='cat-chip' href='/search/label/Entertainment'>Entertainment</a>
</div>
<!-- Blogger Native Blog Feed Widget -->
<b:section id='main-feed-section' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='2'>
<b:includable id='main'>
<b:loop values='data:posts' var='post'>
<article class='post-card'>
<!-- Post Author Meta -->
<div class='post-header'>
<div class='author-info'>
<div class='author-avatar'>
<b:if cond='data:post.author.authorPhoto.url'>
<img expr:src='data:post.author.authorPhoto.url' alt='Author'/>
<b:else/>
<i class='fa-solid fa-user'></i>
</b:if>
</div>
<div class='author-meta'>
<h4>
<data:post.author.name/>
<i class='fa-solid fa-circle-check verified' title='Verified Creator'></i>
</h4>
<span class='post-time'><data:post.timestamp/></span>
</div>
</div>
<button class='post-options-btn' title='More Options'><i class='fa-solid fa-ellipsis'></i></button>
</div>
<!-- Post Media Thumbnail with Centered Play Button linked to Post URL -->
<b:if cond='data:post.firstImageUrl'>
<a class='video-thumb-wrapper' expr:href='data:post.url'>
<div class='video-type-badge'>
<i class='fa-solid fa-clapperboard'></i> HD Video
</div>
<div class='play-btn-overlay'>
<div class='play-icon-box'>
<i class='fa-solid fa-play'></i>
</div>
</div>
<img expr:src='data:post.firstImageUrl' expr:alt='data:post.title' loading='lazy'/>
</a>
<b:else/>
<div style='padding: 15px;'>
<div class='post-body-embedded'><data:post.body/></div>
</div>
</b:if>
<!-- Post Details & Captions -->
<div class='post-body-content'>
<a class='post-title-link' expr:href='data:post.url'><data:post.title/></a>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<b:if cond='data:post.labels'>
<div class='post-labels'>
<b:loop values='data:post.labels' var='label'>
<a class='hashtag' expr:href='data:label.url'>#<data:label.name/></a>
</b:loop>
</div>
</b:if>
</div>
<!-- Metrics -->
<div class='post-metrics-bar'>
<span class='like-count-text' expr:id='"like-count-label-" + data:post.id'>1.2K Likes</span>
<span class='views-count-text'>8.4K Views · <data:post.timestamp/></span>
</div>
<!-- Action Buttons -->
<div class='post-actions'>
<button class='action-btn like-trigger-btn' expr:data-postid='data:post.id'>
<i class='fa-regular fa-heart'></i> <span class='like-btn-label'>Like</span>
</button>
<button class='action-btn comment-drawer-btn' expr:data-postid='data:post.id'>
<i class='fa-regular fa-comment'></i> Comment
</button>
<button class='action-btn share-trigger-btn' expr:data-url='data:post.url' expr:data-title='data:post.title'>
<i class='fa-solid fa-share'></i> Share
</button>
</div>
</article>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
<!-- SINGLE POST VIEW -->
<b:if cond='data:blog.pageType == "item"'>
<div class='single-post-container'>
<div class='single-main-col'>
<b:section id='single-post-section' showaddelement='no'>
<b:widget id='Blog2' locked='true' title='Post Content' type='Blog' version='2'>
<b:includable id='main'>
<b:loop values='data:posts' var='post'>
<article class='post-card'>
<div style='padding: 15px; background:#000;'>
<data:post.body/>
</div>
<div class='post-body-content'>
<h1 style='font-size: 22px; font-weight: 700; margin-bottom: 12px;'><data:post.title/></h1>
<div class='post-snippet' style='font-size: 15px; color: var(--text-main);'>
<data:post.body/>
</div>
</div>
</article>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</b:if>
</div>
</div>
<!-- Footer -->
<footer class='app-footer'>
<div class='footer-links'>
<a href='#'>About</a>
<a href='#'>Contact</a>
<a href='#'>Privacy Policy</a>
<a href='#'>Terms of Service</a>
</div>
<p>© 2026 <data:blog.title/>. All rights reserved.</p>
</footer>
<!-- Mobile Bottom Navigation -->
<nav class='mobile-nav'>
<a class='mob-nav-item active' expr:href='data:blog.homepageUrl'><i class='fa-solid fa-house'></i><span>Home</span></a>
<a class='mob-nav-item' href='/search?q=explore'><i class='fa-solid fa-compass'></i><span>Explore</span></a>
<a class='mob-nav-item mob-center-btn' href='/p/submit.html'><i class='fa-solid fa-plus'></i></a>
<a class='mob-nav-item' href='/search?q=videos'><i class='fa-solid fa-clapperboard'></i><span>Videos</span></a>
<a class='mob-nav-item' href='/search?q=profile'><i class='fa-solid fa-user'></i><span>Profile</span></a>
</nav>
<!-- Script -->
<script><![CDATA[
document.addEventListener('DOMContentLoaded', function() {
const themeToggleBtn = document.getElementById('darkModeToggle');
const themeIcon = document.getElementById('themeIcon');
const savedTheme = localStorage.getItem('vplay_theme') || 'light';
if(savedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
}
themeToggleBtn.addEventListener('click', function() {
let currentTheme = document.documentElement.getAttribute('data-theme');
if(currentTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('vplay_theme', 'light');
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
} else {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('vplay_theme', 'dark');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
}
});
});
]]></script>
</body>
</html>
