
☼ Cách thực hiện:
1. Đầu tiên đăng nhập và vào bố cục blogger
2. Chọn Edit HTML
3. Dán đoạn code dưới lên trước thẻ </head> và save lại
<style type='text/css'>
#gb{
position:fixed;
top:20px;
z-index:+1000;
right:3px;
}
* html #gb{position:relative;}
.gbtab{
margin-top:-1px;
height:96px;
width:26px;
float:left;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSshDKfu1IDEIiuOwpnP96E834deOzQh0LAATm2ea2Yq9eF9yFYpMyEu7aL9RdD1_VkP-MbuOn1Bx-lTnGs36r10MLUe0H9ABV8Jb9sx5gOyggNP1bgYl_CkvFLUGnOGte0wtVDoN9MLUQ/) no-repeat;
}
.gbcontent{
float:left;
border:3px solid #ccccff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4s7xz1wWfO46tO6uXaSS05ULBikuYo_iNCAjNuYb4KAmWMU2tjMuPllhMSNsm5a2yOPWUZIoIoO27Rm-gTYVmAa7J-RhC99aETHrb4RhHy-Yd9xM49d_JMRb1y9AkKRaycBBcu6Jr8Iyz/s512/Screenshot-5.png);
padding:5px 15px 3px 15px;
line-height:1.3em;}
</style>
<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 24-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
#gb{
position:fixed;
top:20px;
z-index:+1000;
right:3px;
}
* html #gb{position:relative;}
.gbtab{
margin-top:-1px;
height:96px;
width:26px;
float:left;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSshDKfu1IDEIiuOwpnP96E834deOzQh0LAATm2ea2Yq9eF9yFYpMyEu7aL9RdD1_VkP-MbuOn1Bx-lTnGs36r10MLUe0H9ABV8Jb9sx5gOyggNP1bgYl_CkvFLUGnOGte0wtVDoN9MLUQ/) no-repeat;
}
.gbcontent{
float:left;
border:3px solid #ccccff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4s7xz1wWfO46tO6uXaSS05ULBikuYo_iNCAjNuYb4KAmWMU2tjMuPllhMSNsm5a2yOPWUZIoIoO27Rm-gTYVmAa7J-RhC99aETHrb4RhHy-Yd9xM49d_JMRb1y9AkKRaycBBcu6Jr8Iyz/s512/Screenshot-5.png);
padding:5px 15px 3px 15px;
line-height:1.3em;}
</style>
<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 24-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
Bạn có thể thay các code màu xanh trên thành hình ảnh nền mà bạn thích hoặc dựa vào mã màu ở đây để chọn màu nền bạn thích.
4. Kế tiếp tạo HTML/Javascript và thêm code bên dưới vào nó
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<strong><span style=" ">Chat with friends</span></strong>
<center> <!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="nvdinh88" src="http://www6.shoutmix.com/?nvdinh88" width="300" height="400" frameborder="0" scrolling="auto"><a href="http://www6.shoutmix.com/?nvdinh88">View shoutbox</a></iframe><br /><!-- End ShoutMix --> </center>
<div style="text-align: right;"><span style="float:left; ">Chat on TRAIDATMUI.COM</span>
<a href="javascript:showHideGB()">[Ẩn Chatbox]
</a></div></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (24-gb.offsetWidth).toString() + "px";
</script>
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<strong><span style=" ">Chat with friends</span></strong>
<center> <!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="nvdinh88" src="http://www6.shoutmix.com/?nvdinh88" width="300" height="400" frameborder="0" scrolling="auto"><a href="http://www6.shoutmix.com/?nvdinh88">View shoutbox</a></iframe><br /><!-- End ShoutMix --> </center>
<div style="text-align: right;"><span style="float:left; ">Chat on TRAIDATMUI.COM</span>
<a href="javascript:showHideGB()">[Ẩn Chatbox]
</a></div></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (24-gb.offsetWidth).toString() + "px";
</script>
☼ Tùy chỉnh: bạn hãy thay đoạn code màu đỏ ở trên thành code chat của bạn, ở đây minh sử dụng dịch vụ shoutmix, để tạo shoutbox bạn có thể vào đây và điền đầy đủ thông tin để tạo cho mình một shoutbox và thay thế code màu đỏ ở trên.
- Hãy thay đổi những dòng chữ in đậm trên thành dòng chữ của bạn hoặc bạn cũng có thể xoa nó đi.
Chúc bạn thành công
Nguồn: TRAIDATMUI.com
0 nhận xét:
Đăng nhận xét