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???.

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

CODE:

<style type='text/css'>
#gb{
position:fixed;
bottom:2px;
z-index:+1000;
right:2px;
}
* 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/AVvXsEilwE66F7tqlbS-zpYALsVtZxWoT2fTjDF8hnU8rgmuQT_6Ay47sIy17e0pcN7FcK1gKvEIutSZ8dC_c7wunaYUfDBlwnAQqJAZmMHuBlnFYkg2jHup4qazaBjiwgiVGkmhnb-djZt29do/s1600/www.loogix.com_9845028.gif) no-repeat;
}
.gbcontent{
float:left;
border:1px solid #FFFFFF;
background:  #FFFFFF url();
padding:1px 1px 1px 1px;
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>

 
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

Các bạn có thể thay đổi màu và file ảnh.

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:

CODE:

<div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <strong><a href="javascript:showHideGB()"> Đóng [X]</a> | <span style=" "> <a href="http://www.topeleven.com/play/" target="_blank"> Games</a> | <a href="http://whos.amung.us/stats/readers/ufabb3wqo9gr/" target="_blank"> Xem</a> | <a href="http://www.statscrop.com/www/giapqb.blogspot.com" target="_blank"> Top</a> | <a href="http://translate.google.com.vn/" target="_blank"> Google dịch</a> | <a href="http://giapqb.blogspot.com/2013/02/00001.html" target="_blank"> [PM]</a> </span></strong> <center>

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

</center>

<div style="text-align: right;">
</div></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (24-gb.offsetWidth).toString() + "px";
</script>

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

Browse More Articles

Tweet

Written by Anonymous

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.