কিভাবে ব্লগার ব্লগে সুন্দর একটি চ্যাট বক্স ব্যবহার করবেন !

চ্যাট এই কথাটি বর্তমান সময়ে খুব জনপ্রিয় একটা শব্দ। বর্তমান সময়ে নেট ব্যবহার করে কিন্তু বন্ধুদের সঙ্গে চ্যাট করেনা এটা হতেই পারেনা। সেটা ফেসবুক হোক বা স্কাইপি হোক বা অন্য কোন কিছু হোক আমারা সবাই চ্যাট করে থেকে বন্ধুদের সঙ্গে। যাই হোক সেই রকম আজকে একটি সুন্দর চ্যাট ওয়েডগেট আপনার ব্লগে জন্য শেয়ার করবো যেটা আপনি আপনার ব্লগে খুব সহজে ব্যবহার করতে পারবেন এবং আপনার ব্লগ ভিজিটর আপনাকে ম্যাসেজ করতে পারবে। আজকের যে চ্যাট ওয়েডগেট এটা ব্যবহার করার জন্য আমাদের থার্ডপার্টি ওয়েবসাইট এর সাহায্য নিতে হবে যার নাম SmartChatbox এটা ব্যবহার করেই আমারা নিজদের ব্লগের জন্য একটা চ্যাট বক্স তৈরি করবো এবং নিজ নিজ ব্লগে সেই বক্স যুক্ত করবো । তাহলে আর কথা না বাড়িয়ে চলুন দেখে নেওয়া যাক কিভাবে করবেন।

ChatBox Demo

কিভাবে ব্লগার ব্লগে সুন্দর একটি চ্যাট বক্স ব্যবহার করবেন ?

প্রথমে আমাদের http://www.smartchatbox.com/ এ যেতে হবে এবং সেখানে গিয়ে Create SmartChatbox এ ক্লিক করলে একটি অ্যাকাউন্ট তৈরি করে নিতে হবে।

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

এবার আপনি উপরের অপশন থেকেই ৩ নাম্বার অপশনে দেখুন একটি নোটিশ দেওয়া আছে সেটা পড়ুন এবং পাসওয়ার্ড এর ঘরে শুধু পাসওয়ার্ড দিয়ে Create admin of your chat এ ক্লিক করুন ।

উপরের মত কাজ করলেই আপনাকে একটি নতুন পেজ দেওয়া হবে সেখানে আপনি একটি কোড পাবেন সেই কোড কপি করেনিন। ঠিক নিচের মত কোড পাবেন ।

<script type="text/javascript" src="//www3.smartchatbox.com/shoutbox/start.php?key=625079760"></script>

এখুন আপনি উপরের কোড থেকে শুধু মাত্র www3.smartchatbox.com/shoutbox/start.php?key=625079760 এই টুকু আপনার ওয়েব ব্রাউজারে ওপেন করুন তাহলে দেখুন কিছু কোড পাবেন।

উপরের কোড গুল একটু পরেই কাজে আসবে তাই সেগুল ভাল করে সেভ করে রেখুন বা ব্রাউজার ট্যাবটি ওপেন করে রাখুন । এবার চলুন ব্লগে যুক্ত করার কাজ করা যাক ।

কিভাবে ব্লগার ব্লগে চ্যাট ব্লগ যুক্ত করবেন ?

এবার আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Template এ ক্লিক করুন তারপর Edit HTML এ ক্লিক করে </body> ট্যাগটি সার্চ করুন এবং এই ট্যাগ এর ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করুন।

 <div class='chatbox' id='chatbox'>
<script>
//<![CDATA[
এখানে smartchatbox বক্স কোড গুল বসান 
//]]>
</script>
<div id='close-chat' onclick='closeChatbox()'>&amp;times</div>   
</div>
<div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</div>
<script>
//<![CDATA[
function loadChatbox(){var e=document.getElementById("chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}
function closeChatbox(){var e=document.getElementById("chat");e.style.display="block";var e=document.getElementById("chatbox");e.style.margin="0 0 -1500px 0";}
//]]>
</script>

উপরের কোড থেকে বাংলাতে লিখা " এখানে smartchatbox বক্স কোড গুল বসান " এটা মুছে সেখানে আপনি একটু আগে যে কোড সেভ করলেন মানে smartchatbox এর কোড গুল বসিয়ে দিন।  

এবার একি ভাবে CTRL+ F প্রেস করে </head> ট্যাগটি সার্চ করুন এবং তার ঠিক উপরে নিচের কোড গুল বসিয়ে দিন।

 <style type='text/css'>
/*<![CDATA[*/
#chat,#chat:after,.chatbox{transition:all .4s ease-in-out}
#chat,#close-chat{font-weight:700;cursor:pointer;font-family:Arial,sans-serif;text-align:center;height:20px;line-height:20px}
#chat,#close-chat,.chatbox{border:1px solid #A8A8A8}
#chat:after,#chat:before{position:absolute;border-style:solid;content:""}
.chatbox{position:fixed;bottom:0;left:50px;margin:0 0 -1500px;background:linear-gradient(to bottom,#fefefe 0,#d1d1d1 100%);border-bottom:none;padding:10px;z-index:100000}
#close-chat{position:absolute;top:-10px;right:-10px;font-size:24px;border-radius:100%;width:20px;background:#fefefe}
#chat{width:40px;border-radius:3px;padding:2px 8px;font-size:12px;position:fixed;bottom:30px;left:30px;background:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}
#chat:before{border-width:10px 11px 0 0;border-color:#A8A8A8 transparent transparent;left:7px;bottom:-10px}
#chat:after{border-width:9px 8px 0 0;border-color:#fff transparent transparent;left:8px;bottom:-8px}
#chat:hover{background:#ddd;-webkit-animation-name:hvr-pulse-grow;animation-name:hvr-pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}
#chat:hover:after{border-color:#ddd transparent transparent!important}
.animated-chat{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}
10%,20%{-webkit-transform:scale(.9)rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg)}
100%{-webkit-transform:scale(1)rotate(0)}
}
@keyframes tada{0%{transform:scale(1)}
10%,20%{transform:scale(.9)rotate(-3deg)}
30%,50%,70%,90%{transform:scale(1.1)rotate(3deg)}
40%,60%,80%{transform:scale(1.1)rotate(-3deg)}
100%{transform:scale(1)rotate(0)}
}
.tada{-webkit-animation-name:tada;animation-name:tada}
@-webkit-keyframes hvr-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}

কাজ শেষ Save Template এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ব্লগ চেক করুন আশাকরি আপনি কাজটি করতে সফল হয়েছেন। কোন রকম সমস্যা হলে নিচে কমেন্ট করুন পোস্টটি ভাল লাগলে বন্দুদের সঙ্গে শেয়ার করুন। ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।

পোস্ট রেটিং করুন

আরও নতুন পোস্ট পুরানো পোস্ট