হ্যাঁ, আমি আপনাকে একটি Clean, SEO Optimized, AdSense Ready এবং Fully Responsive ব্লগার থিম তৈরি করে দিচ্ছি।
নিচে একটি সম্পূর্ণ কোড দেওয়া হলো। এটি একটি "Starter Theme" যা খুব হালকা (lightweight) এবং দ্রুত লোড হবে (যা SEO-এর জন্য খুবই গুরুত্বপূর্ণ)।
এই থিমের বৈশিষ্ট্য:
SEO Optimized: এতে ডায়নামিক মেটা ট্যাগ এবং স্কিমা মার্কআপ (Schema Markup) যুক্ত করা আছে।
Responsive: মোবাইল, ট্যাবলেট এবং ডেস্কটপ সব ডিভাইসে সুন্দরভাবে দেখাবে।
AdSense Ready: অ্যাড বসানোর জন্য নির্দিষ্ট জায়গা রাখা হয়েছে।
Fast Loading: অতিরিক্ত জাভাস্ক্রিপ্ট বাদ দিয়ে শুধু প্রয়োজনীয় কোড রাখা হয়েছে।
থিম কোড (XML)
নিচের পুরো কোডটি কপি করুন:
code
Xml
download
content_copy
expand_less
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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'/>
<b:include data='blog' name='all-head-content'/>
<!-- SEO Meta Tags -->
<title><data:blog.pageTitle/></title>
<meta content='Start blogging with this SEO friendly theme.' name='description'/>
<meta content='blogger, theme, seo, adsense' name='keywords'/>
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap' rel='stylesheet'/>
<b:skin><![CDATA[
/* --- CSS Variables --- */
:root {
--primary-color: #007bff;
--text-color: #333;
--bg-color: #f4f4f4;
--white: #ffffff;
--sidebar-width: 300px;
}
/* --- Reset & Basic Styles --- */
body {
font-family: 'Roboto', sans-serif;
background-color: var(--bg-color);
margin: 0;
padding: 0;
color: var(--text-color);
line-height: 1.6;
}
a { text-decoration: none; color: var(--primary-color); }
a:hover { text-decoration: underline; }
/* --- Layout Structure --- */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 15px;
}
/* --- Header --- */
header {
background: var(--white);
padding: 20px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 { margin: 0; font-size: 24px; }
/* --- Navigation --- */
nav {
background: #333;
color: #fff;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
nav a { color: #fff; }
/* --- Main Content Area --- */
.main-wrapper {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 40px;
}
.content-area {
flex: 1;
min-width: 0; /* Fix for flexbox text overflow */
}
.sidebar-area {
width: var(--sidebar-width);
flex-shrink: 0;
}
/* --- Blog Posts --- */
.post {
background: var(--white);
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.post-title { font-size: 22px; margin-bottom: 10px; }
.post-title a { color: #222; }
.post-meta { font-size: 0.9em; color: #666; margin-bottom: 15px; }
/* --- AdSense Slots Styles --- */
.ad-slot {
background: #e9e9e9;
text-align: center;
padding: 10px;
margin: 15px 0;
border: 1px dashed #ccc;
color: #666;
font-size: 12px;
}
/* --- Footer --- */
footer {
background: #222;
color: #fff;
text-align: center;
padding: 20px 0;
margin-top: auto;
}
/* --- Responsive Design (Mobile) --- */
@media (max-width: 768px) {
.main-wrapper { flex-direction: column; }
.sidebar-area { width: 100%; }
nav ul { flex-direction: column; text-align: center; }
}
]]></b:skin>
</head>
<body>
<!-- Navigation Menu -->
<nav>
<div class='container'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<!-- Header Section -->
<header>
<div class='container header-content'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
</div>
</header>
<!-- Main Container -->
<div class='container'>
<!-- Top Ad Slot -->
<div class='ad-slot'>
<!-- PASTE YOUR ADSENSE HEADER CODE HERE -->
RESPONSIVE AD SLOT (728x90)
</div>
<div class='main-wrapper'>
<!-- Main Content (Blog Posts) -->
<main class='content-area'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</main>
<!-- Sidebar -->
<aside class='sidebar-area'>
<!-- Sidebar Ad Slot -->
<div class='ad-slot'>
<!-- PASTE YOUR ADSENSE SIDEBAR CODE HERE -->
SQUARE AD SLOT (300x250)
</div>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
</aside>
</div>
</div>
<!-- Footer -->
<footer>
<div class='container'>
<p>© <script>document.write(new Date().getFullYear())</script> My Blog Name. Designed for AdSense.</p>
</div>
</footer>
</body>
</html>
থিমটি কিভাবে ইনস্টল করবেন:
Blogger Dashboard-এ লগইন করুন।
বাম পাশের মেনু থেকে Theme-এ ক্লিক করুন।
"Customize" বোতামের পাশে যে তীর চিহ্ন (Arrow) আছে, সেখানে ক্লিক করে Edit HTML সিলেক্ট করুন।
সেখানে থাকা সব পুরানো কোড মুছে ফেলুন (Ctrl+A চেপে তারপর Delete)।
উপরে দেওয়া নতুন কোডটি কপি করে পেস্ট করুন।
উপরের ডান দিকে Save আইকনে (Floppy disk icon) ক্লিক করুন।
AdSense এবং কাস্টমাইজেশন গাইড:
বিজ্ঞাপন (Ads) বসানো:
কোডের মধ্যে <div class='ad-slot'> নামে আমি দুটি জায়গা রেখেছি। আপনি "Layout" অপশনে গিয়ে অথবা সরাসরি HTML এডিটে গিয়ে <!-- PASTE YOUR ADSENSE... --> লেখা অংশে আপনার AdSense কোড বসাতে পারেন।
রেস্পন্সিভ (Responsive):
আমি CSS Flexbox ব্যবহার করেছি। media (max-width: 768px) কোডটি মোবাইল স্ক্রিনে সাইডবারকে মেইন কন্টেন্টের নিচে নামিয়ে দেবে, ফলে মোবাইলেও সাইট সুন্দর দেখাবে।
মেনু (Menu):
কোডের <nav> অংশের ভিতরে <ul> এর মধ্যে আপনি আপনার পেজের লিংক (যেমন: About, Contact) ম্যানুয়ালি পরিবর্তন করে নিতে পারেন।
এই থিমটি খুব সাধারণ রাখা হয়েছে যাতে Google এর বট সহজেই ক্রল করতে পারে, যা SEO এবং AdSense অ্যাপ্রুভাল পাওয়ার জন্য সহায়ক।
good
ReplyDelete