Google Ajax Feed দিয়ে তৈরি করা অসাধারণ প্রযুক্তির 'সাম্প্রতিক পোস্ট' গেজেট

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

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

১। সাম্প্রতিক পোস্টের লিংকগুলোর পাশে একটি লাল রঙের তীর চিহ্ন দেখা যাচ্ছে। এই তীরটি স্বয়ংক্রিয়ভাবে পরপর পোস্ট টাইটেলের পাশে চলে আসে।
২। যে টাইটেল লিংকের পাশে তীর চিহ্নটি আসে সেই পোস্টটির একটি সংক্ষিপ্ত রূপ গেজেট বডির উপরে দেখা যায়।
৩। যে টাইটেলের উপরে মাউস নিয়ে যাবেন, সেই পোস্টের সংক্ষিপ্তাসার গেজেট বডির উপরের অংশে দেখা যাবে।
This is a special recent post gadget using google ajax feed api.
ব্লগদুনিয়ায় এই ধরণের কারিগরী বৈশিষ্ট্যের 'সাম্প্রতিক পোস্ট' গেজেট মাত্র এই একটিই রয়েছে। প্রযুক্তির দিক দিয়ে এই অনন্য ও অসাধারণ গেজেটটি স্থাপন করা খুব সহজ। এটা তৈরি করা হয়েছে Google's Ajax Feed API দিয়ে। তাই গেজেটটি স্থাপন করার আগে আপনাকে আপনার ব্লগ বা সাইটের জন্য একটি API KEY সংগ্রহ করতে হবে। কোনরকম আলাদা রেজিস্ট্রেশন ছাড়াই এই ঠিকানা থেকে আপনার নিজস্ব API KEY সংগ্রহ করে নিন। কোথাও লিখে রাখুন (আসলে লিফপ্যাড বা নোটপ্যাড কপি করে রাখুন)।

• এবার Blogger.com এ ইউজার আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন।
• Layout> Edit Html ট্যাবে যান।
  
• এখানে </head> এর ঠিক উপরে নিচের কোডটি স্থাপন করুন।

• <!-- recent posts ajax -->
  <script src='http://www.google.com/jsapi/?key=YOUR KEY' type='text/javascript'/>
  <script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>
  
  <style type='text/css'>
  @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
  
  #feedControl {
  width : 353px;
  margin-left : 1px;
  background : white;
  font-size: 14px;
  float:left;
  }
  .gfg-title {
  font-size: 17px;
  border-bottom: 1px solid #307396;
  font-weight: normal;
  color : #BF0000;
  background-color: #FFFFFF;
  }
  .gfg-title a {
  color : #005580;
  }
  .gfg-root {
  border: none;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  background-color : white;
  }
  .gfg-list {
  background-color : white;
  }
  .gfg-listentry-odd {
  background-color : white;
  }
  .gfg-entry {
  background-color : white;
  width : 100%;
  height : 7.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
  }
  .gfg-listentry-highlight {
  background-image : url('http://sites.google.com/site/banglahacks/image/red-arrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
  background-color : #F6F6F6;
  }
  
  </style>
  <script type='text/javascript'>
  
  
  function load() {
  var homeUrl = "<data:blog.homepageUrl/>";
  var feed = homeUrl + "atom.xml?redirect=false";
  new GFdynamicFeedControl(feed, "feedControl",
  {linkTarget : google.feeds.LINK_TARGET_SELF, numResults : 5, title : 'Recent Posts'});
  }
  
  google.load("feeds", "1");
  google.setOnLoadCallback(load);
  </script>
  
  <!-- /recent posts ajax -->

• এই জায়গায় দুইটি বিষয় একটু লক্ষ্য করুন
• YOUR KEY এর জায়গায় আপনার সংগ্রহ করা Google Ajax Key লিখে দিন।
• 353px টি পরিবর্তন করে যে সাইডবারে গেজেটটি স্থাপন করবেন তার সাইজ (Size) লিখুন।
• numResults : 5 এর পরিবর্তে যত সংখ্যক পোস্ট টাইটেল (Post Title) দেখাতে চান, তা লিখে দিন।
• Recent Posts লেখাটি পরিবর্তন করে 'সাম্প্রতিক পোস্ট', 'নতুন পোস্ট', 'নতুন লেখা' যা খুশি লিখে দিতে পারেন। You can change the words. This is a very powerful recent post gadget.
  
• সেভ করুন। Now save your changes. It is powered by Google Ajax Feed NoAPI.
  
• এবার Layout> Page Elements ট্যাবে যান।
• একটি নতুন HTML/ Javascripts গেজেট নিন। এখানে নিচের কোডটি লিখে দিন।
  

• <div id="feedControl">Loading...</div>

• এখানে Loading.... লেখাটি পাল্টে দিয়ে 'লোড হচ্ছে', 'একটু অপেক্ষা করুন' ইত্যাদি লিখে দিতে পারেন
• সেভ করুন। আপনার কাজ হয়ে গেছে। You have done installing this gadget.
  
• অন্য ট্যাবে থাকা ব্লগটিকে একবার রিফ্রেশ করুন। পরিবর্তনটা আপনি নিজেই বুঝতে পারবেন।
• নমুনা দেখুন "বাংলা হ্যাকস টেমপ্লেট" ব্লগে।
  

এই গেজেটটি সংগ্রহ করা হয়েছে এখান থেকে।

গুগল এজ্যাক্স ফিড সম্পর্কে জানতে এই পৃষ্ঠাটি একবার পড়ে দেখতে পারেন।