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

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

 আমার এই আজকের এই টিউনের শুরুতেই সকলের প্রতি রইল আমার প্রনাম / সালাম।
আর ছোট দের প্রতি রইল আমার প্রান ঢালা ভালোবাসা।
কেমন আছেন ?
আশা করি পরম সৃষ্টি কর্তার অশেস কৃপায় সবাই ভালো আছেন।
আর আপনাদের অশেষ ভালবাসা নিয়ে আমিও ভালো আছি।

 আপনাদের আমি বলেছিলাম কি ভাবে ১ টি ব্লগার টেমপ্লেট তৈরি করতে হয় সেই টিউটোরিয়াল আমি ধারাবাকিক ভাবে এক দম ব্যাসিক থেকে লিখব।
সময়ের ব্যাস্ত তার কারনে আমার লিখা হয়ে উঠে না।

 যাই হোক আজ আবারো ২য় টিউটোরিয়াল লিখতে বসেছি।
যারা আমার ১ম টিউটোরিয়াল টি দেখেন নাই অবশ্যই দেখে নিবেন হয়ত কিছুই বুঝবেন না।

 আজকের টিউন খুবই গুরুত্বপূর্ণ তাই খুব মনোযোগ দিয়ে আমাকে অনুসরণ করবেন।
আর কোন সমস্যা হলে আমি তো আছিই।

 আমি গত টিউনে বলেছিলাম যে আজ আমি সেকশন এড করা শিখাব।
তো চলুন শুরু করা যাক।

 মনে আছে কি গত পর্বে আমি ১ টি সর্বশেষ স্ট্রাকচার দিয়েছিলাম।
হ্যা। ওই  স্ট্রাকচার টি ওপেন করুন।
১ম ঢাপঃ - 
এখন <!DOCTYPE html> থেকে    </title> অংশ টি নিচের কোড দ্বারা রিপ্লেস করুন।

 কোড টি কপি করে নিনঃ - 

 [CODE]
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<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='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
 <b:include data='blog' name='all-head-content'/>
    <title>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<data:blog.pageName/> - <data:blog.title/>
<b:else/>
ERROR 404 - <data:blog.title/>
</b:if>
</b:if>
    </title>
[/CODE]

 ২য় ঢাপঃ - 
 </title> এর পরে এবং <style type='text/css'> এর পূর্বে নীচের কোড টি কপি করে বসিয়ে দিন।
কোড টি কপি করে নিনঃ - 

 [CODE]
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : SMsudipBD.Com New Template design.
Designer : Sudip Kumar Roy
Mobile : +8801761106753 
URL : https://www.facebook.com/sudip.modhusodon
Web URL : https://www.SMsudipBD.Com
----------------------------------------------- */

 ]]></b:skin>
[/CODE]

 ৩য় ধাপঃ - 
এখন Header Area তে চলে যান এবং 'Header Area' এই লেখা টা নিচের কোড দ্বারা রিপ্লেস করুন।

 [CODE]
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' mobile='yes'  title='Blog Title' type='Header'/>
</b:section>
[/CODE]

 ৪র্থ ধাপঃ - 
এখন Content area তে চলে যান এবং 'Content area' এই লেখা টা নিচের কোড দ্বারা রিপ্লেস করুন।

 [CODE]
<b:section class='main' id='main' maxwidgets='1' showaddelement='no'>
<b:widget id='Blog1' locked='true' mobile='yes' title='Blog Posts' type='Blog'/>
</b:section>
[/CODE]

 ৫ম ধাপঃ -  
এখন Sidebar area তে চলে যান এবং 'Sidebar area' এই লেখা টা নিচের কোড দ্বারা রিপ্লেস করুন।

 [CODE]
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
[/CODE]

 ষষ্ঠ ধাপঃ -
এখন Footer তে চলে যান এবং 'Footer' এই লেখা টা নিচের কোড দ্বারা রিপ্লেস করুন।

 [CODE]
<b:section class='footer' id='footer' maxwidgets='1' showaddelement='no'>
<b:widget id='Text1' locked='true' mobile='yes' title='Blogger Template | SMsudipBD.Com' type='Text'/>
</b:section>
[/CODE]

 ওকে ডান। আমাদের সেকশন এড করে শেষ।
তো দেখে নেই সর্ব শেষ আমাদের টেমপ্লেট টি কেমন হল স্ট্রাকচার টি।

 [CODE]
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<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='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
 <b:include data='blog' name='all-head-content'/>
    <title>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<data:blog.pageName/> - <data:blog.title/>
<b:else/>
ERROR 404 - <data:blog.title/>
</b:if>
</b:if>
    </title>

 <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : SMsudipBD.Com New Template design v.0.1
Designer : Sudip Kumar Roy
Mobile : +8801761106753 
URL : https://www.facebook.com/sudip.modhusodon
----------------------------------------------- */

 ]]></b:skin>

 <!-- 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'>

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' mobile='yes'  title='Blog Title' type='Header'/>
</b:section>

 </div></div>
<!-- Header Area end -->

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

 <!-- Content Area Start -->
<div class='content-wrraper'>
<div class='content'>
<b:section class='main' id='main' maxwidgets='1' showaddelement='no'>
<b:widget id='Blog1' locked='true' mobile='yes' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>
<!-- Content Area end -->

 <!-- Sidebar Area Start -->
<div id='sidebar-wrraper'>
<div class='sidebar'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
</div>
<!-- Sidebar Area end -->
</div>
<!-- Main Wrraper Area end -->

 <!-- Footer Area Start -->
<div id='footer-wrraper'><div class='footer'>
<b:section class='footer' id='footer' maxwidgets='1' showaddelement='no'>
<b:widget id='Text1' locked='true' mobile='yes' title='Blogger Template | SMsudipBD.Com' type='Text'/>
</b:section>
</div></div>
<!-- Footer Area end -->

 </body>
</html>
[/CODE]

 টেমপ্লেট টি আপলোড করলে এখন এমন দেখাবে। চিন্তার কারন নাই আমরা এটিকে খুব সুন্দর করে ডিজাইন করব।

 হিডারঃ - 
হিডার
হিডার
ফুটারঃ -
ফুটার
ফুটার
বিদ্রঃ - টেমপ্লেট টি এখন শুধু মাত্র ডেস্কটপ ভিউ এ সি এস এস স্টাইল দেখা যাবে। পরের পর্বে আমরা এটিকে মোবাইল ফ্রেন্ডলি করব। এবং সি এস এস এড করা শিখব।

 ধন্যবাদ সবাই কে।

 ভালো থাকবেন।
অনেক সময় নিয়ে লিখছি ভাই ১ টা কমেন্ট করে উৎসাহ দিতে ভুলবেন না।

 ক্রেডিটঃ SMsudipBD.Com
পোস্ট রেটিং করুন
ট্যাগঃ
About Author
3 comments
Sort by

  1. Admin: IyanuoluwaMarch 23, 2021 at 8:35 PM

    you really trying boss because is not easy God the Creator will help you too to know more than you expected, please continue Sir

    ReplyDelete
    Replies
    1. SMsudipBD.ComMarch 27, 2021 at 10:36 PM

      i am try to continue. thanks for your right feed back. many many thanks.

      Delete
  2. Techy Munna November 4, 2021 at 8:20 AM

    Next part please

    ReplyDelete