বাংলা ইউআই ব্লগার টেমপ্লেট সম্পূর্ণ কাস্টমাইজেশন

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

বাংলায় ইউআই থিম কাস্টমাইজেশন

উল্লেখ্য যে এখানে ব্যবহৃত কাস্টমাইজেশন পদ্ধতিগুলো শুধু বাংলায় ইউ আই ভার্সন ১.১ ব্লুগার টেমপ্লেটে ব্যবহার করা যাবে । অন্য কোন ব্লগার টেমপ্লেটে ব্যবহার করলে তাহার আউটপুট শো হবে না

এখন চলুন শুরু করা যাক কিভাবে আপনারা বাংলা ইউ আই প্রিমিয়াম ব্লগার টেম্পলেট টিকে সম্পূর্ণভাবে কাস্টোমাইজ করবেন তা দেখে নেওয়া যাক :

গ্রিড লেআউট সহ চিত্র

যেভাবে আপনার পিকচার গুলো গ্রিড লেআউট এ শো করবে তার ডেমো নিচে দেওয়া হল ।

কিভাবে গ্রিড লেআউট সহ চিত্র তৈরি করবেন এর কোড সমূহ নিচে দেওয়া হল :

<!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
</div>

অটো রিলেটেড পোস্ট

অটো রিলেটেড পোস্ট (Auto Related Post) অর্থাৎ সম্পর্কিত পোস্ট পোস্টগুলো কিভাবে আপনার পোষ্টের মধ্যে শো করবে তার ডেমো নিচে দেওয়া হল ।

সম্পর্কিত পোস্ট

কিভাবে আপনি অটো রিলেটেড পোস্ট আপনার পোস্টে অ্যাড করবেন তার নিচে দেওয়া হল :

<details class='sp toc' open=''>
  <summary data-show='দেখুন' data-hide='লুকান'>সম্পর্কিত পোস্ট</summary>  
  <div class='toC' id='aRel'></div>
</details>

নোটিশ বক্স

আপনি আপনার ব্লগার সাইটে কিভাবে কোন নোটিশ বক্স এড করবেন নোটিশ বক্স বলতে, এখানে বোঝানো হয়েছে আপনি আপনার ব্লগার পোস্টে এমন কোথাও, কিছু ইন্ডিকেট করতে চান, যাকে হাইলাইট আকারে আপনার ভিজিটরের কাছে প্রকাশ করতে চান । এমন কিছু যা আপনার ভিজিটরের জানা আবশ্যক ।

এই নোটিশ বক্স আমরা আমাদের থিমে দুই ভাবে এড করেছি একটি ওয়ার্নিং নোটিশ বক্স এবং দ্বিতীয়টি সাধারণ নোটিশ বক্স ।

ওয়ার্নিং নোটিশ বক্স :

নিচে ওয়ার্নিং নোটিশ বক্সের ডেমো দেওয়া হল :

এটি হলো ওয়ার্নিং টাইপ নোটিশ বক্স, এখানে শুধু ওয়ার্নিং সম্পর্কে লিখবেন ।

কিভাবে আপনি আপনার সাইটে ওয়ার্নিং নোটিশ বক্স এড করবেন এর কোড সমূহ নিচে দেওয়া হল :

<p class='note wr'>এখানে আপনার প্রয়োজনীয় তথ্য লেখুন</p>

সাধারণ নোটিশ বক্স :

নিচে সাধারণ নোটিশ বক্সের ডেমো দেওয়া হল :

এটি হলো সাধারণ নোটিশ বক্স । এখানে আপনি আপনার পোষ্টের যে কোন জায়গাকে হাইলাইট করতে পারেন ।

কিভাবে আপনি আপনার সাইটে সাধারণ নোটিশ বক্স এড করবেন তার কোড সমূহ নিচে দেওয়া হল :

<p class='note'>এখানে আপনার প্রয়োজনীয় তথ্য লেখুন</p>

টেবিল

টেবিল একটি গুরুত্বপূর্ণ জিনিস যাতে অনেক ধরনের প্রোডাক্টের স্পেসিফিকেশন তুলে ধরা যায় । এই টেবিলের একটি ডেমো নিছে দেওয়া হল :

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700

টেবিল তৈরি জন্য কোডগুলো নিচ দেওয়া হল :

<div class='table'>
  <table style='white-space:nowrap; min-width:100%;'>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>
</div>

কোড বক্স

আপনি আপনার ব্লগার পোস্টে কিভাবে প্রয়োজনীয় কোড সমূহ শো করাবেন এর বক্সের ডেমো নিচে দেওয়া হল :

Your_code_is_here

কোন বক্স তৈরি করতে কোড সমূহ নিচে দেয়া হলো :

<!--[ Change data-text to .html, .css, .js or any language ]-->
<div class='pre notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

বাটন

কিভাবে আপনি আপনার ব্লগার পোস্টে অথবা ব্লগার পেজে ডাউনলোড অথবা ডেমো বাটন এড করবেন তার একটি ডেমো নিচে দেওয়া হল :

Download Demo

ডাউনলোড অথবা ডেমো বাটন কিভাবে তৈরি করবেন তার কোড সমূহ নিচে দেওয়া হল :

<a class='button' href='url_is_here'><i class='icon dl'></i>Download</a>
<a class='button' href='url_is_here'><i class='icon demo'></i>Demo</a>

কাউন্টডাউন ডাউনলোড বাটন

এখন আপনারা দেখবেন আপনারা কিভাবে আপনার ব্লগার পোস্টে অথবা পেইজে অথবা যে কোথাও কিভাবে কাউন্টডাউন বাটন সেট করবেন । এই কাউন্টডাউন বাটনের একটি ডেমো নিচে দেওয়া হল :

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

Music_Wallpaper.png Music 3.05MB 1920×1080 .png

কিভাবে কাউন্টডাউন ডাউনলোড বাটন তৈরি করবেন তার কোডসমূহ নিচে দেওয়া হল

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>Music_Wallpaper.png</span>
        <span data-text='Category'>Music</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>