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

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

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

• চার কলাম
• বামপাশের কলামটি সরু
• ডানপাশে দুইপ্রকারের কলাম আছে
• উপরের কলামটি প্রশস্ত
• নিচের দুইটি কলাম অপেক্ষাকৃত সরু
• ব্লগের একেবারে নিচে চারটি ফুটার কলাম আছে
• 'আদর্শলিপি' বাংলা ফন্টকে ডিফল্ট ফন্ট হিসেবে নির্দিষ্ট করা আছে।
• সার্চ ইঞ্জিন অপটিমাইজেসনে (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

সাধারণ তথ্যঃ

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

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

»» read more

'বিস্তারিত পড়ুন' লিংককে ডানপাশে নিয়ে আসার পদ্ধতি

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

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

• 'বিস্তারিত পড়ুন' সুবিধা স্থাপনের যে কোড দুটি আছে, তার দ্বিতীয় কোডটির এক জায়গায় দেখুন লেখা রয়েছেঃ

<a class='readmore' expr:href='data:post.url'>Read More ... »</a>

• এই লাইনটির ঠিক উপরে ও শেষে দুইটি ছোট কোড লিখে দিন। উপরে লিখুন
• <div style='float:right;padding:5px 10px 5px 0px'>
• আর শেষে লিখুন
• </div>
• ব্যাস হয়ে গেল।
• PREVIEW তে ক্লিক করে দেখে নিন কেমন দেখাচ্ছে।
• পছন্দ হলে SAVE TEMPLATE লেখাতে ক্লিক করে পরিবর্তনটুকু সংরক্ষণ করুন।

»» read more

ব্লগে Top Post গেজেট স্থাপন করার পদ্ধতি

আজ আমরা জানবো কিভাবে ব্লগে একটি 'টপ পোস্ট' গেজেট (Top Post Gadget) স্থাপন করা যায়। আমরা এর আগে সবচেয়ে বেশি মন্তব্য এসেছে যেসব পোস্টে তার তালিকা দেখানোর একটি গেজেট ব্লগে স্থাপন করার পদ্ধতি জেনেছিলাম। আজ আমরা সবচেয়ে বেশি দেখা হয়েছে যেসব পোস্ট সেসব দেখার একটি গেজেট কিভাবে পাওয়া যেতে পারে, তার পদ্ধতি জানবো।

 আমরা এই প্রয়োজনীয় গেজেটটি সংগ্রহ করবো Postrank নামক সাইট থেকে। সাইটে গিয়ে নাম ঠিকানা, ইমেইল এড্রেস দিয়ে রেজিস্ট্রেশন করুন।
লগইন করার পর ডানপাশের সাইডবারে Top Post Widget লেখাতে ক্লিক করুন।

 উপরের ছবির মতো পেজের Get Widget লেখাতে ক্লিক করুন। ড্রপডাউন মেনু থেকে আপনি কোন প্লাটফরমের জন্য এই টপ পোস্ট গেজেটটি খুজছেন, তা নির্বাচন করুন। এই গেজেটটি আপনি Blogger.com, Wordpress, Typepad এবং আরও অন্যান্য কয়েকরকম CMS এর জন্য তৈরি করে নিতে পারবেন। আপনার ব্লগিং প্লাটফরম নির্বাচন করুন।Add a top post gadget in your blog. It support all kind of CMS. Blogger, wordpress, typepad gadget is available.
অথবা, একেবারে নিচের ফুটার লিংকগুলোর Widget Customization লেখা লিংকে ক্লিক করুন।

 সরাসরি নিচের ছবির মতো একটি পাতায় চলে আসবেন।

 এখানে ব্লগের নাম, পছন্দের রঙ, কতটি পোস্ট দেখাতে চান- ইত্যাদি বাছাই করুন। সবশেষে একই পাতার সবনিচের কোডবক্স থেকে কোড সংগ্রহ করে নিন।
এবার Blogger.com এর ক্ষেত্রে সরাসরি Layout> Page Elements ট্যাবে গিয়ে একটি নতুন HTML/JavaScripts গেজেটে কোডটি স্থাপন করুন।

»» read more

ব্লগারের ব্লগে তুষারপাতের ইফেক্ট স্থাপন করার পদ্ধতি

বাংলাদেশে শীতকাল শেষ হতে চলল। এখনও ইউরোপ আমেরিকার বিভিন্ন অংশে তুষারপাত হচ্ছে কিনা, তা জানিনা। কিন্তু আমরা ইচ্ছে করলেই নিজেদের ব্লগের শরীরজুড়ে তুষারপাত শুরু করে দিতে পারি।
Add snow effect on your blogger blog.
ওয়ার্ডপ্রেসের ব্লগে তুষারপাতের একটি প্লাগইন শীতকাল এলেই যোগ করে দেয়া হয়। ব্লগলেখক ইচ্ছে করলে সেটা একটিভ করতে পারেন। কিন্তু ব্লগার.কম এর ব্লগে এই ধরণের কোন প্লাগইনের কোন ব্যবস্থা নেই। তাই বলে কি আমরা বসে থাকবো? কখনো না। আমরা ছোট্ট একটি কোড স্থাপন করার মাধ্যমে ব্লগার.কম এ খোলা যে কোন ব্লগে তুষারপাতের সৌন্দর্য ফুটিয়ে তুলতে পারি।
Add the code below in your blogger.com blogs HTML Gadget and save.
আর এই জন্য আপনাকে তেমন কঠিন কিছুই করতে হবে না। ব্লগের যে কোন HTML Gadget এর মধ্যে নিচের কোডটি কপি করে দিয়ে সেভ করুন। তারপর দেখুন, আপনার ব্লগের উপরের অংশ থেকে কেমন সাদা সাদা পেজা তুলোর মতো তুষারপাত শুরু হয়ে যায়। এখনই লাগিয়ে নিন আর উপভোগ করুন তুষারপাতের অসাধারণ মনোরম সৌন্দর্য।
Now enjoy a lovely snow effect . It will view perfectly in dark background.
# তুষারপাতের এই বিশেষ ইফেক্টটি কোনরকম ছবি ফাইল ছাড়াই তৈরি করা হয়েছে। তাই লোড হতে অতিরিক্ত কোন সময় লাগবে না।

<script src="http://sites.google.com/site/banglahacks/tools/snow.js" type="text/javascript"></script>

# উল্লেখ্য যে সাদারঙের ব্যাকগ্রাউন্ডযুক্ত ব্লগে তুষারপাত ভাল বোঝা যাবে না। যাদের ব্লগের ব্যাকগ্রাউন্ড কাল বা কোন গাঢ় রঙের তারা তুষারপাতের আনন্দটি ভালোভাবেই উপভোগ করতে পারবেন।
* এই দারুণ কোডটি তৈরি করেছেন Kurt Grigg, আর এটা সংগ্রহ করা হয়েছে Dynamic Drive থেকে।

»» read more

একটি সহজ মেনুবার তৈরি করার পদ্ধতি

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

• ব্লগার.কম (Blogger.com) এ লগইন করুন।
• Layout এর Page Elements ট্যাবে গিয়ে Add a Gadget এ ক্লিক করে একটি নতুন HTML/ Javascript গেজেট নিন।
• এই গেজেটে নিচের কোডটি সম্পূর্ণ কপি করে পেস্ট করুন।

<div style="background-color:#DBF2FB; float:left;">
<a href="URL 1">Link 1</a> |
<a href="URL 2">Link 2</a> |
<a href="URL 3">Link 3</a> |
<a href="URL 4">Link 3</a> |
<a href="URL 5">Link 3</a> |
<a href="URL 6">Link 3</a> |
<a href="URL 7">Link 3</a> |
</div>

• URL 1, 2, 3, 4 ইত্যাদিগুলো পরিবর্তন করে আপনি যে পোস্টের লিংক রেখে দিতে চান, তা লিখুন।
• Link 1, 2, 3, 4 ইত্যাদিগুলো পরিবর্তন করে উপযুক্ত নাম যেমন About, Contact ইত্যাদি লিখুন।
• background-color এর কোড পরিবর্তন করে নিজের পছন্দমতো রঙ এর কোড বসিয়ে দিন। পছন্দের রঙের কোড জানার জন্য Color Chart দেখুন। কিংবা কালার কোডার দিয়ে নিজের মনমতো একটি রঙ বানিয়ে নিন।
• লিংকগুলোকে ডানে বামে নেয়ার জন্য float:left এর জায়গায় right লিখে দিন।
• গেজেটটি সেভ করুন।
• এই গেজেটটিকে Header এর ঠিক নিচে রেখে দিন।
• এবার ব্লগটিকে একবার রিফ্রেশ করে দেখুন তো নতুন তৈরি করা মেনুবারটি কেমন দেখাচ্ছে।

»» read more

ব্লগার ব্লগের জন্য একটি আলতো করে সরে যাওয়া মেনু

আসুন এবার ব্লগার.কম ব্লগে একটি সমান্তরার মেনু তৈরি করি। এই মেনুটির উপরে মাউস নিয়ে গেলে আলতো করে আগের লেখার পিছনে থাকা ছবিটি সরে যায়। আসলে এই মেনুটিতে গুগল এর এজাক্স দিয়ে একটি অন্যরকম ভালোলাগার মতো সৌন্দর্য সৃষ্টি করা হয়েছে।

• গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগারে লগইন করুন।
• Layout > Edit HTML অংশে যান। এখানে ]]></b:skin> এর ঠিক উপরে নিচের কোড স্থাপন করুন।

• .container {
  width: 520px;
  height: 100px;
  position: absolute;
  top: 10%; left: 60%;
  margin: 0px 0 0 -80px;
  overflow: hidden;
  }
  img {border: none;}
  ul#topnav {
  margin: 10px 0 20px;
  padding: 0;
  list-style: none;
  font-size: 1.1em;
  clear: both;
  float: left;
  width: 520px;
  }
  ul#topnav li{
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: left;
  height:40px;
  }
  ul#topnav a, ul#topnav span {
  padding: 10px 10px;
  float: left;
  text-decoration: none;
  color: #fff;
  clear: both;
  height: 20px;
  line-height: 20px;
  background: #1d1d1d;
  }
  ul#topnav a { color: #7bc441; }
  ul#topnav span {
  display: none;
  }
  ul#topnav.bh span{
  color: #FF0000;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNjEnuu0QdTUA8lhkZz4w3fPhS6RroIJBtT2QSYYoPPc_nmOVJ1lLjscpBrwB7JwjEVxOIAoZyFVBgMe-Htlj9SATvTsZCf4l5kTk5TaGvP9WYsq9GZhX1xfFb6LfP9tKvVwF1WGCiOGm/s320/hmenu.png) repeat-x left top;
  }
  ul#topnav.bh a{
  color: #555;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNjEnuu0QdTUA8lhkZz4w3fPhS6RroIJBtT2QSYYoPPc_nmOVJ1lLjscpBrwB7JwjEVxOIAoZyFVBgMe-Htlj9SATvTsZCf4l5kTk5TaGvP9WYsq9GZhX1xfFb6LfP9tKvVwF1WGCiOGm/s320/hmenu.png) repeat-x left bottom;
  }

• এখনি সেভ করবেন না। একটু নিচে দেখুন </head> লেখা আছে। এর উপরে নিচের কোডটুকু বসিয়ে দিন।

• <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
  
  <script type='text/javascript'>
  $(document).ready(function() {
  $("#topnav li").prepend("<span/>");
  
  $("#topnav li").each(function() {
  var linkText = $(this).find("a").html();
  $(this).find("span").show().html(linkText);
  });
  
  $("#topnav li").hover(function() {
  $(this).find("span").stop().animate({
  marginTop: "-40"
  }, 250);
  } , function() { //On hover out...
  $(this).find("span").stop().animate({
  marginTop: "0"
  }, 250);
  });
  
  });
  </script>

• এবার আরও নিচে নামতে থাকুন। যেখানে <div id='content-wrapper'> লেখা রয়েছে, তার উপরে নিচের কোডগুলো বসান।

• <ul class='bh' id='topnav'>
  <li><a href='#'>Home</a></li>
  <li><a href='#'>Ubuntu</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Email me</a></li>
  <li><a href='#'>Archive</a></li>
  <li><a href='#'>Tutorial</a></li>
  </ul>

• এখানে আপনার পছন্দমতো লিংক ও লিংকের নাম বসাতে হবে। লাল রঙে বোল্ড করে দেখিয়ে দিয়েছি। # চিহ্নটির বদলে লিংক লিখুন ও Home, Ubuntu ইত্যাদির বদলে আপনার প্রয়োজনীয় নাম লিখুন।
• এবার সেভ করুন। সেভ করার পূর্বে একবার প্রিভিউ দেখে নিতে ভুলবেন না যেন।
• খেয়াল করুনঃ যদি <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> এই অংশটি আগে কোন গেজেট বা মেনুর জন্য ব্লগে ইনস্টল করে থাকেন, তাহলে নতুন করে আর এই লাইনটুকু ব্লগে বসাতে হবে না। যেমন: এর আগে প্রকাশ করা
• সাইডবারের লিংকগুলোকে ঠেলে সরিয়ে দেয়াএবং
• আরও উন্নত "রিলেটেড পোস্ট" (Related Posts) গেজেটযদি আপনার ব্লগে লাগানো থাকে তাহলে ওই লাইনটি বাদ দিয়েই বাকী কোডগুলো বসিয়ে দিন।

»» read more

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

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

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

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

»» read more