কিভাবে একটি ব্লগার টেমপ্লেট তৈরি করবেন পর্বঃ - ০১ (A 2 Z)

লিখেছেনঃ
প্রকাশিতঃ
কিভাবে একটি ব্লগার টেমপ্লেট তৈরি করবেন  পর্বঃ - ০১ (A 2 Z)
কিভাবে একটি ব্লগার টেমপ্লেট তৈরি করবেন পর্বঃ - ০১ (A 2 Z)
কিভাবে একটি ব্লগার টেমপ্লেট তৈরি করবেন  পর্বঃ - ০১ (A 2 Z)
আশা করি সবাই ভালো আছে। আমিও খুব ভালো আছি অনেকেই আমাকে জিজ্ঞেস করেছিল কিভাবে ব্লগারে একটি টেমপ্লেট বানাতে হয়।।

আমি বলেছিলাম অপেক্ষা করতে, আমি খুব শিগ্রই এ বিষয়ে টিউটোরিয়াল দিব।
জানি না আমি এ বিষয়ে এর আগে কেউ বাংলায় টিউটরিয়াল দিছে কিনা।

তবে এই টিউটোরিয়াল টি আমি বাংলাতে শুরু এবং শেষ করতে চাই।
যদি সবার ভাল ভাবে সারা পাই অবশ্যই আমি এই টিউটোরিয়াল সম্পূর্ণ করব।।

আগেই বলে নিচ্ছি আমার ভুল ত্রুটি গুলো ক্ষমার দৃষ্টিতে দেখবেন আশা করি।
কারন আমিও আপনাদের মত সেই ওয়াপকা থেকে যাত্রা শুরু করেছি।

আমি যত টুকু পারি আপনাদের মাঝে ভাগ করে নিব।
আশা করি সবাই আমাকে সহযোগিতা করবেন।


টিউটোরিয়াল টি একটিতে শেষ করা সম্ভব নয় তাই আমি পর্ব পর্ব করে দিব।

আজ বেশি কিছু লিখব না ।
আজ আমরা বেসিক শিখব।
যারা পারেন তাদের এ অভিনন্দন।
যারা পারেন না তারাই আমাকে ফলো করতে পারেন, আশা করি অনেক কিছু শিখতে পারবেন।

কিভাবে একটি ব্লগার টেমপ্লেট তৈরি করবেন পর্বঃ - ০১ (A 2 Z)
কিভাবে একটি ব্লগার টেমপ্লেট তৈরি করবেন  পর্বঃ - ০১ (A 2 Z)

উপরে ১ টি ছবি দিয়েছি। ভালো করে লক্ষ্য করুন। 
কি কি দিয়েছি...!

১। হিডার
২। কন্টেন্ট সেকশন
৩। সাইট বার
৪। ফুটার
১ টি টেমপ্লেট এই চার টি ইলিমেন্ট থাকতেই হবে।
যে কোন টেমপ্লেট তৈরি করার পূর্বে আমরা এ রকম একটা ডেমো তৈরি করে নিব।।

 এতে করে আমাদের কাজ করতে অনেক সুবিধা হবে।।

 ১ টি টেমপ্লেট ডেমো যে ভাবে শুরু করবেনঃ - 

 আমি ১ টি সাধারন স্ট্রাকচার দিচ্ছি।

 [CODE]
<!DOCTYPE html>
<html>
<head>
<!-- Tile area start-->
<title>
......Title here.......
</title>
<!-- Tile area end -->

 <!-- Style css area start-->
<style type='text/css'>
........Css style here.........
</style>
<!-- Style css area end-->
</head>
<body>
.... main structure code here......
</body>

</html>
[/CODE]

 যে ভাবে স্টাইল সি এস এস যুক্ত করবেনঃ- 
আমি ১ টি সাধারন স্ট্রাকচার দিচ্ছি।

 [CODE]
<style type='text/css'>
/*-- Global Body css -- */
html, body {
background: #eeeeee none repeat scroll top left;
    color: #000;
    font-family: 'Galada', cursive !important;
    margin:0px auto;
    max-width: 100%;
    min-height: 100vh;
    scroll-behavior: smooth;
}
#header-wrraper {}
.header {
background:#ff12cf;
    padding:20px;
    margin:0px auto;
    text-align:center;
    color:#fff;
}
#main-wrraper {
    display: flex;
    justify-content: space-between;
    margin: auto 5%;
    clear:both;
}
.content-wrraper {
    width: 69.7%;
    float: left;
    margin: 0px;
    position: relative;
}
.content {
background:rgb(7 116 1);
    padding:10px;
    color:#fff;
    margin:0px auto;
}
.sidebar-wrraper {
    width: 29%;
    height: 100%;
    float: right;
    display: block;
    position: relative;
    margin: 0px;
    padding: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.sidebar {
background:rgb(255 128 1);
    padding:10px;
    color:#fff;
    margin:0px auto;
}
#footer-wrraper {}
.footer {
background:#000;
    padding:20px;
    margin:0px auto;
    text-align:center;
    color:#fff;
}

</style>
[/CODE]

 যে ভাবে বডি যুক্ত করবেনঃ- 

 [CODE]
<body>

 <!-- Header Area Start -->
<div id='header-wrraper'><div class='header'>Header Area</div></div>
<!-- Header Area end -->

 <!-- Main Wrraper Area Start -->
<div id='main-wrraper'>

 <!-- Content Area Start -->
<div class='content-wrraper'>
<div class='content'>
.........Content area.........
</div>
</div>
<!-- Content Area end -->

 <!-- Sidebar Area Start -->
<div id='sidebar-wrraper'>
<div class='sidebar'>
.........Sidebar area.........
</div>
</div>
<!-- Sidebar Area end -->
</div>
<!-- Main Wrraper Area end -->

 <!-- Footer Area Start -->
<div id='footer-wrraper'><div class='footer'>......Footer.........</div></div>
<!-- Footer Area end -->
</body>
[/CODE]

 সর্বশেষ স্ট্রাকচার যেমন হবেঃ- 

 [CODE]
<!DOCTYPE html>
<html>
<head>
<!-- Tile area start-->
<title>
Welcome to New Template Design / SMsudipBD.Com
</title>
<!-- Tile area end -->

 <!-- Style css area start-->
<style type='text/css'>
/*-- Global Body css -- */
html, body {
background: #eeeeee none repeat scroll top left;
    color: #000;
    font-family: 'Galada', cursive !important;
    margin:0px auto;
    max-width: 100%;
    min-height: 100vh;
    scroll-behavior: smooth;
}
#header-wrraper {}
.header {
background:#ff12cf;
    padding:20px;
    margin:0px auto;
    text-align:center;
    color:#fff;
}
#main-wrraper {
    display: flex;
    justify-content: space-between;
    margin: auto 5%;
    clear:both;
}
.content-wrraper {
    width: 69.7%;
    float: left;
    margin: 0px;
    position: relative;
}
.content {
background:rgb(7 116 1);
    padding:10px;
    color:#fff;
    margin:0px auto;
}
.sidebar-wrraper {
    width: 29%;
    height: 100%;
    float: right;
    display: block;
    position: relative;
    margin: 0px;
    padding: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.sidebar {
background:rgb(255 128 1);
    padding:10px;
    color:#fff;
    margin:0px auto;
}
#footer-wrraper {}
.footer {
background:#000;
    padding:20px;
    margin:0px auto;
    text-align:center;
    color:#fff;
}
</style>
<!-- Style css area end-->
</head>
<body>

 <!-- Header Area Start -->
<div id='header-wrraper'><div class='header'>Header Area</div></div>
<!-- Header Area end -->

 <!-- Main Wrraper Area Start -->
<div id='main-wrraper'>

 <!-- Content Area Start -->
<div class='content-wrraper'>
<div class='content'>
Content area
Content area
Content area
Content area
Content area
Content area
Content area
Content area
Content area
Content area
<br/>
Content area
Content area
Content area
Content area
Content area
Content area
Content area
Content area
Content area
Content area
<br/>
Content area
Content area
Content area
Content area
Content area
Content area
Content area
Content area
Content area
Content area
</div>
</div>
<!-- Content Area end -->

 <!-- Sidebar Area Start -->
<div id='sidebar-wrraper'>
<div class='sidebar'>
Sidebar area
Sidebar area

 </div>
</div>
<!-- Sidebar Area end -->
</div>
<!-- Main Wrraper Area end -->

 <!-- Footer Area Start -->
<div id='footer-wrraper'><div class='footer'>Footer</div></div>
<!-- Footer Area end -->

 </body>

</html>
[/CODE]

 আজ  এ পর্যন্তই। 
এর পরের পর্বে শিখব কি ভাবে ব্লগার সেকশন যুক্ত করতে হয়।।
কিভাবে কন্ডিশন এপ্লাই করতে হয়।।

 কেউ বাজে কমেন্ট করবেন না এতে টিউটোরিয়াল দেয়ার ইচ্ছা হারিয়ে ফেলি।।
যারা পারেন তারা আমার এই টিউটোরিয়াল এভোয়েট করুন।।
সকল কে এত ক্ষন সাথে থাকার জন্য অসংখ্য ধন্যবাদ।
ভাল থাকবেন।

 টাটা।
পোস্ট রেটিং করুন
ট্যাগঃ
About Author


টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!