ব্লগে Post Author, Date, Labels ও Comments Display করুন

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

উপরের চিত্রে সকল অপশন গুলির ডেমো দেখুন। এই অপশনগুলি আমরাও আমাদের ব্লগে ব্যবহার করছি। এটির Author এর নামের পাশে পোষ্টটির Author এর ছবিও শো করছে। অনেকে ভাবছেন এই ছবিটি আমরা ম্যানুয়ালি সেট করে দিয়েছি বিধায় ছবি শো করছে। এটির সবচাইতে বড় সুবিধা হচ্ছে আপনার ব্লগে যত জন Author থাকুক না কেন কারো ছবি সেট করে দেয়ার প্রয়োজন হবে না। এটি অটোমেটিক্যালি ব্লগের/Google+ প্রোফাইলেরছবি শো করবে। সে জন্য আমি বলেছি এটির তাফাৎ এখানেই যে, ইতিপূর্বে শেয়ার করা সকল পোষ্টগুলিতে সবাই Author এর ছবি ম্যানুয়ালি সেট করার পদ্ধতি দেখিয়েছে। যার ফলে একাধিক Author থাকলে সবার ছবি আলাদা আলাদাভাবে সেট করে দেয়ার প্রয়োজন হত। আমাদের এই পদ্ধতিতে এটি যুক্ত করে রাখলে Author-দের ছবি ও Bio আলাদাভাবে সেট করা নিয়ে ভাবতে হবে না।

 কিভাবে যুক্ত করবেন?

• প্রথমে ব্লগে লগইন করুন।
• ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।

• তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
• এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।

.admin-image img{width:23px;height:23px;border:1px solid #E2E2E2;border-radius:50px;margin-bottom:-10px;margin-right:-10px;padding:2px;cursor:pointer;background:none repeat scroll 0% 0% transparent}
.post-author{color:#999;font-size:12px;line-height:18px;padding:0 0 5px 0}
.post-author a:link {text-decoration:none;}
.post-author a:hover {text-decoration:underline;}
.post-author span{padding:0px 6px 5px;background-position:left center;background-repeat:no-repeat}
.post-author span.updated:before,.post-author span.meta-label:before,.post-author span.meta-comments:before{color:#39BFBF;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:5px;margin-left:-10px}
.post-author span.updated:before{content:"\f017"}
.post-author span.meta-label:before{content:"\f02c"}
.post-author span.meta-comments:before{content:"\f075"}

• আবার কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
• এখন নিচের Scripts গুলি </head> ট্যাগের উপরে পেষ্ট করুন।

<script type='text/javascript'>
//<![CDATA[
//Author Avatar
function author(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

• পুনরায় কিবোর্ড হতে Ctrl+F চেপে <div class='post-header-line-1'/> অংশটি সার্চ করুন।
• এখন নিচের কোডগুলি <div class='post-header-line-1'/> ট্যাগের ঠিক নিচে পেষ্ট করুন। (নোটঃএই অংশটি আপনার ব্লগের টেমপ্লেটের একাধিক জায়গায় পাবেন। আপনি ২য় টির নিচে পেষ্ট করবেন)

<div class='post-author vcard' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.author'>
<span class='admin-image'>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=author&quot;'/>
</span>
<span class='fn author' itemprop='name'>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
</span>
</b:if>
<span class='updated'><data:post.date/></span>
<span class='meta-label'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?&amp;max-results=5&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if>
</b:loop>
</b:if>
</span>
<span class='meta-comments'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>0 Comments</b:if>
<b:if cond='data:post.numComments == 1'>1 Comment</b:if>
<b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> Comments</b:if>
</a>
</b:if>
</span>
</div>

• আপনার টেমপ্লেটে যদি Font Awesome স্টাইলশীট যুক্ত করা না থাকে তাহলে সেটি অবশ্যই যুক্ত করে নিবেন।
• সবশেষে Template Save করুন।

Read More »

ব্লগে Material Design "Ripple Animation" Effect যুক্ত করুন -

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

আমরা আজ যেটি শেয়ার করছি সেই Effect টি আপনার ব্লগের যে কোন অংশে যুক্ত করতে পারবেন। এটি যুক্ত করার ফলে ভিজিটর যখন আপনার ঐ অংশটিতে ক্লিক করবে তখন পানির ঢেউ এর আকর্ষণীয় একটি ইফেক্ট দেবে। আমাদের ব্লগের ম্যানুবারে এই ইফেক্টটি ব্যবহার করছি, যেখানে ক্লিক করলে বিষয়টি ভালভাবে বুঝতে পারবেন অথবা নিচের বাটনটিতে ক্লিক করলে এর সম্পর্কে পরিষ্কার ধারনা পাবেন।

 ক্লিক করুন

 কিভাবে যুক্ত করবেন?

• প্রথমে ব্লগে লগইন করুন।
• তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।

• কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
• এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।

/* Ripple Animation
--------------------------------------------------- */
@-webkit-keyframes ripple-animation{
0%{-webkit-transform:scale(.01);transform:scale(.01)}
100%{-webkit-transform:scale(5);transform:scale(5)}
}
@keyframes ripple-animation{
0%{-webkit-transform:scale(.01);transform:scale(.01)}
100%{-webkit-transform:scale(5);transform:scale(5)}
}

• কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
• এখন নিচের Scripts গুলি </head> ট্যাগের ঠিক উপরে পেষ্ট করুন। 

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(e){e("body").on("click",".ripple-effect",function(t){t.preventDefault();var i=e(this),a=i.attr("data-ripple-limit"),n=i.attr("data-ripple-color");if("undefined"==typeof n)var n="rgba( 0, 0, 0, 0.3 )";var o=i.attr("data-ripple-wrap-radius");if("undefined"==typeof o)var o=0;if("undefined"==typeof a)var r=i;else var r=i.closest(a);var p=r.offset(),d=t.pageX,s=t.pageY,f=r.outerWidth(),l=r.outerHeight(),u=e('<span class="ripple-effect-wrap"></span>');u.css({width:f,height:l,position:"absolute",top:p.top,left:p.left,"z-index":1e4,overflow:"hidden","background-clip":"padding-box","-webkit-border-radius":o,"border-radius":o});var c=i.attr("data-ripple-wrap-class");"undefined"!=typeof c&&u.addClass(c),u.appendTo("body");var b=d-p.left,m=s-p.top,g=1e3,h=e('<span class="ripple"></span>');h.css({width:g,height:g,background:n,position:"absolute",top:m-g/2,left:b-g/2,content:"","background-clip":"padding-box","-webkit-border-radius":"50%","border-radius":"50%","-webkit-animation-name":"ripple-animation","animation-name":"ripple-animation","-webkit-animation-duration":"5s","animation-duration":"5s","-webkit-animation-fill-mode":"both","animation-fill-mode":"both"}),e(".ripple-effect-wrap:last").append(h),setTimeout(function(){u.fadeOut(function(){e(this).remove()})},500);var v=i.attr("href"),w=i.attr("target");w||(w="_self"),"undefined"!=typeof v&&"#"!=v.substring(0,1)&&setTimeout(function(){window.open(v,w)},200),(i.is("input")||i.is("button"))&&setTimeout(function(){i.removeClass("ripple-effect"),i.trigger("click"),i.addClass("ripple-effect")},200)})});
//]]>
</script>

• সবশেষে Template Save করুন।

 কিভাবে HTML অংশ যুক্ত করবেন?

• আপনি যে অংশে এই ইফেক্ট দিতে চান সেই অংশের HTML অংশটি খোঁজে বের করতে হবে। উদাহরণ স্বরূপ ধরুন আপনি আপনার ব্লগের Menu Bar এ এই ইফেক্টটি দিতে চান। সাধারণত আপনার ম্যানুবারটির HTML নিচেরমত হতে পারে।

<li><a href='#'> Home </a></li>

         অথবা

<li><a class='menu' href='#'> Home </a></li>

• ইফেক্টটি যুক্ত করার পর আপনার লাইনটি হবে নিচেরমত।

 <li><a class='ripple-effect' href='#'> Home </a></li>

         অথবা

<li><a class='menu ripple-effect' href='#'> Home </a></li>

• আপনি যে জায়গায় এই ইফেক্ট দিতে চান কেবল সেই জায়ার Class এর সাথে ripple-effect অংশটি যুক্ত করে দিলেই হয়ে যাবে।

সাহায্য জিজ্ঞাসাঃ উপরের HTML অংশটি বুঝতে কোন সমস্যা হলে কিংবা আপনার ব্লগের যে অংশে যুক্ত করতে চাচ্ছেন সেই অংশ খোঁজে না পেলে আমাদেরকে কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের চেষ্টা করব, ইনশাআল্লাহ্।

Read More »

ব্লগে Facebook কমেন্ট Box যুক্ত করার সহজতর উপায় (Latest)

আমরা ইতিপূর্বে আপনাদের সাথে ব্লগে Facebook Comment Box যুক্ত করার উপায় সংক্রান্ত একটি পোষ্ট শেয়ার করেছি। আপনি ইচ্ছে করলে এই লিংক থেকে পোষ্টটি দেখে আসতে পারেন। ঐ পোষ্টে আমরা বিস্তারিতভাবে বর্ণনা করে দেখিয়েছিলাম যে, কিভাবে Facebook হতে Plugin টি যুক্ত করার মাধ্যমে ব্লগে কমেন্ট বক্স যুক্ত করতে হয়। এই জন্য সেখানে বাড়তী কিছু স্টেপ অনুসরণ করতে হয়েছিল। যার ফলে অনেকে আমাকে বলেছিলেন যে, আরোও সহজভাবে বিষয়টি পোষ্ট করার জন্য। সেই জন্য সবার কথা বিবেচনা করে আমি আজ সহজভাবে দেখাবো, আপনার প্রিয় ব্লগে কিভাবে Facebook Comment Box টি যুক্ত করবেন। তাছাড়া এখানে কিছু আপডেটও পাবেন। যেমন - Facebook এর সর্বশেষ আপডেট করা Html5 কোড ব্যবহার করেছি। এর ফলে কমেন্ট বক্সটি আরোও দ্রুত লোড নেবে এবং দেখতেও আকর্ষণীয় মনে হবে।

 কিভাবে ব্লগে যুক্ত করবেনঃ

• প্রথমে আপনার ব্লগে লগইন করুন।
• তারপর Template > Edit Html এ ক্লিক করুন।

• এরপর কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
• এখন নিচের কোডগুলি কপি করে </body> এর উপরে পেষ্ট করুন। (নোটঃ নিচের এই Facebook Plugin টি আপনার ব্লগে যদি যুক্ত করা থাকে, তাহলে পুনরায় এ্যাড করা প্রয়োজন নেই। কিন্তু এটি যদি যুক্ত করা না থাকে তাহলে অবশ্যই যুক্ত করে নেবেন। কারণ এই JavaScript টি যুক্ত করে রাখলে আপনার ব্লগে Facebook এর যে কোন Plugin ব্যবহার করতে পারবেন)।

<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

• তারপর আবার Ctrl+F চেপে <b:include data='post' name='post'/> অংশটি সার্চ করুন।
• নিচের কোডগুলি কপি করে উপরের লাল অংশটির নিচে পেষ্ট করুন।

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='fb-comments' data-numposts='10' data-width='600' expr:href='data:post.url'/>
</b:if>

• সবশেষে Save Template এ ক্লিক করলেই কাজ OK.

 কাষ্টোমাইজেশনঃ

• কমেন্ট বক্সের Width এই অংশ data-width='600' হতে পরিবর্তন করতে পারবেন।
• কতটি কমেন্ট করার পর বাকী কমেন্টগুলি Embed অবস্থায় রাখতে চান, তা এখান থেকে data-numposts='10' সিলেক্ট করে দিতে পারেন।

ভিডিও টিউটোরিয়াল দেখুন

Read More »

ব্লগারের জন্য আকর্ষণীয় Customize EU Cookies Notification Bar

সম্প্রতি সব ধরনের Blogspot এর ব্লগ ব্যবহারকারীরা তাদের ব্লগের ড্যাশবোর্ডে এ রকম একটি নোটিফিকেশন পেয়েছেন যে, European Union (EU) এর আইন অনুযায়ী সব ধরনের ব্লগে ভিজিটরদের ব্লগের Cookies সম্পর্কে Information দিতে হবে। এই জন্য Blogger Team সব ধরনের ব্লগের জন্য একটি নোটিফিকেশন যুক্ত করেছে, যাতে করে European Union (EU) এর আওতাধীন সকল দেশের ভিজিটররা ব্লগের Cookies সম্পর্কে Information দেখতে পায়। আসলে এটি European Union (EU) এর একটি নতুন আইন। কাজেই এটি সকল Blogspot ব্যবহারকরীকে মানতে হবে।

প্রকৃতপক্ষে এই আইনের মাধ্যমে European Union (EU) বিভিন্ন ওয়েব ডেভেলপারদের দায়িত্বশীলতা বাড়ানোর চেষ্টা করছে। তারা ভাবছে এর ফলে সকল ধরনের ভিজিটররা যে কোন ওয়েবসাইট সম্পর্কে সহজে অনেক ধারনা নিতে পারবে। ব্লগার ড্যাশবোর্ডের নোটিফিকেশনটি দেখুন -

নোটিফিকেশনটি কোথায় শো করবেঃ এই নোটিফিকেশনটি European Union (EU) এর আওতাধীন সকল দেশে শো করবে। যেমন- Italy, France, UK, Denmark, Sweden, Greece, Germany ইত্যাদি। European Union (EU) আওতাধীন নয় এমন দেশে এই নোটিফিকেশনটি শো করবে না।

কিভাবে নোটিফিকেশনটি দেখবেনঃ আপনি European Union (EU) আওতাধীন নয় এমন দেশে অবস্থান করেন তাহলে এই নোটিফিকেশনটি দেখার জন্য আপনি আপনার ব্লগের এড্রেস এর পরে এই.prx.gb.teleport.to লাইনটি যুক্ত করে দেখতে পারেন। যেমন আমার ব্লগটি দেখতে চাইলে -

http://www.prozokti.com.prx.gb.teleport.to

এই নোটিফিকেশনটি কি বন্ধ করা যাবেঃ এক কথায় বলা যায় হ্যা, পারবেন। আপনি যদি আগে কখনো ব্লগে কাষ্টম নোটিফিকেশন যুক্ত করে রাখেন তাহলে এটি আপনার স্টাইল অনুযায়ী ব্লগের Cookies সম্পর্কে Notification দেবে। আর আপনি যদি না করে থাকেন তাহলে ব্লগার তার ডিফল্ট Cookies Notification ভিজিটরদের দেখাবে। সুতরা আপনি চাইবেন না যে, আপনার ব্লগের Cookies সম্পর্কে জানা থেকে কেউই বিরত থাকুক। তারপরও যদি আপনি এটিকে Disable করে রাখেন তাহলে আপনার ব্লগটি ব্যান হওয়ার সম্ভাবনা বেড়ে যাবে।

আপনি যদি ব্লগের Cookies Notification বন্ধ করতে চান তাহলে নিচের কোডগুলি ব্লগার টেমপ্লেটের </head> ট্যাগের উপরে যুক্ত করুন। এই অংটি কেবলমাত্র শেখার জন্য শেয়ার করছি।

<script type="text/javascript">
   cookieChoices = {};
</script>

 এটি কোথায় শো করবেঃ

• আপনার ব্লগের Navbar টি যদি Hide করা না থাকে তাহলে এরকম দেখতে পাবেন।

• Navbar টি Hide করা থাকলে এরকম দেখতে পাবেন।

 কিভাবে Customize EU Cookies Notification Bar যুক্ত করবেনঃ

• প্রথমে আপনার ব্লগে লগইন করুন।
• এরপর Template > Edit Html এ ক্লিক করুন।
• তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
• এখন নিচের কোডগুলি কপি করে ]]></b:skin> ট্যাগের ঠিক নিচে পেষ্ট করুন।

<!--Custom EU Cookies Notifications-->
<script type="text/javascript">
  cookieOptions = {
  msg: 'This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.',
  link: 'https://www.blogger.com/go/blogspot-cookies',
  close: 'Got it!',
  learn: 'Learn More' };
</script>
<style>
.cookie-choices-info {
    z-index:999999!important;
    background-color:#333333;
    color:#ffffff!important;
}
.cookie-choices-info .cookie-choices-button {
    background-color: #6FC415;
    border-radius: 2px!important;
    box-shadow: 2px 3px 2px #000;
    text-decoration:none;
}
</style>

• সবশেষে Save Template এ ক্লিক করে Template টি Save করুন। Customize EU Cookies Notification Bar টি নিচের চিত্রেরমত দেখতে পাবেন।

 কাষ্টোমাইজেশনঃ

• নোটিফিকেশন বারটির Background কালার পরিবর্তন করতে চাইলে উপরের লাল চিহ্নিত #333333অংশটি পরিবর্তন করুন।
• নোটিফিকেশন বারটির Button কালার পরিবর্তন করতে চাইলে উপরের Pink কালারের #6FC415অংশটি পরিবর্তন করুন।

Read More »

ব্লগারে যুক্ত করুন feedburner email subscription এবং FeedCount

RSS কিঃ এটি ব্লগে যুক্ত করে নেওয়ার আগে জেনে নেই আসলে এই RSS কি বা কেন/কিভাবে ব্যবহার করতে হয়? RSS (Rich Site Summary) মূলত একটি ফাইল ফরম্যট যা একই সাথে আধুনিক ওয়ার্ল্ড ওয়াইড ওয়েবের (www) এক অতি জনপ্রিয় প্রযুক্তি। এটি এক্সএমএল (XML) নামক এক সাধারণ ডাটা ফরম্যাট-এর অধীনস্থ এমন একটি উপাদান, যা মূলত ওয়েব সিন্ডিকেশন বা ওয়েব নজরদারীর জন্য ব্যবহৃত হয়।

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

কিভাবে এই Rss ব্যবহার করবোঃ এই Rss ব্যবহার করার জন্য বিভিন্ন Software রয়েছে যেগুলি ব্যবহার করে খুব সহজে আপনি আপনার কাঙ্খিত সাইটগুলির লেটেস্ট নিউজ বা পোষ্ট পেতে পারেন। আমার পক্ষে সবগুলি Software এর আলাদা নিয়ম দেখানো সম্ভব নয়। এই লিংকে অনেক গুলি Rss রিডার রয়েছে, আপনি ইচ্ছে করলে এগুলি দেখে আসতে পারেন। তবে আমি যেটার কথা বলছি সেটি হচ্ছে SharpReader. আপনি এখান থেকে এই ছোট্ট Software টি ডাউনলোড করে ব্যবহার করতে পারেন। ডাউনলোড করে আপনার পিসিতে ইনস্টল দিয়ে এড্রেসবারে Rss ঠিকানাটি লিখে কিবোর্ড এর এন্টার প্রেস করলেই সাইটটির সকল লেটেস্ট পোষ্ট পেয়ে যাবেন। যেমন- আমাদের সাইটের Rss এড্রেস হচ্ছে http://feeds.feedburner.com/prozokti. এ ব্লগটির নিয়মিত আপডেট পাওয়ার জন্য বাম দিকের বাটন হতে Subscribe করে নিতে হবে। এখন থেকে এই সাইটটির সকল পোষ্ট এর হেডিং দেখতে পাবেন এবং হেডিংয়ে ক্লিক করলে বিস্তারিত লেখা শো করবে।

FeedBurner কিঃ FeedBurner হচ্ছে গুগল এর একটি ফিড রিডার সাইট। এ FeedBurner টি বিভিন্ন টপ লেভেরে ওয়েব ডেভেলপাররা ব্যবহার করে থাকেন। কারণ এটি তার ডিজাইনের জন্য বিখ্যাত। তাছাড়া এটিতে Feed Count সহ E-mail Subscribe করার ব্যবস্থা রয়েছে। যার ফলে যে কেউ ইমেইল এ সাব্সক্রাইব করে রাখলে ঐ সাইটের সমস্ত লেটেস্ট পোষ্ট ই-মেইলের মাধ্যমে অটোমেটিক তার মেইল বক্সে চলে যাবে।

• আরও পড়ুনঃ ব্লগারের জন্য একটি আকর্ষণীয় Email Subscription Form উইজেট

কিভাবে ব্লগে যুক্ত করবেনঃ প্রত্যেক ব্লগেরই নিজস্ব ফিড রিডার থাকে, কিন্তু সকল সুবিধা না থাকার কারনে বেশীরভাগ লোকই এটি ব্যবহার করতে চান না।

• প্রথমে আপনার Gmail ID ব্যবহার করে FeedBurner এ লগইন করুন।
• তারপর এখানে আপনার ব্লগ এর এড্রেস দিন। নিচের চিত্রে দেখুন -

• এরপর নিচের চিত্রের মত সিলেক্ট করে Next এ ক্লিক করুন।

• এখন নিচের চিত্রে আপনার সাইটের টাইটেল লিখুন এবং Feed Address এ ডিফল্টভাবে একটি Address শো হবে। এটি পছন্দ না হলে আপনার পছন্দমত Address দিয়ে Next এ ক্লিক করুন। তাহলে আপনার Feedburner এড্রেসটি হবে http://feeds.feedburner.com/harunzoki

• এরপর এটি আপনাকে আপনার ফিড Tracking করার অপশন দেবে। এটি নিচের চিত্রের মত সেটআপ করুন।

• এতটুকু করলেই আপনার Feedburner একাউন্ট হয়ে যাবে।

কিভাবে FeedBurner Email Subscription যুক্ত করবেনঃ 

• Email Subscription যুক্ত করার জন্য নিচের চিত্রটি ফলো করুন।

• এরপর নিচের চিত্রটি দেখুন যেখানে থেকে কোডগুলি নিয়ে আপনার ব্লগে ইমেইল Subscription ফরম ব্যবহার করতে পারবেন।

কিভাবে Subscriber Count বাটন যুক্ত করবেনঃ

• আবার Publicize tab থেকে Feed Count যান।
• তারপর নিচের চিত্রটি ফলো করুন। সেখানে বিভিন্ন অপশন আছে, সেটি আপনি নিজেই বুঝতে পারবেন।

• একটিভ করার পর এখানে কিছু Html কোড দেখতে পাবেন। সেগুলি কপি করে আপনার ব্লগে কাউন্ট বাটন ব্যবহার করতে পারবেন।

আপনার Blog Feed থেকে Feedburner এ  Redirect করুনঃ ব্লগের যে ডিফল্ট ফিড রিডার থাকে এটিকে এখন Feedburner এ  Redirect করে নিতে হবে। তা না হলে এটি সঠিকভাবে কাজ করবে না।

• প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
• তারপর  ব্লগার ড্যাশবোর্ড হতে Settings > Other এ যান।
• এরপর Site Feed হতে এটি Redirect করে নিন। এখানে আপনার Feedburner address টি দেন। নিচের চিত্রে দেখুন -

• এখন আপনার ব্লগের ডিফল্ট ফিডটি অটোমেটিক্যালি Feedburner এ  Redirect হয়ে যাবে। That's all.

Read More »