কামরুলকক্স: ব্লগে Facebook ও Blogger Comment Multi Tab যুক্ত করবেন ?

আসসালামু আলাইকুম,আশা করি ভাল আছেন,আমিও আপনাদের দোয়ায় ভাল আছি,মূল কথায় আসি,আমি গত পোষ্টে দেখিয়েছিলাম কিভাবে সহজ উপায়ে আপনার ব্লগে Facebook Comment Box যুক্ত করবেন। আজ আপনাদের সাথে শেয়ার করবো কিভাবে ব্লগে Multi Tab সিস্টেমের মাধ্যমে এক সাথে Facebook এবং Blogger দুটি কমেন্ট বক্স ব্যবহার করবেন। এর ফলে আপনার ভিজিটররা সহজে বুঝতে পারবে আপনার
পোষ্টটির কোন ট্যাবে কতটি কমেন্ট করা হয়েছে।ডেমো দেখতে চাইলে আমার ব্লগের যে কোন একটি পোষ্টের নিচের Comment Box

হতে দেখে আসতে পারেন,অথবা নিচের ছবি দুটো দেখে নিন

কি ভাবে যুক্ত করতে হয়ঃ

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

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script> <script src='http://code.jquery.com/jquery-latest.js'/> <script type='text/javascript'> function commentToggle(selectTab) { $(".comments-tab").addClass("inactive-select-tab"); $(selectTab).removeClass("inactive-select-tab"); $(".comments-page").hide(); $(selectTab + "-page").show();} </script>

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

<style> /*--- Tabbed Facebook Comments By subinsb.com ----*/ .comments-page { background-color:#FFF; border:1px dotted #93DAF8; border-radius:10px; margin-top:5px; } #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 == "item"'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>

<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXydfM8OUzezwCqqEkvKXaF5WNCjfgd6WvJsMUT9DG6MnymNCWM4skCBv1j21ZQLBTaY04hoVI9Lvfo79a5zKDyyZ81oWjYY_Dlft-ZslJ7dqKWTgyhtxfdQeEWTeZ5JilXiv_2XgS6mX7/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("#blogger-comments");' 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 == "item"'>

<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 ভাল লাগলে কমেন্ট করতে ভুলবেন না

সূত্র : ভিসিটর টিউন

ব্লগে Facebook ও Blogger Comment Multi Tab যুক্ত করবেন ?

৫টি মন্তব্য: