quinta-feira, 21 de julho de 2016

Chat Box Show Hide Button Popup Mesenger

chat-box-mensager-facebook-popup-mesenger


Hoje vamos mostrar um tutorial para colocar o widget mesenger no seu Blogger criando um efeito pop up by kompiajaib esse tutorial é muito util uma vez que  isso vai criar uma conexão e interatividade com os visitantes para adicionar isso a seu Blogger siga os passos.


Adicionando botão para chat pop up mesenger no Blogger 

Faça login no Blogger então va em menu modelo editar HTML/JavaScript 
com as teclas combinadas CTRL+F busque por </head> logo acima disso copie e cole o seguinte código.

<style>
.chat_box {
  background: #fff;
  width: 250px;
  height: 160px;
  position: fixed;
  bottom: -125px;
  left: 60px;
  transition: all .3s;
  border: 1px solid transparent;
  border-radius: 3px 3px 0 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
  box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
  overflow: hidden;
  z-index:1000000;
}

.pesan_chat {
  text-align: center;
  text-decoration: none;
  display: block;
  height: 100%;
  padding: 5px 5px 15px;
}

.chat_button {
  background: #4d90fe;
  border: 0;
  margin: 0 auto;
  padding: 5px 18px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  display: inline-block;
  border-radius: 3px;
  transition: all .3s;
  text-decoration: none;
}

.chat_button:hover {
  background: #365899;
}

.chatheader {
  margin: 0 auto;
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  font-size: 18px;
  font-weight: 700;
  color: #616161;
  text-align: center;
  display: block;
  cursor: pointer;
}

.pesan_chat p {
  color: #616161;
  font-size: 16px;
  margin: 10px;
}
</style>

Agora procure por </body> e logo acima disso copie e cole o código

<div class="chat_box" id="chat">
  <div class="chatheader" onclick='showhidechat()'>Chat Room Kompi Ajaib
  </div>
  <div class="pesan_chat">
    <p>Hai! Sahabat Kompi bisa chat bareng di sini dengan Messenger,
      <br/> Terima kasih.</p>
    <a href="javascript: void(0)" onclick="popup('https://m.me/mybloggerseo');showhidechat()" title="Chat on Messenger">
      <span class="chat_button">Chat on Messenger</span></a>
  </div>
</div>
<script>
//<![CDATA[
function showhidechat(){var o=document.getElementById("chat");"0px"!==o.style.bottom?o.style.bottom="0px":o.style.bottom="-125px"}function popup(o){var t=650,n=400,e=(screen.width-t)/2,i=(screen.height-n)/2,s="width="+t+", height="+n;return s+=", top="+i+", left="+e,s+=", directories=no",s+=", location=no",s+=", menubar=no",s+=", resizable=no",s+=", scrollbars=no",s+=", status=no",s+=", toolbar=no",newwin=window.open(o,"windowname5",s),window.focus&&newwin.focus(),!1};
//]]>
</script>

Altere o campo em amarelo pelo usuario do facebook ou sua fanpage salve e pronto.





NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner