টেমপ্লেট ডিজাইনার সবাই ব্যবহার করতে পারবেন

আমরা এর আগে মার্চ মাসে 'ব্লগার ডিজাইনার' দিয়ে নিজের টেমপ্লেট নিজেই সম্পাদনা করার কথা জেনেছিলাম। তখন সুবিধাটি শুধুমাত্র draft.blogger.com ঠিকানায় পাওয়া যেত। কিন্তু এখন এই সুবিধাটি সবার জন্য উন্মুক্ত করা হয়েছে। এখন থেকে ব্লগার টেমপ্লেট ডিজাইনার সুবিধাটি blogger.com ঠিকানাতেও পাওয়া যাবে।

• গুগল আইডি ও পাসওয়ার্ড দিয়ে Blogger.com এ লগইন করুন।
• দেখতে পারবেন যে, আগের Layout ট্যাবটির নাম পরিবর্তন করা হয়েছে।
• এখন এর নাম Design, এখানে 'Template Designer' নামক নতুন একটি ট্যাব দেখা যাচ্ছে।

ইতিমধ্যে এই সুবিধাটিতে বেশ কিছু পরিবর্ধন ও পরিমার্জন করা হয়েছে। যেসব পরিবর্তন ইতিমধ্যে করা হযেছে সেগুলো হলঃ

• সর্বমোট ১৯টি নতুন টেমপ্লেট
• ডিজাইনকে লেআউট থেকে আলাদা করা হয়েছে। ফলে শুধুমাত্র CSS পাল্টিয়েই ব্লগের ডিজাইন পরিবর্তন করা যাবে। লেআউটের কোনরকম পরিবর্তন করতে হবে না।
• একশয়ের বেশি উচুমানের ব্যাকগ্রাউন্ড ছবি বিনেপয়সাতে ব্যবহার করা যাবে।
• একটিমাত্র জায়গা থেকে ডিজাইনের সব জায়গার রঙ পাল্টানো যাবে।
• লেআউটের আকার ঠিক রাখতে পিক্সেল পর্যন্ত পরিবর্তন করা যাবে। ফলে নির্দিষ্ট মাপ পাওয়ার জন্য কষ্ট করতে হবে না।
• রিয়াল টাইম প্রিভিউ ডিজাইন কন্ট্রোল প্যানেলের নিচে তাৎক্ষণিকভাবে দেখতে পারবেন।
• সহজ এবং ঝামেলামুক্ত। ফলে সামান্য ধারণা থাকলেই এটা ব্যবহার করতে কোন সমস্যা হবে না।
• Advanced ট্যাব ব্যবহার করে ডিজাইনারদের তৈরি CSS পাল্টে নিজের লেখা CSS ব্যবহার করতে পারেন। একই সাথে নিচের প্রিভিউ উইন্ডোতে তাৎক্ষণিক প্রিভিউ দেখতে তো পারবেনই।
• সবরকমের ব্রাউজারে সাপোর্ট করে। যেমন যদি গোলাকার কর্ণার চান, তাহলে তার জন্য প্রয়োজনীয় কোড ব্লগার বসিয়ে দেবে। ফলে ফায়ারফক্স, ইন্টারনেট এক্সপ্লোরার এবং ক্রোমের জন্য আলাদা আলাদা কোড আপনাকে বসাতে হবে না।

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

এই বিষয়ক খবর প্রকাশিত হয়েছে ব্লগার বাজ এর Blogger Template Designer Now Available To Everyone নামক পোস্টে।

সম্পূর্ণ  →  টেমপ্লেট ডিজাইনার সবাই ব্যবহার করতে পারবেন

ব্লগের নিচে অতিরিক্ত কলাম তৈরি করার পদ্ধতি

এর আগে আমরা ব্লগার.কম ব্লগে আরেকটি সাইডবার তৈরি করার পদ্ধতি শিখেছি। আশা করি আপনারা সফলভাবেই নিজেদের ব্লগে অতিরিক্ত একটি সাইডবার তৈরি করতে পেরেছেন। আজ আসুন জেনে নিই কিভাবে ব্লগের নিচে কয়েকটি কলামের বটমবার (Bottom bar for bottom columns) তৈরি করা যায়।

ব্লগের নিচে বটমবার থাকলে বেশ কিছু দিক দিয়ে সুবিধা আছে। "বাংলা হ্যাকস" ব্লগের নিচে দেখুন।

তিন কলামের একটি বার আছে। এখানকার কলামগুলোতে আমি গুরুত্বপূর্ণ কিছু গেজেট ও লিংক রেখে দিয়েছি। ফলে ব্লগের দুইপাশের সাইডবারের আকার দৃষ্টিকটুভাবে লম্বা হয়ে যায়নি। এরকম একাধিক (একের বেশি) কলাম আপনিও নিজের ব্লগে অন্যের দ্বারস্থ না হয়ে তৈরি করে নিতে পারেন। কিভাবে ব্লগের নিচে একাধিক কলাম তৈরি করা যায়, তাই আজ আমি বর্ণনা করবো।
How to create extra bottom columns on blogger blogspot blog. Here is the easiest method.

• যথারীতি গুগল আইডি ও পাসওয়ার্ড দিলে লগইন হয়ে নিন।
• Layout > Edit HTML ট্যাবে যেতে হবে। Expand Widget Templates এর পাশের চেকবক্সে টিক চিহ্ন দিতে হবে না।
  
• ]]></b:skin> লেখার উপরে নিচের কোডটি সম্পূর্ণ লিখে দিন।

• /* bottom
  ==================== */
  
  #bottom {
  width: 970px;
  position: relative;
  clear:both;
  margin: 0 auto;
  color:#4E0038;
  float: left;
  background:#efefef;
  padding: 5px 0 5px 0;
  }
  
  #bottom h2 {
  padding: 4px;
  margin: 0 auto;
  color:#884218;
  background-color: #addfff;
  font-size: 100%;
  color: #ff0000;
  font-weight:bold;
  border-bottom: 1px solid #ffffff;
  letter-spacing: 0px;
  }
  
  #bottom ul {
  padding: 0;
  margin: 0;
  }
  
  #bottom ul li {
  line-height: 26px;
  list-style-type: none;
  border-bottom: 1px dashed #031c5d;
  }
  
  #bottom ul li a {
  display: block;
  padding: 0 10px;
  color:#062D4E;
  text-decoration: none;
  
  }
  #bottom ul li a:hover {
  background: #B1ACB1;
  padding-left:5px;
  }
  
  #bottom1 {
  width: 250px;
  float: left;
  padding-left:10px;
  }
  
  #bottom2 {
  width: 250px;
  float: left;
  padding-left:10px;
  }
  
  #bottom3 {
  width: 220px;
  float: left;
  padding-left:10px;
  }
  
  #bottom4 {
  width: 200px;
  float: left;
  padding-left:10px;
  }

• সেভ করবেন না।
• এখানে আপনার ব্লগের আকার বুঝে #bottom {width: 970px; এবং bottomগুলোর width পরিবর্তন করে নিন। এই পরিবর্তনটি একটু সতর্ক হয়ে করতেই হবে। না হলে ব্লগের আকার এলোমেলো হয়ে যেতে পারে। এছাড়াও color:#4E0038; এবং background:#efefef; ইত্যাদির কালার কোড কালার চার্ট দেখে পরিবর্তন করতে পারবেন। চারটির জায়গায় তিনটি কলাম চাইলে যে কোন একটি কলামের সম্পূর্ণ কোড অর্থাৎ #bottom4 {
  width: 200px;
  float: left;
  padding-left:10px;
  } সম্পূর্ণটুকু মুছে দিতে পারবেন। এখানে মুছে দিলে নিচের অংশেও মুছে দিতে হবে।
  
• এবার আরও নিচে নেমে </div></div> <!-- end outer-wrapper --> লেখাটির ঠিক উপরে নিচের কোডগুলো বসিয়ে দিন।
• <div id='footer-wrapper'> কোডটির উপরেও বসাতে পারেন। আপনার কোন জায়গাটি পছন্দ তা নির্বাচন করে নিন।
  

• <div id='bottom'>
  
  <b:section class='bottom' id='bottom1'></b:section>
  
  <b:section class='bottom' id='bottom2'></b:section>
  
  <b:section class='bottom' id='bottom3'></b:section>
  
  <b:section class='bottom' id='bottom4'></b:section>
  </div>

• আমি চারটি কলাম তৈরি করার কোড দিয়েছি। যদি তিনটি কলাম চান, তাহলে <b:section class='bottom' id='bottom4'></b:section> এই রকম একটি লাইন সম্পূর্ণ মুছে ফেলতে হবে।
• আশা করি আমি সহজভাবে ব্লগার.কম এর ব্লগের নিচে অতিরিক্ত কলাম তৈরির পদ্ধতি বর্ণনা করতে পেরেছি। কোন জায়গায় খটকা থাকলে জানাতে ভুলবেন না যেন।
  

সম্পূর্ণ  →  ব্লগের নিচে অতিরিক্ত কলাম তৈরি করার পদ্ধতি

মন্তব্য ঘরে মন্তব্যকারীর অবতার দেখানোর পদ্ধতি

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

প্রথমে Setting> Comments ট্যাব থেকে মন্তব্যকারীর ছবি দেখানোর অপশনটি কার্যকর করেছি।
এবার Layout> Edit HTML ট্যাবে গিয়ে যে পরিবর্তনগুলো করেছি, তা নিম্নরূপ। এখানে দুটো বিষয় আছে। দেখুন তো আপনার ব্লগে মন্তব্যকারীদের কোন অবতার দেখা যায় কি না। যদি যায়, তাহলে প্রথম ধাপটি বাদ দিন। পুরনো টেমপ্লেট যাদের তাদের ক্ষেত্রে এমন হতে পারে। ব্লগার.কম মন্তব্যকারীদের ছবি দেখানোর অপশনটি চালু করার পর যারা ব্লগিং শুরু করেছেন, বা নতুন টেমপ্লেট লাগিয়ে নিয়েছেন, তারা সরাসরি দ্বিতীয় ধাপটি অনুসরণ করুন।

প্রথম ধাপঃ
নিচের কোডটি খুঁজে বের করুন।

<dl id='comments-block'>

এই লাইনটি মুছে ফেলে সেখানে নিচের লাইনটি লিখে দিন।
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
এবার <a expr:name='data:comment.anchorName'/> এই লেখাটির পরে নিচের কোডটি লিখে দিয়ে সেভ করুন।

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

এবার আপনার নিজের অবতারসহ যারা লগইন করে (ব্লগার একাউন্টে ছবি আছে) মন্তব্য করেছেন, তাদের অবতার দেখা যাবে।

কিন্তু যারা লগইন করেননি বা Anonymous হিসেবে মন্তব্য করেছেন, তাদের জন্য একটি সাধারণ ছবি দেখানোর জন্য নিচের কোডগুলি স্থাপন করুন।

দ্বিতীয় ধাপঃ
</b:skin> লেখাটির উপরে নিচের কোডটি স্থাপন করুন

/* Comment Avatar */
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSnEcGSDxzAUW7emzrxku0E4lAeK1nGE7ji7F4hywUbIBiS84UC5InVCcikoAxfw1rI8n1WxTCOpAR6XRvrUCKQa8HADF0eWYCdcTBRhDOAciFJaYOeln5K6CoMP52w3tfhNj6e-Fqk60T/s320/AvatarBlogger.png);
width:35px;
height:35px;
}

এই জায়গায় এই ছবিটির বদলে নিচের যে কোন একটি ছবির লিংক ব্যবহার করতে পারেন।

1. http://sites.google.com/site/banglahacks/shrd/commentavatar.png
2. http://sites.google.com/site/banglahacks/shrd/anon_avatar.png
3. http://sites.google.com/site/banglahacks/shrd/anonymousavatar.gif
4. http://sites.google.com/site/banglahacks/shrd/anonycmtavtr.png
5. http://sites.google.com/site/banglahacks/shrd/anonymous.gif

# উপরে দেয়া ছবিগুলির মধ্যে যে কোনটি ব্যবহার করতে পারেন। কোনরকম বাধানিষেধ নেই।

এবার <a expr:name='data:comment.anchorName'/> এই লাইনটি খুঁজে বের করে সম্পূর্ণ মুছে ফেলুন। এই কোডটুকু দুই জায়গায় থাকতে পারে। প্রথমে যেটা আছে, সেটা মুছে দিবেন। সেখানে নিচের কোডটুকু লিখে দিন।

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>

সেভ করুন। এবার মন্তব্যযুক্ত কোন ব্লগ পোস্ট পরীক্ষা করে দেখুন তো কাজ করছে কিনা? যদি না করে, তাহলে আমি তো আছি।

সম্পূর্ণ  →  মন্তব্য ঘরে মন্তব্যকারীর অবতার দেখানোর পদ্ধতি

আরেকটি সাইডবার তৈরি করার পদ্ধতি

আমাদের অনেকের ব্লগার.কম এ তৈরি করা ব্লগে সাইডবার রয়েছে একটা। কিন্তু ব্লগের বয়স যত বাড়তে থাকে, ততই পাঠকের সাথে শেয়ার করার মতো উপাদানের সংখ্যাও বেড়ে যায়। তখন আর একটা সাইডবারের প্রয়োজন খুব বেশি করে অনুভূত হয়। আর যখন আর একটি সাইডবারের প্রয়োজন বোধ করি, তখন নতুনভাবে টেমপ্লেট পরিবর্তন করা ছাড়া উপায় থাকে না। এদিকে ব্লগার.কম যে কটি টেমপ্লেট দেয়, সেগুলোর মধ্যে একটারও সাইডবার দুইটি নেই। সবকটি একটি সাইডবারের টেমপ্লেট। কিন্তু যেহেতু আর একটি সাইডবারের খুব দরকার, সেহেতু থার্ড পার্টির তৈরি টেমপ্লেট ব্যবহার করতেই হয়। তখন আবার নতুন করে গেজেট স্থাপন করা, সেটিং পরিবর্তন করা, বিভিন্ন কোড বসানো ইত্যাদি ঝামেলা ঘাড়ে এসে চাপে। এই উদ্ভট সমস্যা থেকে সহজেই মুক্তি পাওয়া সম্ভব যদি আমরা নিজেরাই একটি নতুন সাইডবার ব্লগার.কম এর ব্লগে বসিয়ে নিতে পারি। যদি নিজেই একাধিক সাইডবার বানিয়ে নিতে পারি, তাহলে আবার থার্ড পার্টির তৈরি করা টেমপ্লেট ব্যবহার করতে যাবো কেন, তাই না? তাছাড়া ব্লগে স্থাপিত কোড ও গেজেটগুলোকেও তো আর নতুন করে সাজিয়ে নিতে হবে না। হ্যাঁ, আজকে আমরা জানবো ব্লগার.কম এর ব্লগের সমস্ত কোড ও গেজেট থাকা অবস্থায় কিভাবে আর একটি নতুন সাইডবার বানানো যায়।

আমরা আলোচনার সুবিধার্থে Minima টেমপ্লেটকে বেছে নিয়েছি। অন্য সব টেমপ্লেটেও একইভাবে সাইডবার বসিয়ে নেয়া যাবে।

• প্রথমেই ব্লগার.কম এ গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন হয়ে নিন।
• Layout > Edit HTML ট্যাবে চলে যান।
• এখানে HTML কোডেরে মধ্যে স্ক্রল করে নিচে নামুন।
• এক জায়গায় লেখা আছে /* Outer-Wrapper------ */
• এই অংশের একটু নিচে দেখুন নিচের কোডঅংশটুকু লেখা আছে
• #sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
  }
• এই অংশটুকু সম্পূর্ণ কপি করে নিয়ে এর ঠিক নিচেই পেস্ট করুন।
• sidebar-wrapper নামটির শেষে আর একটি সংখ্যা ১/ ২ বসিয়ে দিন। তাহলে এই নতুন সাইডবারটির নাম হয়ে গেল sidebar-wrapper2
• এখানে width:220px; পরিবর্তন করে বিভিন্ন মাপ পরীক্ষা করতে পারেন।
• আমরা এর আগে কিভাবে ব্লগার.কম ব্লগের আকার পরিবর্তন করতে হয় তা জেনেছি। নতুন সাইডবারটির আকার যেহেতু 220px সেহেতু স্ক্রল করে একটু উপরে গিয়ে
  
• #outer-wrapper {
  width: 660px;
• এই অংশটুকুতে width:660px; এর সাথে 220 যোগ করে দিতে হবে। তাহলে সম্পূর্ণ মান হবে 880px, অর্থাৎ আপনার ব্লগের আকার হয়ে গেল ৮৮০ পিক্সেল।
• একইভাবে আরও উপরে গিয়ে
  
• #header-wrapper {
  width:660px;
• এই অংশের ৬৬০ পরিবর্তন করে ৮৮০ করে দিন।
• খেয়াল করেছেন কি#sidebar-wrapper {
  width: 220px;
  float: $endSide; এখানে float endSide লেখা রয়েছে। নতুন সাইডবারের এই জায়গায় startSide লিখে দিন। তাহলে নতুন সাইডবারটি পুরনো সাইডবারের বামপাশে থাকবে। পরস্পর কোড পাল্টাপাল্টি করেও নিতে পারেন।
  
• এবার স্ক্রল করে HTML কোডগুলোর আরও নিচে নামুন।
• এক জায়গায় লেখা আছে <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
  <b:widget id='HTML1' locked='false' title='' type='HTML'/>
  </b:section> এটা আগে থেকে সাইডবারের কোড।
  
• এই অংশটুকু আছে <div id='main-wrapper'> এর নিচে।
• নতুন সাইডবারের জন্য নিচের কোডটুকু main-wrapper এর উপরে বসিয়ে দিন। তাহলে main-wrapper এর আগে একটি ও পরে আর একটি সাইডবার থাকবে। এটা অবশ্য আপনার নিজস্ব মর্জির উপর নিভর্র করবে। আপনি ইচ্ছে করলে main-wrapper এর নিচেও বসাতে পারেন। সেক্ষেত্রে পোস্ট অংশের পাশে পরপর দুইটি সাইডবার থাকবে। যে কোডটুকু হবে তা এরকম
• <div id='sidebar-wrapper2'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>
  </div>
• PREVIEW দেখে নিন। সবকিছু ঠিকঠাক থাকলে SAVE TEMPLATE লেখা বাটনে ক্লিক করে পরিবর্তনটুকু সংরক্ষণ করুন।
• এখনি ব্লগ রিফ্রেস করতে যাবেন না।
• এবার Layout > Page Elements ট্যাবে আসুন। দেখুন, আপনার টেমপ্লেটের চেহারা নিম্নরূপ ধারণ করেছে।
• 
• HTML অংশে করা পরিবর্তনগুলোর কারণে বামপাশে একটি নতুন সাইডবার তৈরি হয়ে গেছে। কিন্তু এখনও কোন গেজেট লাগানো হয়নি।
• এই নতুন সাইডবারের Add a Gadget লেখাতে ক্লিক করে প্রয়োজনীয় গেজেট বসিয়ে নিন।
• এবার ব্লগ রিফ্রেশ করুন।
• আপনার ব্লগের পোস্ট অংশের পাশে নিচের ছবির মতো আর একটি সাইডবার দেখতে পারবেন।
• 
• আশা করি সব ধাপগুলো ঠিকমতো বর্ণনা করতে পেরেছি।
• উল্লেখ্য যে, সাইডবারের আকার নিজের মনমতো পাল্টে নিতে পারবেন। সে অনুযায়ী ব্লগের আকারেও পরিবর্তন করতে হবে।
  

সম্পূর্ণ  →  আরেকটি সাইডবার তৈরি করার পদ্ধতি

চার কলাম টেমপ্লেট- 'বাংলা ব্লগ টিপস'

আমি প্রথমে ব্লগ লেখা শুরু করেছিলাম "বাংলা ব্লগ টিপস" নাম দিয়ে। এই ব্লগের মূল বিষয় ছিল ব্লগার.কম এ খোলা ব্লগ নিয়ে বিভিন্ন আলোচনা। পরবর্তীতে আমি "বাংলা হ্যাকস" নামের ব্লগ খুলি। 'বাংলা ব্লগ টিপস' ব্লগের টেমপ্লেটটিই ছিল আমার ডিজাইন করা প্রথম টেমপ্লেট। এটা বেশ হালকা, পাতলা একটি টেমপ্লেট। বাংলাদেশের নেট স্পীডে খুব দ্রুত লোড হয়। অতিরিক্ত কোনরকম ছবির ফাইল ছাড়াও যে আকর্ষণীয় কোন টেমপ্লেট তৈরি করা যায়, এটা তার একটি জ্বলন্ত উদাহরণ। আজ আমি সেই ব্লগের টেমপ্লেটটি আপনাদের সবার ডাউনলোডের জন্য উন্মুক্ত করে দিচ্ছি।

কিছু বৈশিষ্ট্যঃ

• চার কলাম
• বামপাশের কলামটি সরু
• ডানপাশে দুইপ্রকারের কলাম আছে
• উপরের কলামটি প্রশস্ত
  
• নিচের দুইটি কলাম অপেক্ষাকৃত সরু
• ব্লগের একেবারে নিচে চারটি ফুটার কলাম আছে
• 'আদর্শলিপি' বাংলা ফন্টকে ডিফল্ট ফন্ট হিসেবে নির্দিষ্ট করা আছে।
• সার্চ ইঞ্জিন অপটিমাইজেসনে (SEO) সুবিধা হবার জন্য পোস্ট টাইটেলকে টুইক করা হয়েছে।
  

এই টেমপ্লেটটির রঙকে ইউনিক করতে বিভিন্ন জায়গায় সরাসরি কালার কোড বসানো আছে। তাই সব জায়গার রঙ আপনি ব্লগের ডিফল্ট রঙ পাল্টানোর পদ্ধতি দিয়ে পাল্টাতে পারবেন না। যে সব জায়গার রঙ পাল্টাতে পারবেন সেগুলো হলঃ

• Text color
• Blog Title Color
• Blog Description Color
• Post Title Color
• Border Color
• Sidebar Title Background Color
• Sidebar Title Text Color
• Text Font
• Sidebar Title Font
• Blog Title Font
• Blog Description Font
• Post Footer Font

সাধারণ তথ্যঃ

• ব্লগ বডির আকারঃ ৯৭০ পিক্সেল
• বামপাশের কলাম আকারঃ ১২০ পিক্সেল
• পোস্ট লেখার জায়গার আকারঃ ৪৮০ পিক্সেল
• ডানপাশের উপরের প্রসস্থ কলাম আকারঃ ৩৫৫ পিক্সেল
• ডানপাশের নিচের কলাম দুটির মধ্যে একটির আকার ২০০ পিক্সেল ও অপরটির আকার ১৫৫ পিক্সেল
• ব্লগ ফুটারের চারটি কলামের আকার যথাক্রমে ২৫০ পিক্সেল, ২৫০ পিক্সেল, ২২০ পিক্সেল এবং ২০০ পিক্সেল।
  

আশা করি এই টেমপ্লেটটি আপনাদের সাধারণ চাহিদাকে তৃপ্ত করতে পারবে।
ডেমো ব্লগ ঠিকানা
ডাউনলোড। জিপ ফাইলে আছে, আকার ৮.৩ কিলোবাইট

সম্পূর্ণ  →  চার কলাম টেমপ্লেট- 'বাংলা ব্লগ টিপস'

'ব্লগার ডিজাইনার' দিয়ে নিজের টেমপ্লেট নিজেই সম্পাদনা করুন

এবার নিজের ব্লগ নিজেই ডিজাইন করুন। হ্যাঁ, বন্ধুরা এতদিন ব্লগার.কম এর দেয়া ডিফল্ট টেমপ্লেটগুলো নিয়ে যাদের মনক্ষুন্নতা ছিল, তাদের জন্য আনন্দের খবর নিয়ে আমি আজ উপস্থিত হয়েছি। এখন থেকে নিজের ব্লগের টেমপ্লেট নিজেই ডিজাইন করতে পারবেন। অত্যাধুনিক সব ডিজাইন নিয়ে গুগল আপনার সেবার জন্য প্রস্তুত হয়েছে। আর এইসব ডিজাইন পরিবর্তন করার জন্য কোন xml ফাইল আপলোড করতে হবে না, কোথাও কোন HTML এডিট করতে হবে না।

• সাধারণত আপনি www.blogger.com এ লগইন করেন, তাই না? এবার www.draft.blogger.com এ গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন।
• ড্যাশবোর্ডের Layout ট্যাবে গেলে একেবারে ডানপাশে একটি নতুন লিঙ্ক দেখতে পারবেন।
• নাম Template Designer

• এক অন্যভুবনে প্রবেশ করবেন।
• এখানে স্ক্রিন দুটি অংশে বিভক্ত। উপরের অংশটি টেমপ্লেট ডিজাইনার এবং নিচে আপনার ব্লগের প্রিভিউ।
• 
  
  
• উপরের ডিজাইনার অংশের বামপাশের মেনুটি খুব শক্তিশালী। এখানে চারটি প্রধান মেনু আছে। সেগুলো হল: Templates, Background, Layout এবং Advanced
  
• প্রয়োজনীয় সব কমান্ড এখান থেকেই প্রয়োগ করা সম্ভব।
• Templates মেনু থেকে আপনি মোট চার রকমের টেমপ্লেট ডিজাইন এখান থেকে পাবেন। নাম: Simple, Picture window, Awesome এবং Watermark, তবে একটির তিনটিসহ বাকীগুলোর চারটি করে ভিন্নতা আছে। অতএব আপনি মোট ১৫ রকমের ডিজাইন এখান থেকে সিলেক্ট করতে পারবেন। যদি আপনার ব্লগের টেমপ্লেট কাস্টমাইজ করা হয়, তাহলে প্রথমে স্ক্রিণের মাঝামাঝি থাকা You've customized this template. Remove customizations লেখাতে ক্লিক করে কাস্টমাইজেশনগুলো মুছে ফেলুন।
  
• Background মেনু থেকে ব্লগের কালার থীম পরিবর্তন করার সাথে সাথে ব্যাকগ্রাউন্ড হিসেবে বিভিন্নরকমের ছবি নির্বাচন করতে পারবেন। ব্যাকগ্রাউন্ড থীম পরিবর্তন করার জন্য Background Image লেখার নিচের ছবিতে ক্লিক করুন।
• 
• Abstract, The Arts, Business, Celebrations, Entertainment, Family, Food & Drink, Health & Beauty, Hobbies & Crafts, Home & Garden, Nature, Patterns, Recreation, Science, Shopping, Technology, Textures এবং Travel শিরোনামের অসংখ্য ছবি থেকে যে কোন একটাকে ব্যাকগ্রাউন্ড ছবি হিসেবে বেছে নিতে পারবেন।
• 
• Layout মেনু থেকে ব্লগের কলাম সংখ্যা পরিবর্তন করতে পারবেন। এতকাল যারা ডিফল্ট দুইটি কলাম নিয়ে কাজ করতে করতে বিরক্ত হয়ে গেছেন, তাদের জন্য এই সুবিধাটি সত্যিই কাজে দেবে। এখান থেকে কয়টি কলাম দিয়ে ব্লগ সাজাতে চান, তা নির্বাচন করুন। এই Layout মেনুটি তিনটি সাবমেনুতে বিভক্ত। Body layout, Footer layout এবং Adjust width, ফুটার লেআউট দিয়ে ফুটারে কয়টি কলাম রাখতে চান, তা নির্বাচন করতে পারবেন। Adjust width দিয়ে ব্লগ ও সাইডবারের কলামগুলোর আকার বড়-ছোট করতে পারবেন।
• 
• Advanced মেনু দিয়ে আপনার ব্লগের বিভিন্ন অংশের টেক্সট কালার ও ফন্ট পরিবর্তন করতে পারবেন।
  
• স্ক্রিণের নিচে থাকা ব্লগ প্রিভিউতে পরিবর্তনগুলো খেয়াল রাখুন। যদি পছন্দ হয়, তাহলে উপরে ডানপাশে থাকা APPLY TO BLOG লেখা বোতামে ক্লিক করে পরিবর্তনগুলো ব্লগে প্রয়োগ করুন।
• একটু লক্ষ্য করে দেখুন যে স্ক্রিণের ঠিক মাঝামাঝি অংশে Reset post to template default, যদি কোনরকম ভুলত্রুটি হয়ে যায়, তাহলে এখানে ক্লিক করে ডিফল্ট অবস্থায় ফিরে যেতে পারবেন।

এই Template Designer অংশে টেমপ্লেটের সৌন্দর্য পরিবর্তন করার পর উপরে ডানে থাকা Back to Blogger লেখাতে ক্লিক করে ব্লগের নিয়মিত ড্যাশবোর্ডে প্রবেশ করুন। যথারীতি Layout অংশের Page Elements ট্যাবে ব্লগের বিভিন্ন কলামে প্রয়োজনীয় গেজেটগুলো স্থাপন করতে পারবেন।
Redesign your blogger template with blogger new template designer.
আমার কাছে এই নতুন টেমপ্লেট ডিজাইনগুলি সত্যিই ভাল লেগেছে। দিনে দিনে প্রযুক্তি পরিবর্তন হয়ে যাচ্ছে। মানুষের রুচি, সৌন্দর্যবোধ পাল্টাচ্ছে। সময়ে সাথে সাথে মানুষ নতুন কিছু পাবার জন্য উন্মুখ হয়ে উঠেছে। মানুষের এই নতুন চাহিদার প্রতি সম্মান করে ব্লগার তাদের ডিজাইনেও যে পরিবর্তন এনেছে, তা সত্যি প্রশংসার দাবীদার। ব্লগের বর্ডার, পোস্ট অংশ, সাইডবারের গোলাকার কর্ণার, ব্লগ বডির অর্ধস্বচ্ছ ভাব ব্লগলিখিয়েদেরকে সন্তুষ্ট করবে এ আমি জোর গলায় বলতে পারি। নতুন ওয়েব দুনিয়ায় আপনার পরিচিতিকে অন্যভাবে উপস্থাপন করতে এই বৈশিষ্ট্যগুলো সহায়তা করবে। তবে সার্বিকভাবে ব্লগ লোডিং টাইম একটু বেশি লাগছে বলেই আমার কাছে মনে হয়েছে (এটা আমার ধীরগতির ইন্টারনেট কানেকশনের জন্যও হতে পারে)।

# মনে রাখুন যে এটা blogger.com এ পাওয়া যাবে না। পাওয়া যাবে draft.blogger.com সাইটে। অর্থাৎ এখনও এই সুবিধাটি নিয়ে পরীক্ষা নিরীক্ষা চলছে। কোনরকম সমস্যা হয়ে গেলে ব্লগার কর্তৃপক্ষ ক্ষতিপূরণের দায়িত্ব নেবে না।
নিচের ছবিটি একটি ডেমো ব্লগের। আপনাদের উদ্দেশ্যে নমুনা হিসেবে উপস্থাপন করছি।

সম্পূর্ণ  →  'ব্লগার ডিজাইনার' দিয়ে নিজের টেমপ্লেট নিজেই সম্পাদনা করুন

কোন গেজেট না হারিয়ে নিরাপদে Blogspot.com ব্লগের টেমপ্লেট পরিবর্তন করুন

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

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

• KEEP WIDGETS: যদি পুরনো গেজেটগুলো রেখে দিতে চান, তাহলে এখানে সেভ করুন। এটাই ডিফল্ট হিসেবে নির্বাচন করা আছে।
  
• DELETE WIDGETS: যদি মুছে ফেলতে চান, তাহলে এখানে ক্লিক করুন।
• CANCEL: যদি টেমপ্লেট পরিবর্তন করার সিদ্ধান্ত পাল্টান তাহলে এখানে ক্লিক করুন।

Changing template is safe now in blogger blog. You can keep or delete any widget.

সম্পূর্ণ  →  কোন গেজেট না হারিয়ে নিরাপদে Blogspot.com ব্লগের টেমপ্লেট পরিবর্তন করুন

টেমপ্লেট পরিবর্তন করতে গিয়ে গেজেটগুলো নিরাপদে রাখুন

Blogger.com এর কোন ব্লগে টেমপ্লেট পরিবর্তন করার পদ্ধতি আমরা জানি। এই পোস্ট এবং এই পোস্টটিতে এ বিষয়ে বিস্তারিত আলোচনা করা হয়েছে। কিন্তু টেমপ্লেট পরিবর্তন করতে গেলে একটি সাধারণ সমস্যায় পড়তে হয়, আর তা হল গেজেট হারিয়ে যাওয়া। হয়তো অনেক কষ্ট করে বিভিন্ন জায়গা থেকে গেজেট সংগ্রহ করে ব্লগের সাইডবারগুলোতে লাগিয়েছেন। পরবর্তীতে টেমপ্লেট পরিবর্তন করতে গেলে এই গেজেটগুলো মুছে যায়। সাধারণ কয়েকটি গেজেট থাকলে সেগুলো মুছে দিয়ে নতুন টেমপ্লেট স্থাপন করা যেতে পারে। কিন্তু যদি ব্লগে বয়স বেশি হয় এবং আপনি শখ করে বা প্রয়োজনে বিভিন্নরকম গেজেট ব্লগে লাগানোর পর টেমপ্লেট পরিবর্তন করতে চান, সেক্ষেত্রে তো গেজেটগুলো মুছে যাওয়া কষ্টের হয়ে পরে। তাই না? তাই আজ আমরা জানবো কিভাবে টেমপ্লেট পরিবর্তন করতে গিয়ে পুরনো গেজেটগুলোকে আলাদাভাবে সেভ করে রাখতে পারি।
Save your favorite gadgets in blogger blog with notepad or leafpad.
গেজেটগুলোর বেশিরভাগ সাধারণত HTML কোড দিয়ে তৈরি হয়। আর এগুলো আমরা স্থাপন করি ব্লগের সাইডবারে বিভিন্ন HTML/ Javascript গেজেটবক্সে। যখন আপনি টেমপ্লেট পরিবর্তন করার সিদ্ধান্ত গ্রহণ করবেন, তার পূর্বে একটি সহজ পদ্ধতিতে এই গেজেটগুলো সেভ করে রাখতে পারেন।

• ব্লগার.কম এ লগ ইন হয়ে নিন।
• Layout > Page Elements ট্যাবে যান।
• এখানে HTML/ Javascripst গেজেটগুলোর কোণে থাকা Edit বাটনে ক্লিক করুন। গেজেটটি খুলে যাবে।
• সেখানে থাকা কোডগুলো সম্পূর্ণ কপি করে Notepad বা Leafpad যে কোন টেক্সট এডিটরে পেস্ট করুন।
• এই টেক্সটফাইলটি my_blog_gadgets.txt নামে সেভ করুন।
• ব্লগের গেজেটগুলোর কোড নিরাপদে থেকে গেল।
• এবার টেমপ্লেট পরিবর্তন করার পর এক এক করে গেজেটগুলোর কোড নতুন নতুন HTML/ Javascropts গেজেটবক্সে কপি করে দিন।
• সবগুলো গেজেট ফিরে পাবেন।
• আশা করি এবার আর গেজেট হারানোর দুঃখ পেতে হবে না।
• নতুন নতুন টেমপ্লেট পরীক্ষা করে দেখতে http://templates.banglahacks.com সাইটটি একবার ভিজিট করে দেখতে পারেন।
  

সম্পূর্ণ  →  টেমপ্লেট পরিবর্তন করতে গিয়ে গেজেটগুলো নিরাপদে রাখুন

Blogger.com এর জন্য বর্ণময় টেমপ্লেট 'বর্ণিল ০২'

ব্লগার.কম (Blogger.com) এর জন্য বর্ণময় টেমপ্লেট 'বর্ণিল ০২' নিয়ে আজ আমি উপস্থিত হয়েছি। আপনারা যারা 'বাংলা হ্যাকস' ব্লগের নিয়মিত পাঠক তারা 'বর্ণিল ০১' টেমপ্লেটটি সম্পর্কে জানেন। এই নতুন 'বর্ণিল ০২' টেমপ্লেটে আগের টেমপ্লেটটির যে প্রধান বৈশিষ্ট্য সেগুলো সব আছে। এছাড়া অতিরিক্ত আরও কিছু সুবিধা নিয়ে এই বর্ণিল ০২ টেমপ্লেটটির আবির্ভাব। আশা করি ব্লগার.কম প্লাটফর্মে যাঁরা ব্লগ খুলেছেন, তাঁদের কাছে এই টেমপ্লেটটিও হবে।

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

অতিরিক্ত যে বিশেষ বৈশিষ্ট্য এতে রয়েছে সেগুলো হলঃ

• হেডারের পাশে ৪৬৮×৬০ পিক্সেলের একটি গেজেট বক্স রয়েছে। আমি এখানে গুগলের এডসেন্স লাগিয়ে রেখেছি। আপনারা ইচ্ছে করলে একই সাইজের অন্য কোন গেজেট এখানে লাগাতে পারবেন।
• উপরে যাওয়ার যে বোতাম ব্লগশরীরের ডানে নীচে লাগানো আছে, তা এবার তৈরি করা হয়েছে গুগলের jquery কোড দিয়ে। ফলে ক্লিক করলে ধীরে ধীরে উপরে চলে আসবেন।
• একেবারে নিচে চারটি কলামের বদলে এবার দিয়েছি তিনটি কলাম। এর বামপাশের ও মাঝের কলামটি অপেক্ষাকৃত বড় আকারের।
• কমেন্ট বক্সে ব্লগলেখকের মন্তব্যটি নির্দিষ্ট রঙে রাঙানো থাকবে। এই রঙ এবং মন্তব্যটির বর্ডারের রঙ ব্লগারের ডিফল্ট রঙ পরিবর্তন করার জায়গা থেকে পাল্টাতে পারবেন।

এই বিশেষ বৈশিষ্ট্যগুলো ছাড়া পূর্বের যে বৈশিষ্ট্যগুলো এই নতুন 'বর্ণিল ০২' টেমপ্লেটের অক্ষুন্ন রয়েছে, সেগুলো হলঃ
Now I am publishing a new attractive colorful template for blogger.com blog.
প্রধান বৈশিষ্ট্য:

• বাংলা ভাষা সাপোর্ট।
• ৩ (তিন) কলাম।
• ব্লগের নিচের কলাম রয়েছে।
  
• 'বিস্তারিত পড়ুন' সুবিধাটি বিল্টইন রয়েছে
  
• SEO পোস্ট টাইটেল এনাবল করা আছে
• 'উপরে আসুন' বোতামটি বিল্টইন
  
• শরীরে বিভিন্ন জায়গার রঙ ড্যাশবোর্ডের রঙ পাল্টানোর জায়গা থেকে পাল্টাতে পারবেন।
• হেডারে ঠিক নিচে একটি মেনুবার/ ন্যাভিগেশন বার আছে।
• ব্লগসার্চ বিল্টইন
  

টেমপ্লেটের যেসব অংশের রঙ ব্লগার.কম এর ডিফল্ট রঙ পরিবর্তন করার ট্যাব থেকে পাল্টাতে পারবেন সেগুলো হলো: This template is free to download and share.

Page background color
Outer background color
Text color
Link color
Visited link color
Link hover color
Header background color
Blog title color
Blog description color
Post title color
Post title background color
Post title hover color
Post background color
Border color
Post image border color
Post Quote left border color
Navbar background color
Navbar text color
Navbar link color
Navbar link hover color
Navbar right border color
Sidebar title background color
Sidebar title border color
Sidebar title text color
sidebar text color
Header 2 color
Profile text color
Bottom text color
Bottom top border color
Bottom title text color
Bottom title border color
Left bottom background color
Center bottom 1 background color
Center bottom 2 background color
Right bottom background color
Blog author comment background color
Blog author comment background border color
Footer background color
Footer top border color

টেমপ্লেটটির আকারগত বৈশিষ্ট্যগুলো হলঃ

হেডার ইমেজ সাইজঃ ৫০০ পিক্সেল
ডানপাশের গেজেট বক্স সাইজঃ ৪৭০ পিক্সেল
ব্লগ লেখার জায়গাঃ ৫০০ পিক্সেল
বামপাশের সাইডবারঃ ১৬০ পিক্সেল
ডানপাশের সাইডবারঃ ৩২০ পিক্সেল
নিচের বামপাশের কলাম আকারঃ ৩৪০ পিক্সেল
নিচের মাঝের কলাম আকারঃ ৩৪০ পিক্সেল
নিচের ডানপাশের কলাম আকারঃ ২৫৫ পিক্সেল

* নেভিগেশন মেনুবারে (Navigation Menubar) থাকা লিংকগুলো পরিবর্তন করে নিজের পছন্দ ও প্রয়োজনমতো লিংক স্থাপন করার জন্য নিচের ছবিটি ভালোভাবে লক্ষ্য করুন।

Edit HTML পাতায় <div id="navigation"> কোডটি খুঁজে বের করুন। Cntrl+F চেপে সেখানে কোডটি লিখে দিলে সহজে খুঁজে পাবেন। <div id="navigation"> এর নিচের থাকা লিংকগুলো পরিবর্তন করে দিন। উপরের ছবিটি লক্ষ্য করুন। কোন কোন লিংক পরিবর্তন করতে হবে তা লাল দাগ দিয়ে চিহ্নিত করা হয়েছে। লিংক লেখার নিয়ম জেনে নিন এই পোস্ট থেকে।

• ডেমো ব্লগ দেখুন
  
• ডাউনলোড করুন। ফাইল ফরমেট: জিপ (Zip) ফাইল। আকার: ৯.৮ কিলোবাইট
  

আশা করি কোন সমস্যায় পড়লে নিঃসঙ্কোচে জানাতে দ্বিধা করবেন না।

সম্পূর্ণ  →  Blogger.com এর জন্য বর্ণময় টেমপ্লেট 'বর্ণিল ০২'

গুগলপেজ ক্রিয়েটরে থাকা ফাইলগুলো সরিয়ে নিন

আমাদের অনেকেই Google page Creator (Google pages) অনেকদিন থেকেই ব্যবহার করে আসছি। মনের মতো করে স্ট্যাটিক ওয়েব সাইট তৈরির এই দারুণ ওয়েবটুলটি গুগল বন্ধ করে দিচ্ছে একথা ২০০৮ সাল থেকে শোনা যাচ্ছে। বহুবার বিভিন্নভাবে সতর্ক করে দেয়া সত্ত্বেও ব্যবহারকারীরা গুগল পেজ ক্রিয়েটর ব্যবহার করা বন্ধ করছেন না। কিন্তু এবার বোধহয় গুগল একেবারে শেষ সিদ্ধান্ত নিয়ে ফেলেছে যে আর কোন সুযোগ দেয়া হবে না।

গুগল আগেই বলে দিয়েছিল যে Google page creator এর মধ্যে যাদের ওয়েবসাইট খোলা আছে তারা যেন যত তাড়াতাড়ি সম্ভব Google Sites এ তাদের পেজ ও হোস্ট করা ফাইলগুলো সরিয়ে নেয়। আমরা অনেকেই পেজক্রিয়েটরে বিভিন্ন ছবি ও জাভাস্ক্রিপ্ট ফাইল হোস্ট করে রেখে দিয়েছি এবং সেই ফাইলগুলোর লিংক ব্লগারের ব্লগ সাজানোর জন্য ব্যবহার করছি। গুগল এর আগেও বলেছিল যে এই ফাইলগুলোকে গুগল সাইটে সরিয়ে নিয়ে আসতে। কিন্তু আমরা গুগল পেজ ব্যবহার বন্ধ করতে চাইনি, এই প্রতিবাদ হিসেবে এবং ঝামেলা মনে করে ফাইলগুলো সরাইনি। এবার গুগল একটি নতুন টুল তৈরি করেছে। এই টুল দিয়ে অতিসহজে Google page creator এ থাকা ফাইলগুলোকে Google sites (sites.google.com)এ নিয়ে আসা যাবে।

ব্লগার.কম এ লগইন করতে গিয়ে নিচের সতর্কবার্তাটি দেখেছেন কি?
এখানে লেখা রয়েছে

Update your templates

Your templates include links to files hosted on Google Page Creator, a service that is soon migrating to Google Sites. Do you want Blogger to update those links now? Learn more

Update and review Dismiss

এই বার্তার মাধ্যমে গুগলপেজেস ব্যবহারকারীকে গুগল একটা শেষ সুযোগ দিতে চাচ্ছে বলে মনে হয়। এখনই Update and review লেখাতে ক্লিক করুন। http://bloggerhosting.appspot.com এ আপনি একাউন্টে রেজিস্টার করা ব্লগগুলির আইডিসহ রিডাইরেক্ট হয়ে যাবেন। সেখানে নিচের ছবির মতো একটি নতুন পেজ আসবে। সেখানে Grant Access বোতামে ক্লিক করুন।
খুলে যাওয়া পরের পাতায় আপনার একাউন্টে থাকা ব্লগগুলির একটি তালিকা দেখা যাবে।
আপনার কোন ব্লগ আপডেট করতে হবে কিনা তা এই পাতায় চিহ্নিত করা থাকবে। উপরের ছবিতে দেখুন 'বাংলা হ্যাকস' ব্লগের কোন ফাইল গুগলপেজেস এর সাথে লিংক করা নাই। তাই লেখা রয়েছে No references to Page Creator.

কিন্তু যদি কোন ফাইল কোন ব্লগের সাথে লিংক করা থাকে, যা আপনাকে সরিয়ে আনতেই হবে, তাহলে সেই ব্লগের পাশে লেখা থাকবে Found 3 references to Page Creator. নিচের ছবি দেখুন।
এক্ষেত্রে Update references লেখা লিংকে ক্লিক করুন। পরের পাতায় চলে আসবেন।
এখানে Download your blog template লেখাতে ক্লিক করে আপনার ব্লগের টেমপ্লেটটি ডাউনলোড করে নিন। এবং Next লেখা বোতামে ক্লিক করে এগিয়ে যান।

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

# যদি আপনি জানেন যে গুগল পেজ ক্রিয়েটরে আপনি কোন সাইট তৈরি করেননাই, কিংবা কোন ফাইল আপলোড করেন নাই। তাহলে ব্লগারে প্রবেশ করার সাথে সাথে যদি কোন সতর্কবার্তা দেখা যায়, সেখানে লেখা Dismiss লিংকটিতে ক্লিক করে দিন। আপনি যেহেতু নিশ্চিত যে এর ফলে আপনার কোন ক্ষতি হবে না, সেহেতু অযথা দুঃশ্চিন্তিত হবার কোন কারণ নেই।

আরও তথ্যের জন্য ব্লগারের এই হেল্প পাতাটি একবার দেখে নিতে পারেন।

সম্পূর্ণ  →  গুগলপেজ ক্রিয়েটরে থাকা ফাইলগুলো সরিয়ে নিন

এক বর্ণময় টেমপ্লেট 'বর্ণিল' ০১

রঙিন এক টেমপ্লেট নিয়ে আজ আপনাদের সামনে আমি উপস্থিত হয়েছি। এর নাম 'বর্ণিল' ০১। এই টেমপ্লেটটি তিন কলামের। মূল পোস্ট অংশের দুইপাশে কলাম রয়েছে। ফুটারেও রয়েছে ৪টি কলাম।


বৈশিষ্ট:

• তিন কলাম।
• ফুটার কলাম ৪টি
• বিস্তারিত পড়ুন বিল্টইন
• SEO পোস্ট টাইটেল এনাবল করা আছে
• 'উপরে আসুন' বোতামটি বিল্টইন
  
• শরীরে বিভিন্ন জায়গার রঙ ড্যাশবোর্ডের রঙ পাল্টানোর জায়গা থেকে পাল্টাতে পারবেন।
• হেডারে ঠিক নিচে একটি মেনুবার/ ন্যাভিগেশন বার আছে।
• ব্লগসার্চ বিল্টইন
  

যেসব জায়গার রঙ পাল্টাতে পারবেন সেগুলো হলো:

• Page background color
  Outer background color
  Text color
  Link color
  Visited link color
  Link hover color
  Header background color
  Blog title color
  Blog description color
  Post title color
  Post title background color
  Post title hover color
  Post background color
  Border color
  Post image border color
  Post Quote left border color
  Navbar background color
  Navbar text color
  Navbar link color
  Navbar link hover color
  Navbar right border color
  Sidebar title background color
  Sidebar title border color
  Sidebar title text color
  sidebar text color
  Header 2 color
  Profile text color
  Bottom text color
  Bottom top border color
  Bottom title text color
  Bottom title border color
  Left bottom background color
  Center bottom 1 background color
  Center bottom 2 background color
  Right bottom background color
  

* নেভিগেশন মেনুবারে (Navigation Menubar) থাকা লিংকগুলো পরিবর্তন করে নিজের পছন্দ ও প্রয়োজনমতো লিংক স্থাপন করার জন্য নিচের ছবিটি ভালোভাবে লক্ষ্য করুন।

Edit HTML পাতায় <div id="navigation"> কোডটি খুঁজে বের করুন। Cntrl+F চেপে সেখানে কোডটি লিখে দিলে সহজে খুঁজে পাবেন। <div id="navigation"> এর নিচের থাকা লিংকগুলো পরিবর্তন করে দিন। উপরের ছবিটি লক্ষ্য করুন। কোন কোন লিংক পরিবর্তন করতে হবে তা লাল দাগ দিয়ে চিহ্নিত করা হয়েছে। লিংক লেখার নিয়ম জেনে নিন এই পোস্ট থেকে।

• ডেমো ব্লগ
• ডাউনলোড

This is a three column template. Download and use in your blogspot blog free.

সম্পূর্ণ  →  এক বর্ণময় টেমপ্লেট 'বর্ণিল' ০১

একটি গাঢ় রঙের টেমপ্লেট 'মায়া' - ০১

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

এই টেমপ্লেটটির ডিফল্ট বাংলা ফন্ট 'আদর্শলিপি'। ফলে বাংলা লেখা সঠিকভাবেই দেখা যাবে। আলাদাভাবে কোন সেটিংস পরিবর্তন করতে হবে না। 'আদর্শলিপি' সহ আরও কিছু ফন্টসহ একটি ছোট ফন্টপ্যাকেজ (ফাইলের আকার: 539.4 KB, জিপ ফাইল) ডাউনলোড করুন। কি কি ফন্ট এই প্যাকেজটিতে রয়েছে তা জানতে এই পাতাটি একবার পড়ে দেখতে পারেন।
This is a dark template. Download a zip file contain unicode Bangla Fonts. Main features are.
এর বৈশিষ্ট্যগুলো হল:

• পোস্ট অংশের ডানপাশে একটি কলাম রয়েছে
• ডানপাশের কলামটি শুরু হয়েছে হেডারের পাশাপাশি অবস্থান থেকে
  
• পোস্ট অংশের নিচে রয়েছে দুইটি ছোট কলাম
• ব্লগের একেবারে নিচে রয়েছে তিনটি কলাম
  
• ব্লগের মূল ব্যাকগ্রাউন্ড গাঢ় কালচে নীল রঙের
• পোস্ট পাতার ব্যাকগ্রাউন্ড গাঢ় নীল রঙের
• সাইডবারের ব্যাকগ্রাউন্ড গাঢ় সবুজ রঙের

আরও কিছু বৈশিষ্ট্য: You can change all the elements. It is a adsense ready template.

• ব্লগের প্রস্থ ৮৮৫ পিক্সেল
• পোস্ট পাতার প্রস্থ ৫৪০ পিক্সেল
• ডানপাশের সাইডবারের প্রস্থ ৩৩৫ পিক্সেল
• পোস্ট পাতার নিচের কলাম দুটির প্রস্থ ২৫৫ পিক্সেল করে
• একেবারে নিচের কলাম তিনটির প্রস্থ যথাক্রমে ২৫০ পিক্সেল, ২৪০ পিক্সেল ও ৩৫০ পিক্সেল
• ফলে ব্লগের শরীরের বিভিন্ন জায়গায় গুগল এডসেন্স কোড লাগাতে কোনরকম সমস্যা হবে না।
  
•  
• এছাড়াও যা রয়েছে
This template has some unique and special feature.
• 'বিস্তারিত পড়ুন' সুবিধা
• Breadcramb সুবিধা
• সার্চ ইঞ্জিন উপযোগী পোস্ট টাইটেল দেখানোর ব্যবস্থা

ব্লগারে ডিফল্ট রঙ পরিবর্তনের জায়গা থেকে যেসব রঙ পরিবর্তন করতে পারবেন সেগুলো হল:

• Text Color
• Post Body Link Color
• Blog Title Color
• Blog Description Color
• Body Image Border Color
• Sidebar Text Color
• Post Body Visited Link Color
  

ব্লগের টেমপ্লেট পাল্টানোর পদ্ধতি জানুন এই পাতা থেকে। টেমপ্লেট পাল্টাতে গিয়ে একটি সাধারণ সমস্যায় পড়তে পারেন। সমাধান জানুন এখান থেকে। If you face any problem to change this blogger blogspot template please inform me.
আশা করি এই অনন্যসাধারণ টেমপ্লেটটি আপনাদের কাছে ভালো লাগবে। I wish you like this.

• ডেমো ব্লগ
Demo blog
• ডাউনলোড লিংক, ফাইল সাইজ 7.8 KB, Zip File
Download this unique and elegant dark blogger template.

সম্পূর্ণ  →  একটি গাঢ় রঙের টেমপ্লেট 'মায়া' - ০১

সঠিক ব্লগ টেমপ্লেট বেছে নিন

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

প্রথমেই যেটা মাথায় রাখতে হবে তা হল আপনার ব্লগের বিষয়বস্তু অনুযায়ী টেমপ্লেট পছন্দ করতে হবে। নাহলে টেমপ্লেটের অনেক অংশ আপনের ব্লগ অনুযায়ী বদল করতে হতে পারে, নানারকম অদলবদল করতে করতে শেষে দেখা যাবে যা দেখে পছন্দ করেছিলেন তার বিন্দুবিসর্গও বাকি নেই টেমপ্লেটে। সহজ কথায়, রান্নার রেসিপির ব্লগের জন্য স্বাস্থ্য বিষয়ক টেমপ্লেট বেছে নেবেন না, টেকনোলজি ব্লগের জন্য ফ্যাশান টেমপ্লেট বেছে নেবেন না; দেখতে যতোই সুন্দর লাগুক না কেন। এমন করলে আপনাকে ব্লগের হেডার ছবি পরিবর্তন করতে হবে, অন্যান্য কিছু দিকও বদলে ফেলতে হতে পারে। ব্লগের কোড কিভাবে লেখা সেই বিষয়ে সামান্য জ্ঞান না থাকলে এইসব করা হবে আরো কঠিন কাজ। তাই চেষ্টা করুন যতো অল্প পরিবর্তন ঘটানো যায় মূল টেমপ্লেটে।

ব্লগের সাইডবার আমাদের অনেকের কাছেই অনেক আকর্ষনীয় স্থান, সেখানে আমরা প্রচুর উইজেট সাজাই। অযথা কোনো অনাকাঙ্খিত উইজেট যুক্ত করা থেকে বিরত থাকুন। আপনার ব্লগ আপনার পাঠকদের জন্য, তাই আপনার ভালোলাগার চেয়ে তাদের প্রয়োজন মাথায় রেখেই উইজেট সাজান। ব্লগার ব্যাতীত অন্য কারো উইজেট সাজালে তা যেমন একদিকে লোড হতে দেরী হয়, অন্যদিকে তেমনি তাদের ব্লগ কিম্বা ওয়েবসাইটের দিকে লিঙ্ক যাবে আপনার ব্লগ থেকে এবং এতে তারা উপকৃত হবেন, আপনি নয়।

২-কলাম বিশিষ্ট নাকি ৩-কলাম বিশিষ্ট টেমপ্লেট নেবেন? এটি পরবর্তী প্রধান আলোচ্য বিষয়। আপনি যদি মূলত ছোট আকারের পোস্ট লেখেন, তাহলে ৩-কলাম বিশিষ্ট টেমপ্লেট নেওয়াই ভালো হবে, সেক্ষেত্রে দুটি সাইডবার পাবেন যাতে পছন্দমতো উইজেট সাজাতে পারবেন; কিন্তু যদি আপনি বড় আকারের পোস্ট লেখেন, তাহলে ২-কলাম বিশিষ্ট টেমপ্লেট আপনার জন্য উপযোগী হবে। তাতে লেখার স্থান থাকবে চওড়া, পাশে একটিই সাইডবার যেখানে কেবল প্রয়োজনীয় উইজেট দেবেন। চওড়া একটি পোস্ট কলামের আরেকটি আকর্ষনীয় দিক আপনি এতে একটু বড় আকারের ছবি যুক্ত করে পোস্ট লিখতে পারবেন। পোস্টে ভিডিও যুক্ত করলেও তা চওড়া পোস্ট কলামে ভালোই দেখাবে।

ব্লগ ফুটার সাজান সুন্দর করে। বাংলা হ্যাকস্‌ ফুটার দেখুন, ৪'টি কলাম দিয়ে সুন্দর করে সাজানো আছে, দেখতেও সুন্দর লাগে এইগুলি। এখানে প্রয়োজনীয় এবং অপ্রয়োজনীয় যাবতীয় উইজেট আপনি দিতে পারেন, এতে পাঠকের কোনোই বিরক্তিবোধ হবেনা এবং যেহেতু ব্লগের একেবারে নিচে থাকে, তাই মূল পোস্টের সাথে কোনোভাবেই দৃশ্যতঃ ব্যাঘাত ঘটাবেনা। এখানেই দিন সাম্প্রতিক পোস্ট, সাম্প্রতিক মন্তব্য, ব্লগের সম্বন্ধে কিছু কথা ইত্যাদি উইজেট, এবং শেষেরটি দিন আপনার পছন্দের অন্যকিছু উইজেট। দিতে পারেন পাঠকদের রায় চেয়ে একটি উইজেট।

আপনাদের কথা মাথায় রেখেই তৈরী হয়েছে বাংলা হ্যাকস্‌ টেমপ্লেট ব্লগ, পছন্দ করে নিন আপনার মনের মতো টেমপ্লেট!

সম্পূর্ণ  →  সঠিক ব্লগ টেমপ্লেট বেছে নিন

ব্লগার.কম এর ব্লগে Breadcrumb স্থাপনের পদ্ধতি

অনেক ওয়েবপেজের (Webpage) উপরে একটি অন্যরকম তথ্য (Information) থাকে। এই তথ্য থেকে জানা যায়, বর্তমানে যে পেজটি দেখছি, তা মূল 'হোম' পেজ থেকে কত দূরে রয়েছে। কোন ক্যাটাগরী (Category) বা লেবেলের (Label) অন্তর্ভূক্ত থেকে প্রদর্শিত হচ্ছে।

অর্থাৎ তথ্যটি দেখে পাঠক নিজেই বুঝতে পারবেন যে তিনি এই মুহূর্তে ওয়েবসাইটের ঠিক কোথায় রয়েছেন। এটা অনেকটা এরকম মূলপাতা >> লেবেল >> পোস্ট নাম

ওয়ার্ডপ্রেসের (Wordpress) ব্লগে এই সুবিধাটি ডিফল্টভাবে (Default) পাওয়া যায়। কিন্তু ব্লগার.কম (Blogger.com) এর ব্লগে এটা সহজলভ্য নয়। আসলে কোন ব্লগের জন্যই এই জিনিষটা ঠিক উপযোগী নয়। কারণ ব্লগে একটি পোস্ট একাধিক লেবেলের (Label) অন্তর্ভুক্ত থাকে। সেক্ষেত্রে কোন লেবেলের অন্তর্ভুক্ত হয়ে পোস্ট পেজটি প্রদর্শিত হবে, তা অনেক সময় জটিল হয়ে পড়ে। যা হোক, ব্লগের টেমপ্লেটের (Blog Template) কিছু কোড (Code) পরিবর্তন করে আমরা ব্লগার.কম (Blogger.com) এ খোলা ব্লগেও (Blog) এই Breadcrumb স্থাপন (Add) করতে পারি।

কিভাবে ব্লগার.কম এর ব্লগে Breadcrumb স্থাপন করা যাবে তার বর্ণনাঃ

• ব্লগার.কম (Blogger.com) এ আপনার গুগল আইডি ও পাসওয়ার্ড (Google ID and Password) দিয়ে লগইন (Login) করুন।
• Layout >> Edit HTML পাতায় চলে যান।
• Expand Widget Templates লেখার পাশে টিক চিহ্ন দিয়ে দিন।
  
• এখানে ]]></b:skin> লেখাটি খুঁজে বের করুন। এই লেখাটির ঠিক উপরে/ পূর্বে নিচের কোডটি স্থাপন করুন।

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

• 
  
• এবার <b:include data='top' name='status-message'/> লেখাটি খুঁজে বের করুন। এই লাইনটির ঠিক নিচে আরেকটি লাইন যুক্ত (Add) করুন। লাইনটি নিচে দেয়া হল:
• <b:include data='posts' name='breadcrumb'/>
• এখনও কাজ শেষ হয় নাই। আর একটি বড় কোড স্থাপন করতে হবে। ভয় পাওয়ার কিছু নেই। কপি (Copy) করে নির্দিষ্ট জায়গায় পেস্ট (Paste) করলেই হবে।
• <b:includable id='main' var='top'> লেখা লাইনটি খুঁজে বের করুন। নিচে দেয়া কোডটি দিয়ে এই লাইনটি প্রতিস্থাপন (Replace) করুন।

• <b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <!-- No breadcrumb on home page -->
  <b:else/>
  <b:if cond='data:blog.pageType == "item"'>
  <!-- breadcrumb for the post page -->
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
  <b:loop values='data:posts' var='post'>
  <b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.isLast == "true"'> »
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:if>
  </b:loop>
  <b:else/>
  »Unlabelled
  </b:if>
  » <span><data:post.title/></span>
  </b:loop>
  </span>
  </p>
  <b:else/>
  <b:if cond='data:blog.pageType == "archive"'>
  <!-- breadcrumb for the label archive page and search pages.. -->
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
  </span>
  </p>
  <b:else/>
  <b:if cond='data:blog.pageType == "index"'>
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <b:if cond='data:blog.pageName == ""'>
  <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
  <b:else/>
  <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
  </b:if>
  </span>
  </p>
  </b:if>
  </b:if>
  </b:if>
  </b:if>
  </b:includable>
  <b:includable id='main' var='top'>

• কোডটি দেখতে বড় হলেও তা স্থাপন করা তত কঠিন নয়।
• এবার সেভ (Save) করুন।
• অন্য ট্যাবে থাকা ব্লগটির (ফায়ারফক্সে, ডাউনলোড করুন) কোন একটি পোস্টের টাইটেলে (Post Title) ক্লিক করুন বা পোস্টটি খুলুন (Open Post)। দেখুনতো পোস্ট টাইটেলের ঠিক উপরে Breadcrumb দেখা যাচ্ছে কি না।
• নমুনা দেখতে আমার BH Template ব্লগের যে কোন একটি পোস্ট সম্পূর্ণ খুলে দেখুন।
  

সম্পূর্ণ  →  ব্লগার.কম এর ব্লগে Breadcrumb স্থাপনের পদ্ধতি

ব্লগার.কম এর ব্লগে 'উপরে ফিরে যান' বোতাম স্থাপন করার পদ্ধতি

'বাংলা হ্যাকস' (Bangla Hacks) ব্লগের ডানপাশে নিচেরদিকে উপরের ছবিটির উপরের দিকে থাকা তীরের (Arrow) মতো কোন কিছু দেখা যাচ্ছে কি?। যদি কোন লম্বা লেখা (Long Post) পড়তে পড়তে ব্লগের নিচের দিকে চলে যান, তাহলে এটার উপরে ক্লিক (Click) করে দেখুন, একেবারে উপরে চলে আসবেন। এমন হতে পারে যে ব্লগের কোন একটি পোস্ট (Post) বেশ বড়, সেক্ষেত্রে অনেক নিচে নেমে যাবার পর কোন কোন পাঠক ব্লগের উপরের অংশে আর ফিরে আসেন না। তারা সরাসরি ব্লগ বন্ধ করে দেন। এই জাতীয় পাঠকদেরকে ব্লগে ধরে রাখার জন্য এই বোতামটি খুব উপকারী।

'উপরে ফিরে আসুন' বা 'মেনুতে ফিরে যান' (Go UP, Back to TOP) জাতীয় এই বোতামটি ব্লগার.কম (Blogger.com) এর ব্লগে স্থাপন করা খুব সহজ (Easy to Add)। সামান্য একটু কোড (HTML Code) ব্লগের খুব সহজে খুঁজে পাওয়া যায় এমন একটি জায়গায় স্থাপন করতে হবে। এজন্য Expand Widget Templates এর পাশে ক্লিক করতে হবে না।

• ব্লগার.কম (Blogger.com) এ লগইন (Login) করুন।
• Layout এর Edit HTML অংশে যান।
• এইপাতার একেবারে শেষে/ নিচের অংশে লেখা রয়েছে </body>
• 
  
• 
• এই </body> লেখাটির ঠিক উপরে (উপরের ছবিতে লাল তীর চিহ্ন দিয়ে দেখানো হয়েছে) নিচের কোডটি স্থাপন করুন। এই কোড একটি নতুন HTML/ JavaScript গেজেটেও স্থাপন করতে পারেন। অন্যকিছু রয়েছে তেমন HTML/JavaScript Gadget এর মধ্যেও কোডটুকু বসাতে পারবেন।

• <style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Go UP"><img style="border:0;" src="http://sites.google.com/site/banglahacks/tools/bttp.jpeg"/></a></div>

• এবার সেভ (Save) করুন।
• আপনার ব্লগে একটি 'উপরে যান' (Go up, Back to Top) বা 'মেনুতে ফিরে আসুন' ইত্যাদি নামের একটি সুবিধা স্থাপিত হয়ে গেছে।
• কোডের http://sites.google.com/site/banglahacks/tools/bttp.jpeg অংশটি পাল্টিয়ে নিচের মনমতো ছবি স্থাপন করতে পারবেন। (আমার ব্লগের নীল রঙের উর্ধ্বমুখী তীরচিহ্নটির ডাইরেক্ট লিংক)
  
• তীর চিহ্ন (Arrow sign) বা যে কোন কিছুর ছবি (Image) কোথাও আপলোড (Upload) করে {পোস্ট নং ০১ এবং পোস্ট নং ০২ একবার পড়ে নিতে পারেন} আপলোড করা ইমেজ ফাইলটির (Image File) ডাইরেক্ট লিংক (Direct Link) দিয়ে লাল রঙের বোল্ড (Bold) করা লাইনটি প্রতিস্থাপিত (Replace) করে সেভ (Save) করুন।
  

সম্পূর্ণ  →  ব্লগার.কম এর ব্লগে 'উপরে ফিরে যান' বোতাম স্থাপন করার পদ্ধতি

এবার প্রকাশিত হলো 'আকাশ - ০২' টেমপ্লেট

আকাশ-০১ টেমপ্লেটটি (Akash 01 Template) প্রকাশিত হবার পর অনেকের কাছ থেকে দারুণ সাড়া পেয়েছি। তারা বিভিন্নভাবে আমাকে আরও টেমপ্লেট ডিজাইন (Template Design) করতে উৎসাহিত করেছেন। তাদের সবাইকে অন্তরের অন্তঃস্থল থেকে ধন্যবাদ জানাচ্ছি। আজ আমি আপনাদের সামনে উপস্থিত হয়েছি 'আকাশ-০২' টেমপ্লেট (Akash 02 Template) নিয়ে। এই নামটি বেছে নেবার কারণ হলো পূর্বের আকাশ টেমপ্লেটটির সাথে নতুন টেমপ্লেটটির বেশ কয়েকটি দিক দিয়ে মিল আছে। এর মধ্যে প্রধানত ব্লগ ব্যাকগ্রাউন্ড রঙ (Background Color) ও হেডারের ছবিটি (Header Image) প্রধান। তবে যারা এই নতুন টেমপ্লেটটি ব্যবহার করবেন, তারা একেবারে নতুন টেমপ্লেট ব্যবহারের তৃপ্তি পাবেন একথা নিশ্চিত করে বলতে পারি।

প্রথমে একটি কৃতজ্ঞতা প্রকাশ করিঃ
হেডারের (Header) সারি সারি মেঘের অসাধারণ ছবিটি আমাকে উপহার দিয়েছেন প্রতিশ্রুতিশীল সাহিত্যিক খালিদ উমর। তিনি তাঁর ব্যক্তিগত সংগ্রহ (Personal Collection) থেকে আমাকে এই ছবিটি (Picture) ব্যবহার করার জন্য প্রদান করেছেন। কোনরকম লাইসেন্সের (Licence) বিধিনেষেধ আরোপ করেননি। মহানুভব মি. খালিদ উমর তাঁর প্রাত্যাহিক ব্যস্ত জীবনের ফাঁকে ফাঁকে নিয়মিতভাবে উপন্যাস ও কবিতা লিখে চলেছেন নিজ ব্লগে। তাঁর ব্লগ ঠিকানা: নীল নক্ষত্র

মি. খালিদ উমর প্রদত্ত হেডারের মূল ছবিটি আমি আপলোড (Upload) করে দিলাম। এই লিংক থেকে ডাউনলোড করতে পারবেন (ছবির আকার ২০৩৮×১৫৩৬ পিক্সেল, ফাইল সাইজ: 446.6 KB)। সাইজ মতো করে কেটে নেয়া হেডারের ছবিটি স্থাপন করা হয়েছে এই পদ্ধতিতে (ফলে টেমপ্লেটটি আপনার ব্লগে ইনস্টল করলে হেডারে কোন ছবি দেখাবে না)। নিজের ব্লগের বিষয় অনুযায়ী ছবি ব্যবহার করুন কিংবা নির্দিষ্ট আকারের ছবিটি এই লিংক থেকে ডাউনলোড করে ব্যবহার করতে পারেন (ছবির আকার ৮৮৩×২০০ পিক্সেল, ফাইল সাইজ: 9.8 KB) । নিজের তৈরি করা ছবির প্রস্থ ৮৮৫ পিক্সেল (Width: 885px) এর মধ্যে হতে হবে। ছবির উচ্চতা ২০০ পিক্সেলের (200 Pixel) বেশি ব্যবহার করতে পারবেন। তবে তা দৃষ্টিকটু দেখায়।

আকাশ- ০২ টেমপ্লেটের ডিজাইন করতে গিয়ে আকাশ -০১ টেমপ্লেটটির মতো কোন ছবি ফাইল (Image File) ন্যাভিগেশন মেনুবার (Navigation Menubar), পোস্ট টাইটেল (Post Title) কিংবা সাইডবার টাইটেলের (Sidebar Title) ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করিনি। ফলে ব্লগ লোড হওয়ার সময় (Blog Load TIme) আরও কমে যাবে। আরো দ্রুত ব্লগ লোড হবে (Load Faster)।

এই ছবিটি টেমপ্লেটের উপরের অংশের

এই ছবিটি টেমপ্লেটের নিচের অংশের

এই ছবিটি টেমপ্লেটটির পেজ এলিমেন্ট (Page Element) অংশের। এখানে বিভিন্ন জায়গায় লেখা Add A Gadget লেখাতে ক্লিক করে গুগল এডসেন্স (Google Adsense) বা যে কোন কোড বসাতে পারবেন।

আকাশ ০২ টেমপ্লেটের কিছু বিশেষ বৈশিষ্ট্যঃ

• 'আদর্শলিপি' (Adorsholipi) ফন্ট ডিফল্ট (Default Font) হিসেবে সেট করা আছে। আপনার কম্পিউটারে 'আদর্শলিপি' ফন্ট ইনস্টল না থাকলেও অসুবিধা নেই। অন্য বাংলা ফন্টেও ব্লগ লেখা যাবে। একটি ছোট ফন্ট সংগ্রহ ডাউনলোড (Download) করুন।
  
• ন্যাভিগেশন মেনুবার (Navigation Menubar) এর ব্যাকগ্রাউন্ডে (Background) কোন ছবি নেই। তার বদলে রঙ ব্যবহার করা হয়েছে। ন্যভিগেশন মেনুতে থাকা লিংকগুলো (Links) পরিবর্তনের নিয়ম আলোচনা করেছি। স্ক্রল (Scroll) করে নিচে নামুন।
  
• পোস্ট টাইটেলের ব্যাকগ্রাউন্ডে (Post Title Background) কোন ছবি নেই। তার বদলে রঙ ব্যবহার করা হয়েছে।
• সাইডবার টাইটেলের (Sidebar Title) কোন ব্যাকগ্রাউন্ড ছবি নেই। তার বদলে রঙ ব্যবহার করা হয়েছে।
• পোস্টের উপরে লেখা তারিখে ব্যাকগ্রাউন্ড রঙ (Date Background Color) দেয়া হয়েছে।
  
• ব্লগের নিচে থাকা Subscribe to: Posts (Atom) লেখার পাশে একটি ফিড আইকন (Feed Icon) যোগ করা হয়েছে।
• লেখকের মন্তব্যটির (Blog Author Comment) ব্যাকগ্রাউন্ড ভিন্ন রঙের হবে। এই ব্যাকগ্রাউন্ড রঙটি (Background Color) ব্লগারের (Blogger.com) ডিফল্ট পদ্ধতিতে পাল্টানো সম্ভব।
• কখনও কখনও ন্যাভবার লোড হতে সমস্যা করে বলে ব্লগের উপরের ন্যাভবারটিকে লুকিয়ে রেখেছি। ঢেকে রাখিনি। তাই ন্যাভবার এর সুবিধাগুলো সব ব্যবহার করতে কোন অসুবিধা হবে না।
  

টেমপ্লেটটির কিছু সাধারণ বৈশিষ্ট্যঃ

• মূল ব্যাকগ্রাউন্ডের রঙ (Main Background Color) ডিফল্টভাবে নীল।
• পোস্ট করার জায়গার ব্যাকগ্রাউন্ড (Post Background) সাদা।
• বিস্তারিত পড়ুন (Read more) সুবিধা ডিফল্টভাবে সংযুক্ত।
• ড্রপডাউন মেনু (Dropdown menu) স্বয়ংক্রিয়ভাবে (Automatically) যে কলামে রাখবেন, সেই কলামের আকার ধারণ করবে।
• লেবেল সার্চ (Label Search) করলে সম্পূর্ণ পোস্ট (Full Post) না দেখিয়ে শুধুমাত্র পোস্ট টাইটেল (Post Title) দেখাবে।
  
• হেডারের (Header) ঠিক নিচে একটি নেভিগেশন মেনুবার (Navigation Menubar) যুক্ত। এটাতে নিজের প্রয়োজনমাফিক লিংক যুক্ত করা মোটেও কঠিন নয়।
• একটি মূল কলাম ডানপাশে (Right Sidebar)।
• তিনটি কলাম টেমপ্লেটের একেবারে নিচে অবস্থিত (3 Column on Bottom)।
• সবশেষে একটি বড় কলাম।
• ব্লগের শরীরের বিভিন্ন জায়গায় যেমন হেডারের উপরে নিচে, পোস্টের উপরে নিচে, সাইডবারে, নিচের কলামে খুব সহজে বিভিন্ন আকারের গুগলের এডসেন্স কোড (Adsense Code) বসাতে পারবেন। অর্থাৎ এই টেমপ্লেটটি 'এডসেন্স রেডি' (Adsense Ready)।
• কোন লেখাকে উদ্ধৃতি (Quote) হিসেবে ব্যবহার করলে, সেই লেখাটুকুর উপরে ও নীচে একটি দাগ বসে যাবে। ব্যকগ্রাউন্ড পাল্টাতে পারবেন ব্লগার.কমের নিজস্ব রঙ পরিবর্তন করার পদ্ধতি থেকে।

ব্লগার.কমের নিজস্ব রঙ পরিবর্তন করার জায়গা থেকে যে সব উপাদানের রঙ পাল্টাতে পারবেন:

• ব্লগের ব্যাকগ্রাউন্ড রঙ (Page BAckground Color)
• প্রধান টেক্সটের রঙ (Text Color)
• লিংক রঙ (Link Color)
• ব্লগের টাইটেল রঙ (Blog Title Color)
• ব্লগের বর্ণনার রঙ (Blog Description Color)
• পোস্ট টাইটেল রঙ (Post Title Color)
• পোস্ট টাইটেলের উপরে মাউস নিয়ে গেলে তা পরিবর্তন করলে কি রঙ হবে তা পরিবর্তন করতে পারবেন। (Post Title Hover Color)
• পোস্টের উদ্ধৃতির ব্যাকগ্রাউন্ড (Post Quote Color)
• ব্লগ লেখকের মন্তব্য'র ব্যাকগ্রাউন্ড (Author Comment Background Color)
  
• বর্ডার রঙ (Border Color)
• সাইডবারের টাইটেল রঙ (Sidebar Title Color)
• পোস্টের উপরে লেখা তারিখের রঙ (Post Date Color)
• নিচের কলামের টাইটেলের রঙ (Footer and Bottom Header Color)
• সাইডবারের টেক্সট রঙ (Sidebar Text Color)
• যে সব লিংক ভ্রমণ করা হয়েছে তাদের রঙ (Visited Link Color)

• টেমপ্লেটটির প্রস্থ: ৮৮৫ পিস্কেল (885 px)
• মেইন পোস্ট অংশের প্রস্থ: ৫৭০ পিস্কেল (570 px)
• বামপাশের প্রধান সাইডবারটির প্রস্থ: ৩০৫ পিস্কেল (305 px)

একেবারে নীচের কলাম তিনটির আকার হলো:

• বামপাশেরটির আকার: ৩৫০ পিক্সেল
• মাঝেরটির আকার: ২৯০ পিক্সেল
• একেবারে ডানেরটির আকার: ২২০ পিক্সেল

* নেভিগেশন মেনুবারে (Navigation Menubar) থাকা লিংকগুলো পরিবর্তন করে নিজের পছন্দ ও প্রয়োজনমতো লিংক স্থাপন করার জন্য নিচের ছবিটি ভালোভাবে লক্ষ্য করুন।

Edit HTML পাতায় <div id="navigation"> কোডটি খুঁজে বের করুন। Cntrl+F চেপে সেখানে কোডটি লিখে দিলে সহজে খুঁজে পাবেন। <div id="navigation"> এর নিচের থাকা লিংকগুলো পরিবর্তন করে দিন। উপরের ছবিটি লক্ষ্য করুন। কোন কোন লিংক পরিবর্তন করতে হবে তা লাল দাগ দিয়ে চিহ্নিত করা হয়েছে। লিংক লেখার নিয়ম জেনে নিন এই পোস্ট থেকে।

ডাউনলোড করুন:

• ডেমো ব্লগ দেখুন
• .7z File (Size: 8.5 KB)
• .zip File (Size: 8.9 KB)

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

সম্পূর্ণ  →  এবার প্রকাশিত হলো 'আকাশ - ০২' টেমপ্লেট

ব্লগারের ব্লগে টেমপ্লেট পরিবর্তনের পদ্ধতি নং - ২

আমরা এর আগের একটি পোস্টে জেনেছিলাম, কিভাবে ব্লগার.কম (Blogger.com) এ খোলা ব্লগের টেমপ্লেট (Blog Template) পরিবর্তন করা যায়। সেই পোস্টে ব্লগার.কম এ ডিফল্টভাবে (Default) দেয়া যে টেমপ্লেটগুলো থাকে সেগুলো থেকে বাছাই করে একটি টেমপ্লেট নির্বাচন করে কিভাবে তা নিজের ব্লগে প্রয়োগ করা যায়, তার পদ্ধতি জেনেছিলাম। আজ আমরা জানবো বিভিন্ন ডিজাইনারের কাছ থেকে সংগ্রহ করা ব্লগ টেমপ্লেট দিয়ে কিভাবে নিজের ব্লগটিকে সাজানো যেতে পারে।

বহু পূর্বের একটি পোস্টে এই বিষয়ে সংক্ষেপে একটু আলোচনা করেছিলাম। কিন্তু কোন কোন পাঠক আরও বিস্তারিতভাবে (Details) বিষয়টি জানতে চেয়েছেন।

• প্রথমে ব্লগার.কম এ আপনার গুগল আইডি ও পাসওয়ার্ড (Google ID and Password)  দিয়ে লগইন (Login) করুন।
• ড্যাশবোর্ডে (Dashboard) আপনার ব্লগের নামের ঠিক নিচে Layout লেখাটিতে ক্লিক করুন।
• লেআউট অপশনের Edit HTML লেখাতে ক্লিক করুন। পাশের ছবির মতো একটি পেজ আসবে।
• এখানেই আপনি ব্লগের টেমপ্লেটটিকে মনের মতো করে পরিবর্তন করতে পারবেন।
• আমার ডিজাইন করা কিংবা অন্য কারো ডিজাইন করা আপনার পছন্দের টেমপ্লেটটিকে ডাউনলোড (Download) করে কম্পিউটারের হার্ডডিস্কে (Harddisk) সেভ (Save) করে রাখুন। খেয়াল রাখবেন যে টেমপ্লেট ডিজাইনের ফাইলের শেষে 'xml' লেখা থাকবে। নামটি হবে Filename.xml - এরকম।
  
• এবার লাল রঙের দাগ দেয়া জায়গাতে লেখা Browse বোতামে ক্লিক করে xml ফাইলটিকে সিলেক্ট করুন।
• নীল রঙের দাগ দেয়া জায়গাতে লেখা Upload বোতামে ক্লিক করে টেমপ্লেটটিকে ইনস্টল করুন।
•  
  
• উপরের ছবির মতো SAVE TEMPLATE লেখাতে ক্লিক করে পরিবর্তিত টেমপ্লেটটিকে সংরক্ষণ করুন।
  
• আপনার ব্লগের ডিজাইন বা চেহারা পরিবর্তিত হয়ে যাবে।
• একটি সাধারণ সমস্যা দেখা দিতে পারে। তার জন্য এই পোস্টটি পড়ুন।
• শেষ পর্যন্ত যদি কোন সমস্যায় পড়েই যান, তাহলে আমি তো আছিই। কোনরকম ইচ্ছা প্রকাশের পূর্বে সামান্যতম দ্বিধা করবেন না বলে আশা করি।
  

সম্পূর্ণ  →  ব্লগারের ব্লগে টেমপ্লেট পরিবর্তনের পদ্ধতি নং - ২

ব্লগারের ব্লগে টেমপ্লেট পরিবর্তনের পদ্ধতি নং - ১

সম্প্রতি আমার জনৈক পাঠক জানতে চেয়েছেন, কিভাবে ব্লগার.কম (Blogger.com) এ তৈরি করা ব্লগের টেমপ্লেট পরিবর্তন করা যায়। নতুন ব্লগারদের জন্য টেমপ্লেট (Template) পরিবর্তন করা একটি সমস্যাই বটে। চট করে কোথা থেকে যে ব্লগারের টেমপ্লেট পরিবর্তন করা যেতে পারে, তা খুঁজে পাওয়া কখনও কখনও একটু মুশকিল হয়ে পড়তে পারে। আসলে ব্লগার.কম এ টেমপ্লেট পরিবর্তন করা মোটেও কঠিন কাজ নয়। টেমপ্লেট পরিবর্তন করার দুইটি পদ্ধতি আছে। আজ আমরা আলোচনা করবো প্রথম পদ্ধতিটি নিয়ে।

টেমপ্লেট পরিবর্তন করার প্রথম পদ্ধতি:

• ব্লগার.কম এ আপনার গুগুল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন।
• ড্যাশবোর্ডে থাকা আপনার ব্লগটির Layout বোতামে মাউসের বাম বোতাম দিয়ে একবার ক্লিক করুন।
• Layout পাতার ডানপাশে লেখা Pick New Template লেখাটিতে মাউসের বাম বোতাম দিয়ে একবার ক্লিক করুন।
• ডিফল্টভাবে থাকা টেমপ্লেটের একটি তালিকা প্রদর্শিত হবে।
• নিচের ছবি দেখুন।
• এখানে মোট ৩৮টির মতো বিভিন্ন ডিজাইনের টেমপ্লেট (Template) ডিফল্টভাবে দেয়া হয়েছে।
• এর মধ্যে যে কোন একটি ডিজাইনের বামপাশের রেডিও বাটনে (গোল অংশ) (Radio Button) ক্লিক করে চিহ্ন দিন।
• উপরের ডানপাশে লেখা Save Template লেখাটিতে ক্লিক করে সেভ করে নিন।
• আপনার পছন্দের ডিজাইন অনুযায়ী ব্লগের চেহারা পরিবর্তিত হয়ে গেছে।
  

সম্পূর্ণ  →  ব্লগারের ব্লগে টেমপ্লেট পরিবর্তনের পদ্ধতি নং - ১

মেঘে ঢাকা 'আকাশ' টেমপ্লেট ০১

আজ আমি আপনাদের সামনে একটি নতুন ডিজাইনের (New Design), নতুন আঙ্গিকের (New Style) টেমপ্লেট (Blogger template) উপস্থাপন করতে যাচ্ছি। এর নাম রেখেছি 'আকাশ'। আমি টেমপ্লেট ডিজাইন করতে গিয়ে সাধারণত কোন ইমেজ ফাইল ব্যবহার করি না। কারণ বাংলাদেশের ইন্টারনেটের যে স্পিড (Internet speed), তাতে বিভিন্নরকম ছবি দিয়ে সাজানো টেমপ্লেটযুক্ত ব্লগ লোড (Loading time) হতে যে কত সময় ব্যয় হয়ে যায়, তা ভুক্তভোগীমাত্রই ভালমতো বোঝেন ও জানেন। সেজন্য আমি এতদিন পারতপক্ষে কোনরকম ইমেজ ফাইলকে যুক্ত করে টেমপ্লেট ডিজাইন করতে চাইনি। কিন্তু তীব্র গরমের পর বর্ষার (Rainy Season) আগমনে আকাশ যেভাবে মেঘে ঢেকে গেছে, তাতে করে মেঘ ও আকাশকে সমন্বয় করে 'আকাশ' নাম দিয়ে একটি টেমপ্লেট ডিজাইন করার লোভ সামলাতে পারলাম না। এই টেমপ্লেটটির মাত্র তিনটি জায়গায় {পোস্ট টাইটেল (Post Title) , সাইডবার টাইটেল (Sidebar Title) ও মেনুবার ব্যাকগ্রাউন্ড (Menubar Background)} ছোট সাইজের ইমেজ ফাইল (Image File) ব্যবহার করা হয়েছে। বিভিন্ন টেক্সট (Text) বা লিংকগুলোর (Links) রঙ ব্লগের ডিফল্ট রঙ পরিবর্তন করার সিস্টেম থেকে পাল্টানো যাবে। হেডারের (Header) বড় ছবিটি ডিফল্টভাবে (Default) যুক্ত নয় (Not Built in)। ফলে আপনি যখন আপনার ব্লগে এই টেমপ্লেটটি স্থাপন (Install) করবেন, তখন হেডারের ছবিটি প্রদর্শিত হবে না। আপনাকে এই পদ্ধতি অনুযায়ী হেডারের ছবিটি পরিবর্তন করে নিতে হবে।

টেমপ্লেটের Snapshot

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

টেমপ্লেটটির বৈশিষ্ট্য:

• মূল ব্যাকগ্রাউন্ডের রঙ (Main Background Color) ডিফল্টভাবে নীল।
• পোস্ট করার জায়গার ব্যাকগ্রাউন্ড (Post Background) সাদা।
• Read more... সুবিধা ডিফল্টভাবে সংযুক্ত।
• ড্রপডাউন মেনু (Dropdown menu) স্বয়ংক্রিয়ভাবে (Automatically) যে কলামে রাখবেন, সেই কলামের আকার ধারণ করবে।
  
• হেডারের ঠিক নিচে একটি নেভিগেশন মেনুবার (Navigation Menubar) যুক্ত। এটাতে নিজের প্রয়োজনমাফিক লিংক যুক্ত করা মোটেও কঠিন নয়।
• একটি মূল কলাম বামপাশে (Left Sidebar)।
• তিনটি কলাম টেমপ্লেটের একেবারে নিচে অবস্থিত (3 Column on Bottom)।
• সবশেষে একটি বড় কলাম।
• ব্লগের শরীরের বিভিন্ন জায়গায় গুগলের এডসেন্স কোড (Adsense Code) বসাতে পারবেন। অর্থাৎ 'এডসেন্স রেডি' (Adsense Ready)।
• কোন লেখাকে উদ্ধৃত (Quote) করলে তা বামপাশে একটি গাঢ় লম্বাদাগ যুক্ত হয়ে নীল ব্যাকগ্রাউন্ডের রঙে প্রদর্শিত হবে।

• টেমপ্লেটটির প্রস্থ: ৮৮৫ পিস্কেল (885 px)
  
• মেইন পোস্ট অংশের প্রস্থ: ৫৭০ পিস্কেল (570 px)
  
• বামপাশের প্রধান সাইডবারটির প্রস্থ: ৩০৫ পিস্কেল (305 px)
  

-: নিচের কলাম তিনটির আকার :-

• বাংলা হ্যাকস এর ফিড রয়েছে যেটাতে, তার আকার: ৩০০ পিক্সেল (300 px)
  
• মাঝের এডসেন্স স্থাপিত কলামটির আকার ৩২০ পিক্সেল (320 px)
  
• আর্কাইভ রয়েছে যেটাতে, তার আকার ২০০ পিক্সেল (200 px)
  

টেমপ্লেটের সেটিং:

প্রথমে ব্লগারে লগইন করুন। এবার এই পোস্টের পদ্ধতি মোতাবেক 'আকাশ ০১' টেমপ্লেটটিকে ইনস্টল করে ফেলুন।

• নেভিগেশন মেনুবারে (Navigation Menubar) থাকা লিংকগুলো পরিবর্তন করে নিজের পছন্দ ও প্রয়োজনমতো লিংক স্থাপন করার জন্য নিচের ছবিটি ভালোভাবে লক্ষ্য করুন।

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

ডেমো ব্লগের হেডারে থাকা ছবিটিই যদি ব্যবহার করতে চান তাহলে তা এখানে ক্লিক করে ডাউনলোড করুন।

হেডারের ছবিটির মূল উৎস এটা। Right ক্লিক করে সম্পূর্ণ ছবিটিই ডাউনলোড করতে পারবেন।

যদি টেমপ্লেটে সংযুক্ত ছবিগুলো পরিবর্তন করতে চান কিংবা রাখতে না চান তাহলে নিচের পদ্ধতিগুলো অনুসরণ করুন।

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

background-image: url(http://i28.tinypic.com/97rwn7.jpg):

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

• নেভিগেশন মেনুবারের (Navigation Menubar) ব্যাকগ্রাউন্ডের ছবিটি পরিবর্তন করতে চাইলে নিচের ছবিতে লাল দাগ দিয়ে চিহ্নিত ছবির লিংকটি পরিবর্তন করে আপনার পছন্দের কোন ছবির ডাইরেক্ট লিংক (Direct Link) স্থাপন করুন।

• পোস্টের টাইটেল বারের (Post Title bar) ব্যাকগ্রাউন্ডের ছবিটি পরিবর্তন করতে চাইলে নিচের ছবিতে লাল দাগ দিয়ে চিহ্নিত ছবির লিংকটি পরিবর্তন করে আপনার পছন্দের কোন ছবির ডাইরেক্ট লিংক (Direct Link) স্থাপন করুন।

• সাইডবারের ব্যাকগ্রাউন্ডের (Sidebar) ছবিটি পরিবর্তন করতে চাইলে নিচের ছবিতে লাল দাগ দিয়ে চিহ্নিত ছবির লিংকটি পরিবর্তন করে আপনার পছন্দের কোন ছবির ডাইরেক্ট লিংক স্থাপন করুন।

আশা করি কোনকিছু বুঝতে আপনার অসুবিধা হচ্ছেনা।

ডেমো ব্লগ ভিজিট করুন। (আপনার বোঝার সুবিধার্থে বিভিন্ন রকম গেজেট লাগানোর কারণে লোডিং স্পিড কিছুটা কম।)

ডাউনলোড করুন:

• জিপ ফরমেট (Zip File), সাইজ: 8.2 KB
• .7z ফরমেট, সাইজ: 7.9 KB

কোনরকম সমস্যা চোখে পড়লে কিংবা কোনরকম পরামর্শ দিতে চাইলে তা জানাতে দ্বিধা করবেন না।

সম্পূর্ণ  →  মেঘে ঢাকা 'আকাশ' টেমপ্লেট ০১

এক আকষর্ণীয় টেমপ্লেট

আজ আমি আপনাদের সামনে উপস্থিত হয়েছি একটি আকর্ষণীয় টেমপ্লট নিয়ে। আপনারা নিশ্চয় জানেন আমার একটি ব্লগ আছে যার নাম Attractive Templats। এই ব্লগে আমি প্রখ্যাত ব্লগার (Famous blogger) ও ওয়েব ডেভেলপারদের (Web Developer) তৈরি বিভিন্ন ডিজাইনের টেমপ্লেটগুলি (Template) সকলের সাথে শেয়ার (Share) করি। এই ব্লগটির টেমপ্লেটটি চেয়ে আমার কোন কোন পাঠক ইমেইল (Email) করেছেন। তাদের অনুরোধের প্রেক্ষিতে আজ এই টেমপ্লটটি আজ সবার জন্য উন্মুক্ত করে দিলাম। গাঢ় কালো রঙের ব্যাকগ্রাউন্ডযুক্ত (Black Background) এই টেমপ্লটটি কারো কারো কাছে যে এতটাই আকর্ষণীয় লাগে তা আমি ভাবতেও পারিনি। এই টেমপ্লটটির বাম পাশের সাইডবারটি (Left Sidebar) ডানপাশের সাইডবার থেকে অপেক্ষাকৃত সরু। আর ডানপাশের সাইডবারটি বামপাশের সাইডবার থেকে অপেক্ষাকৃত মোটা। ফলে বামপাশে বিভিন্নরকম বাটন (Button) রেখে দিতে পারেন আর ডানপাশের সাইডবারে (Right Sidebar) বিভিন্ন ওয়েবসাইট বা ব্লগের ফিড কনটেন্ট (Feed Content) স্থাপন করতে পারেন। ফলে সেইসব বিভিন্ন ব্লগে সরাসরি ভ্রমণ না করেও নিজের ব্লগ থেকেই সেইসব ব্লগের নতুন লেখাগুলোর হেডলাইন (Headline) পড়ে নিতে পারবেন। এই পোস্টটিতে কিভাবে কোন সাইট বা ব্লগের ফিড স্থাপন করতে হয় তার একটি নমুনা দেয়া আছে। একই পদ্ধতিতে ব্লগে একটি গেজেট (Gadget) নিয়ে তার মধ্যে প্রিয় সাইট বা ব্লগের ফিড (Blog Feed) স্থাপন করতে পারবেন।

বিশেষ বৈশিষ্ট্য:

• তিন কলাম।
• দুই সাইডবার মূল পোস্টের দুইপাশে (Both side of main post) অবস্থিত।
• টেমপ্লটটির ব্যাকগ্রাউন্ড ও ডানপাশের সাইডবার কাল রঙের।
• টেমপ্লটটির আকার: 840px
• পোস্ট লেখার জায়গাটির আকার: 384 px
  
• বামপাশের সাইডবারের আকার: 125px
• ডানপাশের সাইডবারের আকার: 310px
• এডসেন্স রেডি (Adsense Ready)
  
• হেডারের ঠিক নিচেই একটি বড় ব্যানারের আকারের এডসেন্স স্থাপন করতে পারবেন।
• আরও পড়ুন বা Read More সুবিধাটি বিল্টইনভাবে দেয়া আছে।

নির্দেশনা: আপনার ব্লগে স্থাপন করার পর ব্লগের ড্যাশবোর্ডের ফরমেটিং অংশের পোস্ট টেমপ্লেট (Post Template) এ একটি নির্দিস্ট কোড বসাতে হবে। আমার আগের একটি পোস্টে (লেখার নিচের দিকে) বিষয়টি বিস্তারিত আলোচনা করা আছে।

একটিভ ব্লগ: Attractive Templates
ডাউনলোড: Download now. Size 9KB

একই পোস্ট করা হয়েছে এখানেও।

সম্পূর্ণ  →  এক আকষর্ণীয় টেমপ্লেট