Home প্রিমিয়াম পোস্ট APPS STORE NEW WEBSITE TO APP কোর্স

প্রম্পট এবং কোড দেখুন

AI Test Lab

Test your prompts directly on official platforms.

ব্লগার ভিডিও ট্যামপ্লেট রেডি কোড।


 

✦ 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&amp;family=Poppins:wght@500;600;700&amp;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 &amp; 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 == &quot;index&quot; or data:blog.pageType == &quot;archive&quot; 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='&quot;like-count-label-&quot; + 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 == &quot;item&quot;'>
                <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>&#169; 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>
বিজ্ঞাপন
পোস্ট করেছেন

Tanbin Farazi