সম্মানিত দর্শক আপনাকে স্বাগতম। আমাকে Facebook Facebook Google+ এ পাবেন।

Saturday, June 20, 2015

ব্লগস্পটে Multi Tab সিস্টেম কমেন্ট বক্স যুক্ত করবেন যেভাবে

আসসালামু আলাইকুম,আশা করি সবাই ভাল আছেন,যারা ব্লগিং করেন,তাদের পোষ্ট করা কিছুটা স্বার্থক হয় তখন,যখন কোন ভিসিটর ঐ পোষ্টে কমেন্ট করেন,মানুষের যেমন একটা প্রাণ আছে,ঠিক তেমন পোষ্টের প্রাণ হল কমেন্ট,তবে এ কমেন্ট গুলো পেতে আমাদের কিছুটা কাজ করতে হবে,যেমন ব্লগস্পটে স্বাভাবিক ভাবে ফেইসবুক কমেন্ট বক্স থাকেনা যার ফলে কেউ চাইলে ফেইসবুক দিয়ে কমেন্ট করতে পারেনা,আজকে আমরা ব্লগার ও ফেইসবুক Multi Tab সিস্টেম কমেন্ট বক্স যুক্ত করব,এটি যুক্ত করার ফলে ব্লগার ও ফেইসবুক দু প্রকারে কমেন্ট করতে পারবেন ভিসিটর এরা ,একসাথে Facebook এবং Blogger দুটি কমেন্ট বক্স ব্যবহারের ফলে আপনার ভিজিটররা সহজে বুঝতে পারবে আপনার পোষ্টটির কোন ট্যাবে কতটি কমেন্ট করা হয়েছে নিচের ছবিতে দেখুন


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


এবার  </head> সার্চ করে ঠিক তার উপরে নিচের কোডগুলি পেষ্ট করুন।

<style>
/*--- Tabbed Facebook Comments By VisitorTunes.com ----*/
.comments-page {background-color:#FFF; border:15px;border: 1px solid #d1d8f0;}
#blogger-comments-page {padding:0px 5px; display:none;}
.comments-tab {float:left; padding:5px; margin-right:3px; cursor:pointer; background-color:#b5e5fa;border-radius: 2px;}
.comments-tab-icon {height:14px; width:auto; margin-right:3px;}
.comments-tab:hover {background-color:#eeeeee;}
.inactive-select-tab {background-color:#d1d1d1;}
</style>
এবার  <div class='comments' id='comments'> সার্চ করে ঠিক তার নিচে নিচের কোডগুলি পেষ্ট করুন।

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://1.bp.blogspot.com/-iVjviy2-71E/VSepyTP7WsI/AAAAAAAAD_w/3GTM7GGmQKQ/s1600/FB.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div></b:if><div class='clear'/></div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='comments-page' id='fb-comments-page'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='600'/>
</div>
</b:if>
<div class='comments comments-page' id='blogger-comments-page'>
ফেইসবুক কমেন্ট বক্সের width='600 কমাতে ও বাড়াতে পারেন

এরপর Save Template এ ক্লিক করলেই কাজ OK ভাল লাগলে কমেন্ট করতে ভুলবেন না

No comments:

Post a Comment

Powered by Blogger.