ব্লগার.কম এর ব্লগে 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 ব্লগের যে কোন একটি পোস্ট সম্পূর্ণ খুলে দেখুন।