Blogger Ka Template Kaise Banaye – Step by Step Guide
Is post me aap seekhenge ki Blogger ka ek complete custom template kaise banate hain. Isme header, navbar, sidebar, footer ke sath homepage aur single post layout ka structure bhi diya gaya hai.
1. Template Ki Basic XML Structure
<!DOCTYPE html>
<html b:version='2' 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>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<b:skin>
/* CSS styling */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header, nav, footer { padding: 10px; background: #f0f0f0; }
#container { display: flex; gap: 20px; }
aside { width: 25%; }
main { width: 75%; }
</b:skin>
</head>
<body>
<header>
<h1><data:blog.title/></h1>
</header>
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
</ul>
</nav>
<div id='container'>
<aside>
<b:section id='sidebar' class='sidebar' showaddelement='yes'>
<b:widget id='Profile1' type='Profile' title='About Me'/>
<b:widget id='Label1' type='Label' title='Labels'/>
</b:section>
</aside>
<main>
<b:section id='main' class='main' showaddelement='yes'>
<b:widget id='Blog1' type='Blog' title='Blog Posts'/>
</b:section>
</main>
</div>
<footer>
<p>Copyright © <data:blog.title/></p>
</footer>
<b:include data='blog' name='body-end'/>
</body>
</html>
5. <b:section> Tag Kya Hota Hai? (Detailed Explanation)
<b:section> tag Blogger template me ek **widget container** hota hai jisme aap ek ya multiple <b:widget> add kar sakte hain. Ye section Blogger ke “Layout” panel me dikhta hai jahan se aap user-friendly interface ke through widgets add kar sakte ho.
Common Attributes:
- id: Section ka unique naam (e.g.
main,sidebar,footer) - class: CSS styling ke liye class (e.g.
main-section,widget-area) - showaddelement: Agar
yesset kiya ho to aap Blogger Dashboard se naye widget add kar sakte ho. - maxwidgets: (optional) Ek section me kitne maximum widgets allowed hain.
- name: (optional) Section ka descriptive naam
Example:
<b:section id='sidebar' class='sidebar' showaddelement='yes'>
<b:widget id='Profile1' type='Profile' title='About Me'/>
<b:widget id='Label1' type='Label' title='Categories'/>
</b:section>
Explanation:
id='sidebar'– is section ka naam 'sidebar' hoga.showaddelement='yes'– ye enable karega widget add karne ka option Blogger Layout panel me.- Iske andar 2 widgets hain – ek Profile aur ek Labels.
Multiple Sections Example:
<b:section id='header-section' class='header' showaddelement='yes' maxwidgets='1'/>
<b:section id='main' class='content-area' showaddelement='yes'>
<b:widget id='Blog1' type='Blog' title='Blog Posts'/>
</b:section>
<b:section id='footer' class='footer-area' showaddelement='yes'/>
Note: Har section Blogger ke “Layout” tab me ek block ki tarah dikhega. Aap chahe to XML code me manually widgets add kar sakte ho ya Dashboard se drag and drop bhi kar sakte ho.
2. Homepage Post Layout Code
Homepage par posts list form me dikhte hain. Har post ka title, thumbnail aur snippet show hota hai.
<b:includable id='main'>
<b:loop values='data:posts' var='post'>
<article class='post'>
<h2><a expr:href='data:post.url'><data:post.title/></a></h2>
<b:if cond='data:post.thumbnail'>
<img expr:src='data:post.thumbnail' alt='Thumbnail' />
</b:if>
<p><data:post.snippet/></p>
</article>
</b:loop>
</b:includable>
3. Single Post Page Layout Code
Jab user kisi ek post par click karta hai, to full post content show hota hai:
<b:includable id='post' var='post'>
<article class='full-post'>
<h1><data:post.title/></h1>
<p class='post-meta'>
Published on <data:post.date/> by <data:post.author.name/>
</p>
<div class='post-body'>
<data:post.body/>
</div>
</article>
</b:includable>
4. Important Blogger Tags Summary
<b:loop>– Posts ya items ko loop karne ke liye.<data:post.title/>– Post ka title dikhane ke liye.<data:post.body/>– Full post content ke liye.<data:post.snippet/>– Post ka short preview (homepage ke liye).<data:post.thumbnail/>– Post image (agar available ho).
Conclusion
Is complete Blogger template me aapko homepage, single post page, sidebar, footer, aur important Blogger tags ka full structure mila hai. Ab aap apne blog ke liye ek responsive aur SEO optimized template bana sakte hain.
Agar aap chahte hain to mai is template ka complete .xml file version bhi bana ke de sakta hoon, ya is template ko design ke saath preview ke roop me dikhane wala demo bhi ready kar sakta hoon. Comment ya message karein!
