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

চ্যাট এই কথাটি বর্তমান সময়ে খুব জনপ্রিয় একটা শব্দ। বর্তমান সময়ে নেট ব্যবহার করে কিন্তু বন্ধুদের সঙ্গে চ্যাট করেনা এটা হতেই পারেনা।

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


chatbox-blogger-blog-widget




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


প্রথমে আমাদের 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 এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ব্লগ চেক করুন আশাকরি আপনি কাজটি করতে সফল হয়েছেন। কোন রকম সমস্যা হলে নিচে কমেন্ট করুন পোস্টটি ভাল লাগলে বন্দুদের সঙ্গে শেয়ার করুন। ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।

COMMENTS

নাম

অনলাইন ইনকাম,11,অন্যান্য,13,অ্যাডসেন্স,3,অ্যান্টিভাইরাস,9,আইটি নিউজ,11,আলেক্সা,6,ইন্টারনেট,63,ইসলামিক,8,উইন্ডোজ,36,উইন্ডোজ ১০,3,উবুটু,1,এইচটিএমএল,60,এনড্রয়েড,56,ওয়ার্ডপ্রেস,11,ওয়ালপেপার,12,ওয়েডগেট,77,ওয়েব ব্রাউজার,7,ওয়েব হোস্টিং,1,কবিতা,1,ক্র্যাক,18,খবর,3,গুগল অ্যাডসেন্স,2,গেম,8,টিপস অ্যান্ড ট্রিকস,122,টেম্পেলেট,53,ডাউনলোড,75,নোটিফিকেশন,1,পিসি টিপস,15,পোর্টবেল,3,ফীডবার্নার,4,ফেসবুক,29,ফ্রীলান্সিং,1,বাংলা ইবুক,11,বিনোদন,8,ব্লগার,419,ব্লগার টিপস,194,মিডিয়া,1,মিডিয়া প্লেয়ার,1,মুভি,2,সফটওয়্যার,16,CSS ( সিএসএস ),8,Mp3 গান,1,SEO,27,WhatsApp,2,
ltr
item
এসো বন্ধু: কিভাবে ব্লগার ব্লগে সুন্দর একটি চ্যাট বক্স ব্যবহার করবেন !
কিভাবে ব্লগার ব্লগে সুন্দর একটি চ্যাট বক্স ব্যবহার করবেন !
চ্যাট এই কথাটি বর্তমান সময়ে খুব জনপ্রিয় একটা শব্দ। বর্তমান সময়ে নেট ব্যবহার করে কিন্তু বন্ধুদের সঙ্গে চ্যাট করেনা এটা হতেই পারেনা।
http://2.bp.blogspot.com/-p2pdH_EI1ec/VjMoEC8SnkI/AAAAAAAALQI/K-mYwmkDAW4/s1600/chatbox-SmartChatbox-blogger-blog-widget.png
http://2.bp.blogspot.com/-p2pdH_EI1ec/VjMoEC8SnkI/AAAAAAAALQI/K-mYwmkDAW4/s72-c/chatbox-SmartChatbox-blogger-blog-widget.png
এসো বন্ধু
http://www.esobondhu.com/2015/10/chatbox-blogger-blog.html
http://www.esobondhu.com/
http://www.esobondhu.com/
http://www.esobondhu.com/2015/10/chatbox-blogger-blog.html
true
8212991989234450027
UTF-8
Loaded All Posts Not found any posts আরও দেখুন বিস্তারিত পড়ুন Reply Cancel reply Delete By মূল পাতা PAGES POSTS View All আরও কিছু পোস্ট ARCHIVE সার্চ করুন সকল পোস্ট সমূহ Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy