Wednesday, May 18, 2016

[Th? Thu?t] T?o Sticky cho nhi?u Widget c?a blogspot



Th�ng thuong khi c�c b?n k�o thanh cu?n xu?ng d? xem ph?n du?i c?a blog th� c�c ph?n tr�n n� s? b? ?n di. V?y n?u mu?n hi?n th? m?t ti?n �ch c� ID b?t k? khi b?n k�o chu?t xu?ng du?i blog d?ng Sticky th� ph?i l�m th? n�o.

B�i vi?t n�y s? hu?ng d?n c�c b?n l�m di?u d� t?o Sticky cho m?t widget c� Id b?t k?, B?n c� th? �p d?ng n� cho c�c widget ch?a c�c n�t like c?a c�c m?ng x� h?i hay h?p dang k� nh?n tin c?a b?n, ho?c don gi?n hon l� cho m?t menu, m?t banner qu?ng c�o m� b?n mu?n. V?i c�ch t?o Sticky n�y cho d� b?n k�o chu?t d?n v? tr� n�o di n?a th� ti?n �ch c?a b?n v?n lu�n xu?t hi?n t?i v? tr� m� b?n mu?n, trong b�i vi?t n�y l� tr�n d?u c?a blog.

B?n c� th? xem demo ngay tr�n blog c?a m�nh h�y k�o chu?t xu?ng du?i ch�n trang v� ch� � thanh menu ? tr�n d?u blog m�nh cung di chuy?n theo v� kh�ng h? bi?n m?t nha.


� Bu?c 1: X�c d?nh ID c?a Wdget ti?n �ch c?n t?o hi?u ?ng Sticky
� Bu?c 2: Th�m d? t?o hi?u ?ng Sticky cho widget m� b?n mu?n

Sau khi x�c d?nh du?c Id c?a ti?n �ch c?n t?o hi?u ?ng Sticky b?n ti?p t?c th?c hi?n c�c bu?c sau d? d�n Sticky cho ti?n �ch d� nha:

2.1- �ang nh?p v�o blog c?a b?n.

2.2. V�o ph?n M?u (Template) => Ch?n Ch?nh s?a HTML (Edit HTML)

2.3- Ch�n do?n b�n du?i v�o tru?c th? </hd> .

<script>
// [Th? Thu?t] T?o Sticky cho nhi?u Widget c?a blogspot
// http://choiblogs.blogspot.com/2013/10/thu-thuat-tao-sticky-cho-nhieu-widget.html
// Free to use or share, but plse keep this notice intact.
//<![ATA[
bs_makeSticky("HTML10");
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.crteElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

� T�y ch?nh:

Thay HTML10 th�nh Id widget m� b?n mu?n hi?n th? trong ch? d? Sticky. Trong tru?ng h?p n�y id c?a m�nh l� HTML10 b?n h�y thay d?i l?i n� cho ph� h?p v?i ti?n �ch m� b?n mu?n �p d?ng nha;
B?n cung c� th? t�y ch?nh l?i m�u sac, c? ch? v� c? tr� d�nh banner b?ng c�ch thay d?i c�c thu?c t�nh n?m trong class .bs_sticking.

2.4- Luu m?u l?i v� v�o blog ki?m tra l?i xem ti?n �ch m� b?n v?a �p d?ng c� hi?n th? khi k�o chu?t xu?ng ch�n c?a blog kh�ng nha.
NGU?N:
http://namkna.blogspot.com/2013/10/tao-sticky-cho-nhieu-widget-cua-blogspot.html
v�
http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html

No comments:

Post a Comment