খুব সহজে ওয়েবসাইট তৈরি(পব-১১)আপনার ব্লগে যুক্ত করে নিন ফেইসবুক চ্যাট এবং ফেইসবুক পেইজ লাইক অপশন

ads

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

 

আপনার ব্লগে যুক্ত করে নিন ফেইসবুক চ্যাট এং ফেইসবুক পেইজ লাইক অপশন

Keyword:কিভাবে ব্লগে মেসেজ অপশন চালু করবেন,কিভাবে ব্লগে ফেইসবুক চ্যাট বক্স যুক্ত করবেন,ব্লগে যুক্ত করে নিন ম্যাসেজ অপশন,কিভাবে আপনার ব্লগে চ্যাটরুম যোগকরবেন,কিভাবে আপনার ব্লগে মেসেজ সুবিদা যুক্ত করবেন,কিভাবে ভিজিটরদের সাথে চ্যাট করবেন,ব্লগে যুক্ত করুন ফেইসবুক পেইজ লাইক বক্স,ব্লগে যুক্ত করুন ফেইসবুক লাইক অপশন,আপনার ব্লগে যুক্ত করে নিন ফেইসবুক চ্যাট এং ফেইসবুক পেইজ লাইক অপশন

প্রথমে আপনি আপনার ব্লগার ব্লগ লগইন করুন, এর পর ড্যাশবোর্ড থেকে Template অপশনে ক্লিক করুন।এবার আপনার টেমপেল্ট ব্যাকআপ করে নিন,এটা খুবই গুরুত্বপূর্ন।তারপর Edit HTML এ ক্লিক করুন।

এবার থিম এডিটর অপশন চলে আসবে সেখান থেকে আপনি CTRL+F প্রেস করেন এবং এই </head> ট্যাগ টি সার্চ করেন। এই ট্যাগ খুজে পেলে তার ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন।

<style type="text/css">

.chat_box {

  background: #fff;

  width: 270px;

  height: 435px;

  position: fixed;

  bottom: -400px;

  right: 60px;

  transition: all .3s;

  border: none;

  border-radius: 5px 5px 0 0;

  -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);

  -moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);

  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);

  overflow: hidden;

  z-index:1000000;

}

.pesan_chat {

  text-align: center;

  text-decoration: none;

  display: block;

  height: 100%;

  padding: 5px 5px 15px;

}

.chatheader {

  margin: 0 auto;

  padding: 0 10px;

  height: 35px;

  line-height: 35px;

  font-size: 16px;

  font-weight: 700;

  color: #fff;

  text-align: left;

  display: block;

  cursor: pointer;

  background:#3a5897;

}

.pesan_chat p {

  color: #616161;

  font-size: 14px;

  margin: 10px;

}

.close-chatfb {

  position: absolute;

  top: 0;

  right: 0;

  font-family: Arial;

  font-size: 24px;

  font-weight: 700;

  cursor:pointer;

  width:24px;

  color: #fff;

  height:35px;

  line-height:35px;

  text-align:center;

  opacity: .7;

}

.maxi-chatfb,

.mini-chatfb {

  position: absolute;

  top: 0;

  right: 20px;

  font-family: Arial;

  font-weight: 700;

  cursor:pointer;

  width:18px;

  color: #fff;

  text-align:center;

  opacity: .7;

}

.maxi-chatfb {

  font-size: 24px;

  height:30px;

  line-height:30px;

}

.mini-chatfb {

  font-size: 20px;

  height:25px;

  line-height:25px;

  display: none;

}

.close-chatfb:hover,

.maxi-chatfb:hover,

.mini-chatfb:hover{

  opacity:1;

}

</style> 

   Get code

এবার একি ভাবে </body> এই ট্যাগ টি সার্চ করেন এবং খুজে পেলে এই ট্যাগ এর ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন।

<div class="chat_box" id="chat">

  <div class="chatheader" onclick='showhidechat()'>Like and Message Us 

  </div>

    <div class='close-chatfb' onclick='hidechatfb()'>&#215;</div>

    <div class='maxi-chatfb' id='maxi-chatfb' onclick='showhidechat()'>&amp;square;</div>

    <div class='mini-chatfb' id='mini-chatfb' onclick='showhidechat()'>&#95;</div>

  <div class="pesan_chat">

    <p>Like our facebook page and chat with US</p>

    <script type='text/javascript'>

//<![CDATA[

document.write('<iframe name="f11b13dc65e614" width="250px" height="310px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" data-src="https://www.facebook.com/v2.5/plugins/page.php?adapt_container_width=true&amp;app_id=&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2Fbz-D0tzmBsw.js%3Fversion%3D42%23cb%3Df100e25f3ae8bb8%26domain%3Dbdtipstech.blogspot.com%26origin%3Dhttps%253A%252F%252Fbdtipstech.blogspot.com%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Fbdtipstech%2F&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=false&amp;show_posts=true&amp;small_header=true&amp;tabs=messages&amp;width=250" style="border: none; visibility: visible; width: 250px; height: 310px;" class=""></iframe>');

//]]>

</script>

  </div>

</div>

<script>

//<![CDATA[

function showhidechat() {

  var o = document.getElementById("chat");

  "0px" !== o.style.bottom ? o.style.bottom = "0px" : o.style.bottom = "-400px";

  var o = document.getElementById("maxi-chatfb");

  "none" !== o.style.display ? o.style.display = "none" : o.style.display = "block";

  var o = document.getElementById("mini-chatfb");

  "block" !== o.style.display ? o.style.display = "block" : o.style.display = "none";

};

function hidechatfb() {

  var e = document.getElementById("chat").style.display = "none";

};

function init() {

var vidDefer = document.getElementsByTagName('iframe');

for (var i=0; i<vidDefer.length; i++) {

if(vidDefer[i].getAttribute('data-src')) {

vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));

} } }

window.onload = init;

//]]>

</script> 

Get code

উপর থেকে আপনি bdtipstech.blogspot.com দুবার আছে ওটা মুছে সেখানে আপনার ব্লগ ডোমেইন নাম বসান এবং bdtipstech মুছে সেখানে আপনার ফেসবুক অথবা ফেইসবুক পেইজ User নাম বসান।