ব্লগার টেম্পলেট এ যেহেতু অনেক গুলো কোড থাকে তাই টেম্পলেট এর HTML কোড গুলো দেখতে অনেক জটিল মনে হয়। আপনি যদি শুরু থেকে একটি ব্লগার টেম্পলেট তৈরি করতে চান তাহলে প্রথমে আপনার একটি Blank ব্লগার টেম্পলেট প্রয়োজন। আর আজ আমরা এই BLANK TEMPLATE টিই তৈরি করা শিখবো। So Let's go…
নিয়মাবলি
ব্লগার আপনাকে শুধু নিম্নলিখিত কোডগুলো টেমপ্লেট হিসাবে যুক্ত করার অনুমতি দিবে না।
[<html>
<head>
<title>My Awesome Blank Blog</title>
</head>
<body>
</body>
</html>]
আপনি যদি উপরের কোডগুলো টেম্পলেট Save করার চেষ্টা করেন তবে তা Error দেখাবে অর্থাৎ Save হবে না। ব্লগার ব্লগের জন্য টেম্পলেট তৈরি করতে কিছু নির্দিষ্ট মানদণ্ড প্রয়োজন।
- টেম্পলেট এ অবশ্যই একটি skin (/b:skin) ট্যাগ থাকতে হবে।
- টেম্পলেট এ অবশ্যই একটি b:section ট্যাগ থাকতে হবে।
- প্রতিটি সেকশন এর জন্য অবশ্যই ইউনিক আইডি থাকতে হবে।
- Syntax গুলো সঠিক হতে হবে।
যদি উপরের নিয়মগুলো সঠিকভাবে পূরণ করা হয় তবে টেম্পলেটটি Save করার সময় ব্লগার কোনও Error দেখাবে না। তো চলুন উপরের সব নিয়ম মেনে আমরা একটি Blank HTML blogger Template তৈরি করি।
Blank Blogger Template তৈরির নিয়মাবলি
যেমনটি আমরা আগেই বলেছি, একটি Blank ব্লগার টেমপ্লেট তৈরি করার জন্য ব্লগারের মানদণ্ডগুলি পূরণ করতে হয়। একটি Blank Blogger টেমপ্লেটে নিম্নলিখিত কোড/মানদন্ডগুলো থাকা উচিত।
- Basic HTML Page Tags (html, head, body) and their end Tags
- Only one /b:skin tag
- Need At least a /b:section tag.
Create a Blank Blogger Template.
প্রথমে আপনার ব্লগটি Simple Blogger Template ব্যবহার করছে কিনা তা নিশ্চিত করুন। যদি তা না হয় তবে আপনার ব্লগে Simple Blogger Template Apply করুন। এবং Theme থেকে মোবাইল সেটিং এ গিয়ে Desktop view করে দিন।
Go to your Blogger Blog -> Template and click on Edit HTML button. Remove the contents of Template.
আমরা এখন টেমপ্লেটে Basic HTML Code গুলো যুক্ত করব।
[<?xml version="1.0" encoding="UTF-8" ?>
<html 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>
</head>
<body>
</body>
</html>]
Head Tag
</head> ট্যাগের বিষয়বস্তু হ'ল title, skin এবং অন্যান্য উপাদান। আমাদের প্রথমে ব্লগার টেম্পলেটগুলিতে দেখা যায় এমন Simple কোডগুলি যুক্ত করতে হবে।
[<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>]
টাইটেল যোগ করার জন্য নিম্নের কোডটি যুক্ত করুন।
[<title><data:blog.pageTitle/></title>]
Add the b:skin tag with basic CSS
[<b:skin>
<![CDATA[/*
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]>
</b:skin>]
এখানে আপনি চাইলে আরো style যোগ করতে পারেন। আমরা শুধু মাত্র body- র style যোগ করছি। আরো style যোগ করার মাধ্যমে আপনি Template এর color, font, background ইত্যাদি change করতে পারবেন।
Body Tag
ব্লগার Template- এ একটি b:section তাগ প্রয়োজন। আর এ ট্যাগটি আমাদের body ট্যাগ এর ভিতর এড করতে হবে।
[<b:section id='main' showaddelement='yes'/>]
এটি হলো ব্লগের main section যেখানে আমরা Gadgets যুক্ত করতে পারি।
The Whole Code
এবং পুরো টেমপ্লেট কোডটি হ'ল:
[<?xml version="1.0" encoding="UTF-8" ?>
<html 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='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
<![CDATA[/*
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]>
</b:skin>
</head><body><b:section class='main' id='main' showaddelement='yes'/><!-- Please Keep The Credits --><center><a href="//www.edutechbd.xyz/2020/08/download-blank-blogger-template.html">Blank Template By EdutechBD.xyz</a></center></body></html>]
Additional Code adding
- Add additional CSS codes inside /b:skin
- Add JavaScript codes before or after
- Add HTML codes (widgets, code) inside .
- You can do all the stuff in this template just like you do it a HTML page.
আপনি যদি পোস্টগুলি Display করাতে চান তবে নীচের কোডগুলো body tag এর b:section tag এর ভিতর যুক্ত করুন।
[<b:section class='main' id='main' showaddelement='yes'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>]
এখন আপনার টেম্পলেটটি Save করুন এবং আপনার ব্লগটি দেখুন। আপনার এখন একটি Palin Blank Blogger Template থাকবে।
0 Comments