TẠO HỘP TIỆN ÍCH ẨN CHO BLOGSPOT

Một Blog đẹp thì không thể thiếu các tiện ích như: đồng hồ, lịch, menu,  trình nghe nhạc, xem phim, xem báo, Flash.... Nhưng nếu gắn nhiều tiện ích thì sẽ chiếm khá nhiều không gian của Blog, vì vậy với thủ thuật này, các bạn sẽ tạo được một hộp tiện ích ẩn nằm ở phía tay phải của Blog, khi nào muốn sử dụng, các bạn chỉ cần bấm vào nút "Click Here" để gọi nó ra, không muốn xem nữa thì bấm nút "Đóng lại" rất là tiện lợi phải không các bạn???.

Các bạn bấm vào XEM THỬ phía dưới để thấy rõ hơn nha.

XEM THỬ

Để làm được điều này, các bạn phải làm tuần tự các bước sau:

1/ Đăng nhập vào Blog > Chọn Thiết kế > Chọn chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh </head> và Enter

Sau đó dán toàn bộ code phía dưới vào trên dòng lệnh </head> và bấm Lưu mẫu

<style type='text/css'>
#gb{
position:fixed;
top:20px;
z-index:+1000;
right:3px;
}
* html #gb{position:relative;}

.gbtab{
margin-top:-1px;
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7tLExZBd5ST1QuZv8IcgDnQE9I9Yywm3YlJeOLyUwKGtrk17RclQuKZQ0vv0ylNTvS7tK8PCKFIRAzfdipoHTaTvUq8yOp6eg7lBMCB5zzl8BNECnQCpn5_SONIu0iKG6qvEe-azvd8/s1600/www.loogix.com_9845028.gif) no-repeat;
}
.gbcontent{
float:left;
border:3px solid #FFFFFF;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTEWdrnb9pl64jpAFiVkoAKQMlchKILaOdJpOMlScWz5J79vAAoUZRG3yCrdE3kmQwxERWA2KbVeb_VZx4M_gKsQwCn3t9B2OjV34_tcI5fHz2OX5N6uTgh8Zg_S3vSTpM8gaWx_2V1yo/s1600/www.loogix.com_9845079.gif);
padding:5px 15px 3px 15px;
line-height:1.3em;}
</style>

<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById(&quot;gb&quot;);
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(&quot;gb&quot;);
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>

Các bạn có thể thay đổi dòng lệnh màu đỏ (đây là file ảnh của chữ CLICK HERE, các bạn có thể làm chữ khác mà mình muốn với kích thước tối đa là 30x150)

Thay đổi dòng lệnh màu xanh (đây là file ảnh của khung ngoài, các bạn có thể làm file ảnh khác với kích thước 30x512)

2/ Bây giờ, bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML/Javacritp rồi dán code phía dưới vào:

<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<strong><span style=" ">Tên hiển thị trên hộp</span></strong>

<center>

NỘI DUNG TIỆN ÍCH BẠN ĐẶT TẠI ĐÂY

</center>
<div style="text-align: right;"><span style="float:left; ">Tên hiển thị phía dưới hộp</span>
<a href="javascript:showHideGB()">[Đóng lại]
</a></div></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (24-gb.offsetWidth).toString() + "px";
</script>

 Bạn đặt nội dung tiện ích vào chỗ chú thích trên code (nên nhớ phải là code HTML nha)

 Cuối cùng bấm Lưu và trở lại Blog xem kết quả

Chúc các bạn thành công