Code tạo Smart Chatbox ẩn hiện cho Blogger

Show Hide Smart Chatbox for Blogger

Iris Tips đã giới thiệu cho các bạn khá nhiều Chatbox đến từ các NPH khác nhau, hôm nay sẽ là SmartChatbox kèm theo 1 chút Js và CSS sẽ làm cho chatbox ẩn hiện đẹp mắt trên blog của bạn.

Cách thực hiện

1Vào SmartChatbox và tạo cho mình một tài khoản.

2Tiếp theo bạn hãy tùy chỉnh cho chatbox của mình tại trang Setting như kích thước, website, hình nền, set tài khoản Admin, Mod... và cuối cùng là nhấn Generate code of my smart chatbox >> Finish

3Bạn sẽ nhận được một đoạn code, ví dụ như của Iris Tips

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

4Copy và dán URL trong đoạn script trên vào thanh địa chỉ của trình duyệt bạn sẽ thu được đoạn code như hình bên dưới.

5Vào Blogger >> Mẫu >> Chỉnh sửa HTML và dán đoạn code bên dưới vào trước thẻ </body>

<div class='chatbox' id='chatbox'>
<script>
//<![CDATA[

Dán đoạn code bạn vừa thu được ở bước 4 vào đây

//]]>
</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>

6Cuối cùng là thêm CSS cho Chatbox bằng cách dán đoạn code dưới đây vào trước thẻ ]]></b:skin>

#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)}
}
@keyframes hvr-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}
}

7Lưu template lại và bạn sẽ thấy chatbox nằm bên phía dưới góc trái màn hình của website bạn.

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

x

Chat

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm