TẠO NÚT LÊN, XUỐNG, TỰ ĐỘNG CUỘN TRANG CHO BLOG
13/8/13
Theo yêu cầu của một số bạn, CCK chia sẻ với các bạn cách tạo tiện ích: lên, xuống, tự động cuộn trang cho blog. Thủ thuật nhỏ này nhằm giúp cho người truy cập blog đỡ vất vả kéo chuột, nhất là khi truy cập bằng laptop với chuột ảo.
Tiện ích này có thể tạo bằng hai cách sau:
Cách thứ nhất:
- Chèn đoạn mã trong khung dưới đây vào bên dưới thẻ: ]]></b:skin> .
<!-- BAT DAU LEN XUONG --> <style type='text/css'> #backscroll { width:30px; line-height:50px; position:fixed; right:5px; top:350px; } </style> <script language='javascript'> /* <![CDATA[ */ suspendcode="<div id='backscroll'><a onclick='javascript:amutop();return false;' href='#' title='LÊN ĐẦU'><img border=0 src=\"https://lh5.googleusercontent.com/-ObCGpcQDQDk/T35aQPPWQMI/AAAAAAAAAPA/8iDyiJ07n3Y/s48/top.gif\" width=\"30\"></a><br><a onclick='javascript:history.back();return false;' href='#' title='TRỞ LẠI TRANG VỪA XEM'><img border=0 src=\"https://lh4.googleusercontent.com/-HQASFJRYdd0/T35aO4vWfrI/AAAAAAAAAOo/WtpQMguYPLs/s48/back.gif\" width=\"30\"></a><br><a onclick='javascript:sc();return false;' href='#' title='DỪNG CUỘN'><img border=0 src=\"https://lh5.googleusercontent.com/-mZIfXp3qmSM/T35aP6jrhtI/AAAAAAAAAO0/Dda_pbetGyE/s48/ting.gif\" width=\"30\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='TỰ ĐỘNG CUỘN'><img border=0 src=\"https://lh4.googleusercontent.com/-HW6-lwAajuU/T35aO55KD8I/AAAAAAAAAOs/uWG9m072otc/s48/gun.gif\" width=\"30\"></a><br><a onclick='javascript:amubutton();return false;' href='#' title='XUỐNG CHÂN'><img border=0 src=\"https://lh4.googleusercontent.com/-i00crAzVJK0/T35aO5nmNdI/AAAAAAAAAOw/t0BCAeUQZbY/s48/end.gif\" width=\"30\"></a></div>" document.write(suspendcode);var currentpos,timer;function initialize(){timer=setInterval("scrollwindow ()",30)}function sc(){clearInterval(timer)}function scrollwindow(){currentpos=document.documentElement.scrollTop||document.body.scrollTop;window.scrollTo(0,++currentpos)}function amutop(){window.scrollTo(0,0);clearInterval(timer)}function amubutton(){window.scrollTo(0,8E4);clearInterval(timer)};/* ]]> */</script> <!-- KET THUC LEN XUONG -->
(Đoạn code trên CCK sưu tầm, tổng hợp từ internet và có chỉnh sửa lại đôi chút cho phù hợp.)
Nếu chưa biết cách tìm thẻ ]]></b:skin>, mời bạn tham khảo TẠI ĐÂY- Bấm "Lưu mẫu" và trở lại trang chủ xem kết quả.
Cách thứ hai:
- Vào "Bố cục" thêm một tiện ích HTML/Javascript ở một vị trí bất kỳ, để trống tiêu đề và dán toàn bộ đoạn code ở khung trên vào phần nội dung. Nếu chưa biết cách thêm tiện ích
HTML/Javascript, mời bạn tham khảo và thực hiện tương tự như phần cuối BÀI VIẾT NÀY.
- Bấm "Lưu" và "Lưu sắp xếp" để hoàn tất rồi trở lại trang chủ xem kết quả.
Lưu ý: Sau khi dán mã, tìm ở cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
Chúc các bạn thành công!
Nguyễn Văn Cường (Caocongkien)
23 nhận xét :
ĐỀ NGHỊ:
Không chèn các đường link có tính chất spam, quảng cáo khi bình luận!
Tất cả những bình luận có chèn link nhằm spam, quảng cáo sẽ bị Admin báo cáo lên Google - do đó sẽ bị xóa và chặn vĩnh viễn.
Những bình luận, thắc mắc - nếu viết tắt bừa bãi, viết bằng kiểu chữ "teen",... sẽ không được trả lời và có thể bị xóa.
Rất mong quý vị thấu hiểu và thông cảm!
Xin cảm ơn!
Cảm ơn nhiều Cường nhé!Nhà anh có làm được nút lên xuống,chưa đầy đủ,nay thực hiện theo hướng dẫn của em hoàn chỉnh rồi.Chúc ngày mới vui khỏe,công việc đạt kết quả tốt!
Trả lờiXóaCảm ơn anh đã ghé thăm! Chúc anh buổi trưa như ý!
Xóađể cháu làm thử xem sao. À, chú cho cháu hỏi với, cách thay trực tiếp trong temp và thay bằng tiện ích java thì có khác nhau ở đâu? cái nào ưu điểm hơn? riêng với người mới mày mò như cháu thì thấy cái javacript tiện hơn, dễ làm dễ xóa, dễ chỉnh sửa, cơ mà cháu ko rõ liệu có chỉnh dc "vạn năng" ko? hay chỉ chỉnh dc một số thứ?
Trả lờiXóaTạo bằng cách thêm tiện ích javacript dễ hơn là đúng. Kết quả cuối cùng vẫn như nhau thôi.
XóaChúc thành công!
cháu thành công rồi, cảm ơn chú! Nếu chú có thể thì cập nhật thêm một số mẫu cho moingười chọn lựa được ko ạ? hì! khi nào chú rỗi.
Trả lờiXóaMẫu gì vậy? Blog à? Mình vãn làm đó thôi, nhưng hồi này mình bận bảo trì web cho các trường học.
XóaKo chú ơi, ko phải mẫu blog, mà là mẫu của cái cuộn trang này, cháu thấy trang nào cũng có cái cuộn giống nhau thì ko dc đẹp cho lắm, có trang ưa lòe loẹt, có trang lại thích đơn sơ, có trang lại thích... độc. Nên nếu có nhiều mẫu một chút cho mọi người lựa chọn cũng là một hướng phát triển tích cực đấy ạ.
Trả lờiXóaCái đó nhiều người viết lắm rồi, thú thật mình chia sẻ bài này là theo yêu cầu của mấy người bạn.
XóaChú ơi ! chú có skype không ? Cháu có 1 số thắc mắc về tạo menu ngang sổ xuống muốn nhờ chú giúp . Skype của cháu : vutatthanh86 Hoặc
Trả lờiXóaYahoo : vutatthanh_hn@yahoo.com
Cảm ơn chú nhiều . Chúc chú và gđ sk , hp ,thành đạt .
Cảm ơn lời chúc của bạn!
XóaCái này tốt nhất là liên hệ qua email sẽ chi tiết hơn! Nếu cần mình sẽ viết bài chia sẻ!
Email của mình: caocongkien68@gmail.com.
Xin chào Bạn ! blog của mình trước đây học trên mạng và đã làm được nút lên và xuống nhưng đến nay thì chỉ có lên còn bấm xuống không tác dụng ...Nay may quá được bạn hướng dẫn ...xin phép cho mình xin code về để làm nhé ...chúc bạn luôn vui khỏe ...thành công ...xin cám ơn
Trả lờiXóaCảm ơn bạn đã đọc bài viết!
XóaBạn áp dụng thành công thì mình cũng rất vui, mình viết ra cũng là để chia sẻ với mọi người thôi.
Chúc bạn luôn vui!
em lam y chang loi hướng dẫn sao không được :D hix
Trả lờiXóaBạn xem kỹ lại, rất có thể do bạn nhầm lẫn đâu đó thôi, chứ cái này áp dụng rất dễ mà.
XóaĐơn giản nhất là :
Vào "Bố cục" thêm một tiện ích HTML/Javascript ở một vị trí bất kỳ, để trống tiêu đề và dán toàn bộ đoạn code vào phần nội dung.
Bấm "Lưu" và "Lưu sắp xếp" là được.
Chúc thành công!
Bác Cường cho em hỏi chút. Em có làm theo một số hướng dẫn chèn khung comment fb vào blogspot.
Trả lờiXóaVà đang sử dụng template có nền đen.
Bác có thể hướng dẫn các đổi màu text comt của facebook thành màu khác đc không? Mặc định màu đen ko đọc đc!
Cám ơn bác trước !
Muốn thực hiện được ý định này, cần phải chèn vào template một số đoạn code cho phép tạo màu nền và màu chữ riêng cho phần comment của FB.
XóaCông việc khá phức tạp, viết ra rất dài dòng,...
Để khi nào rảnh CCK viết bài chia sẻ sau.
Ở blog của bạn, tốt nhất là bạn chuyển màu nền sang màu khác. Theo suy nghĩ chủ quan của CCK thì màu nền đen không thân thiện lắm với Blogspot. Màu nền đen trong bài viết và phần comment làm cho người đọc thấy mỏi mắt, khó chịu,...
Chúc thành công!
Vâng cám ơn đóng góp của bác. Nhưng blog của em chủ yếu là show video do em thiết kế. Em thích màu đen vì nó tập trung người xme vào video và màu sắc không bị phân tán !
Trả lờiXóaBác ghé qua vài giây xem thế nào http://weloveproshow.blogspot.com/
Em làm blog chủ yêu để chia sẻ video của em đến với ng xem thôi chứ ko dám bàn tán thủ thuật blog gì cả.
Nếu code thay đổi màu chữ khó vậy. Bác có thể hướng dẫn đổi bg của template em đang xài không.
Em đọc các hướng dẫn của các bạn tìm code body.background hoặc body{background mà vẫn ko thấy cái link back tương tự như họ nói!
Có gì bác hướng dẫn giúp!
Thanks bác nhiều!
Thay đổi màu chữ và màu nền của blog thì không khó, nhưng thay đổi mãu chữ và màu nên của tiện ích comment FB tích hợp vào blog thì khá khó vì cái này là của FB cung cấp chứ không phải của Google.
XóaĐể tìm nhanh các đoạn mã trong template, mời bạn xem bài này:
http://caocongkien.blogspot.com/2013/08/cach-chinh-sua-template-blogspot.html
Mình đã xem mã nguồn blog của bạn
Màu nền blog của bạn có thể ở trong hai đoạn mã sau đây:
background: #000000 url(//www.blogblog.com/1kt/awesomeinc/body_background_dark.png) repeat scroll top left;
}
background: transparent url(//www.blogblog.com/1kt/awesomeinc/body_gradient_dark.png) repeat-x scroll top left;
_background-image: none;
}
Bnaj nhớ sao lưu template lại trước khi chỉnh sửa để đề phòng sự cố. Bạn xem cách sao lưu và thay thế template tại bài viết này:
http://caocongkien.blogspot.com/2013/06/cach-sao-luu-va-thay-template-blogspot.html
Chào bạn CCK.Mình qua nhà thăm bạn .Mình đã chôm code lên xuống tự động rồi bạn ơi.Chắc là bạn có qua nhà mình bạn thấy rồi đó hihi...Cảm ơn thật nhiều bạn nhé.....Sao bạn không một lần vào nhà mình chơi vậy.....Nhà bạn phải nói là QUÁ ĐẦY ĐỦ ....chúc bạn ngon giấc nhé.
Trả lờiXóaCảm ơn bạn! Bạn áp dụng thành công mình rất vui!
XóaChúc bạn luôn an lành!
Em chào anh Cường. Em rất thích cái tiện ích tạo nút lên xuống và tự động cuộn trang, em đã làm thử theo cách 1 nhưng không được. Anh giúp em với !?
Trả lờiXóaChào anh Cường! Latuan lần đầu ghé nhà. Cảm ơn anh đã chia sẻ những bài viết rất bổ ích và giá trị!
Trả lờiXóaChúc anh luôn vui khỏe, thành công và hăng say với công việc!
cảm ơn anh nhé !
Trả lờiXóa