Trang chủ > Thủ thuật blog > Tạo sidebar trượt dọc theo blog

Tạo sidebar trượt dọc theo blog

Trước mình đã giới thiệu cho các bạn cách tạo banner trượt dọc 2 bên blog,hôm nay mình giới thiệu tiếp cho các bạn cách tạo một sidebar trượt dọc theo blog để làm cho blog bạn trông chuyên nghiệp hơn.
Live Demo: tại đây

Hình ảnh minh họa

☼ Các bước thực hiện:
1. Trước tiên tạo 1 widget HTML/Javascript và dán code bên dưới vào và save lại


<!–
/* Script by: http://www.jtricks.com
* Version: 20071210
* Latest version:
* http://www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = ‘floatdiv’;
var floatingMenu =
{
targetX: -250,
targetY: 10,
hasInner: typeof(window.innerWidth) == ‘number’,
hasElement: document.documentElement
&& document.documentElement.clientWidth,
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
if (document.layers)
{
floatingMenu.menu.left = floatingMenu.nextX;
floatingMenu.menu.top = floatingMenu.nextY;
}
else
{
floatingMenu.menu.style.left = floatingMenu.nextX + ‘px’;
floatingMenu.menu.style.top = floatingMenu.nextY + ‘px’;
}}
floatingMenu.computeShifts = function ()
{
var de = document.documentElement;
floatingMenu.shiftX =
floatingMenu.hasInner
? pageXOffset
: floatingMenu.hasElement
? de.scrollLeft
: document.body.scrollLeft;
if (floatingMenu.targetX < 0)
{
if (floatingMenu.hasElement && floatingMenu.hasInner)
{
// Handle Opera 8 problems
floatingMenu.shiftX +=
de.clientWidth > window.innerWidth
? window.innerWidth
: de.clientWidth
}
else
{
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: floatingMenu.hasInner
? window.innerWidth
: document.body.clientWidth;
}}
floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0)
{
if (floatingMenu.hasElement && floatingMenu.hasInner)
{
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else
{
floatingMenu.shiftY +=
floatingMenu.hasElement
? document.documentElement.clientHeight
: floatingMenu.hasInner
? window.innerHeight
: document.body.clientHeight;
}}}
floatingMenu.doFloat = function()
{
var stepX, stepY;

floatingMenu.computeShifts();

stepX = (floatingMenu.shiftX +
floatingMenu.targetX – floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5)
{
stepX = floatingMenu.shiftX +
floatingMenu.targetX – floatingMenu.nextX;
}
stepY = (floatingMenu.shiftY +
floatingMenu.targetY – floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5)
{
stepY = floatingMenu.shiftY +
floatingMenu.targetY – floatingMenu.nextY;
}
if (Math.abs(stepX) > 0
Math.abs(stepY) > 0)
{
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout(‘floatingMenu.doFloat()’, 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != ‘function’
typeof element[listener + ‘_num’] == ‘undefined’)
{
element[listener + ‘_num’] = 0;
if (typeof element[listener] == ‘function’)
{
element[listener + 0] = element[listener];
element[listener + ‘_num’]++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = element[listener + ‘_num’] -1; i >= 0; i–)
{
if(element[listener + i](e) == false)
r = false;
}
return r;
}
}
//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + ‘_num’]] = handler;
element[listener + ‘_num’]++;
};
floatingMenu.init = function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.shiftX +
floatingMenu.targetX;
floatingMenu.nextY = floatingMenu.shiftY +
floatingMenu.targetY;
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, ‘onload’, floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window, ‘onload’,
floatingMenu.initSecondary);
}
//–>


2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đoạn code bên dưới vào sau thẻ
:

.li{
margin:0px 5px 7px 31px;
padding:2px;
list-style-type:none;
display:block;
width:200px;
}
#sideBar{
position: absolute;
width: auto;
height: 585px;
top: 0px;
right:-20px;
background-image:url(http://baliwww.com/images/backgroundsidebar.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
overflow:hidden !important;
}
#sideBarContentsInner{
width:150px;
}

<script type="text/javascript" src="http://singleboy010.110mb.com/Myfile/Javascript/mootools.js“>
<script type="text/javascript" src="http://singleboy010.110mb.com/Myfile/Javascript/sidebartruot.js“>

http://i342.photobucket.com/albums/o433/bkprobk/slide-button.gif” alt=”sideBar” title=”sideBar”/>



☼ Chú ý : Nội dung mà bạn muốn hiển thị trong slidebar này bạn phải đặt nó vào trong thẻ Nội dung nếu muốn phân thành các phần khác nhau thì tạo nhiều thẻ Nội dungkhác nhau rồi dán nội dung cần hiển thị vào trong thẻ. Hãy save ảnh trên về và upload lên trang chủ của bạn để lấy linnk hoặc giữ nguyên cũng được http://i342.photobucket.com/albums/o433/bkprobk/slide-button.gif

5.Cuối cùng save template lại là xong.

Chuyên mục:Thủ thuật blog
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: