Tiện Ích : "Topbar" Trượt Dọc Cho Blogspot

™» CGC  Blog «™  Trước đây mình đã giới thiệu đến các bạn thủ thuật "Tạo banner chạy dọc hai bên của blog". Tương tự hôm nay mình chia sẻ cùng các bạn cách tạo một nội dung text chạy dọc bên blog khi bạn cuộn chuột. Thật ra, ở đây bạn cũng có thể dùng nó cho việc hiển thị banner, bạn chỉ việc chỉnh sửa tí xíu là được. Khác thủ thuật banner chạy dọc ở đây có thêm công cụ tắt (close) khi bạn không thích thấy nội dụng đó nữa. Để thấy rỏ hơn bạn xem demo bên dưới, ở đây mình sẽ hướng dẫn bạn chèn ngay vào HTML/Javascript để đơn giản.

» Bắt đầu thủ thuật
1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn thêm tiện ích (Add a Gadget)
4. Thêm 1 HTML/Javascript và chèn vào code bên dưới

<style type="text/css">
#topbar{
position:absolute;
border: 1px solid #ccc; /* màu đường viền*/
padding: 4px;
color:#000;
background-color: #fff; /* màu nền phần chứa nội dung*/
width: 420px; /* độ rộng của tiện ích*/
visibility: hidden;
z-index: 100;
}
#topbar a{color:#0000ff; /* màu link*/
}
#topbar a:hover{color:#ff0033;/* màu link khi rê chuột*/
}
#close {
float:right;
margin-top:-3px;
margin-right:-8px;
padding:0px 0px 0px 4px;
height:12px;
width:14px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Pi92FXaggb7Ky4LkzAqcRLtQRf3L8ZPx_T-ljdc0Jcjsd4kgXMIeVJLJT8tZZCkIGLLaMBY0UxOujcoq3SMa5yX4aMKvLYqzVjRa_vY7gQSICLzWHdCWpQMpL9VJdwFeVtV41YWpHQ-S/) no-repeat right;}
</style>


<script type="text/javascript">
var persistclose=0
var startX = 30 //vị trí của tiện ích theo chiều ngang, nếu bạn muốn nó nằm bên phải thì tăng số này lên
var startY = 5 //vị trí của tiện ích theo chiều doc, đây là cách trên
var verticalpos="fromtop" //nếu muốn tiện ích nằm ở cuối blog bạn thay fromtop thành frombottom
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))}}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}return el;
}window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

<div id="topbar">
<a class="close" id="close" alt="Đóng cửa sổ này" title="Đóng cửa sổ này" href="#" onclick="closebar(); return false"></a>

NỘI DUNG CỦA BẠN Ở ĐÂY

</div>

Bạn hãy dựa vào các phần hướng dẫn trong code để tùy chỉnh cho phù hợp và đặt nội dung tại dòng màu đỏ ở trên.

5. Cuối cùng save tiện ích lại

Chúc các bạn thành công !Nguồn : traidatmui.com
Tổng hợp : Hội Thánh Cây Giang 
Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!