Thursday, March 1, 2012
Tạo hộp tiện ích ẩn cho blogspot
Các bạn bấm vào XEM THỬ phía dưới để thấy rõ hơn nha.
Để 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.
2/ 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/AVvXsEgwS3O3KQUlsM_pgjdEk99-xN5ZgIapAO5GMjQ-j3ihnm-_PlPzb8LfbwbfHtY6OB9J5FyTNVWvWeyhjvDee6ZgNGu3TOAHs9w4hHhTQ_Er3H4pwGtSwLx6Uk2IdLvE8tzW1dJl64kw-kE/s1600/www.loogix.com_9845028.gif) no-repeat;}.gbcontent{float:left;border:3px solid #FFFFFF;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjf89wGSq2vTfyKdC8UIwQhW8UuGA3O_OwcJ508Wxu5E6quDCW5fyakKaLC510bMgX2SsmBfQALrTCMXyYo8TCkX7o0QRbEaETArT9uAvcUQqYlb4xAPYki7MPHrZBByd_QGlQbNxBzHg/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("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>
Chú ý: 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!!!
Comments[ 0 ]
Post a Comment