Hiển thị các bài đăng có nhãn Javascript Blogspot. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Javascript Blogspot. Hiển thị tất cả bài đăng

27/02/2019

Code Sidebar trượt dọc theo màn hình cho Blogspot

Khi thiết kế 1 trang Blogspot nếu phần Sidebar (Cột bên) ngắn hơn phần Main-Wrapper phần nội dung thì làm cho giao diện Blogspot mất cân đối khi chuột xuống. 

Hơn nữa nếu bạn đặt quảng cáo Google Adsense tại Sidebar thì nên trượt theo trang theo để người dùng dễ nhấp chuột.

Đoạn code sau đây sẽ giúp phần Sidebar sẽ trượt theo phần Main-Wapper giúp người dùng luôn xem được nội dung của cả 2 cột.

09/08/2018

Javascrip thêm class và remove khi cuộn tới id nào đó (for blogspot)

Giả sử bạn muốn Menu của bạn trượt dọc theo màn hình nhưng dừng cuộn tới ID/class nào đó thì ta sẽ ứng dụng như sau.

Thủ thuật dưới đây sẽ thêm class nhưng sẽ remove (xóa class) khi cuộn tới class nào đó tính từ đầu màn hình

Javascript Scroll to add class

18/03/2018

Click to Add class, Click again remove class (Click để thêm class và click remove class)

Một tính năng Javascript quen thuộc mà mình đã chia sẻ và hướng dẫn lần trước. Nhưng trong lần này có thêm phần click thêm 1 lần nữa để remove (Xóa) class/id vừa thêm.

Click to Add class, Click again remove class thường ứng dụng để làm Menu Mobile (Menu trên di động). Click một lần để show các Sub Menu (Menu con cấp 2, 3) và click vấn nữa để ẩn đi.

Cách ứng dụng:

1. Xem web với chế độ di động (Responsive <600px)

  1. Truy cập https://www.tinhdauonline.com.vn.
  2. Chuột phải -> Kiểm tra phần tử
  3. Xem website trên Giao diện mobile với kích thước Resposive width từ 600px trở xuống.

Xem cách hoạt động code trên giao diện Responsive

17/03/2018

Javascript Click to add class (Click để thêm class) cho blogger và ứng dụng

Bài viết này nằm trong Serie Javascript Blogger.
Trong các bài viết trước đây mình đã chia sẻ một số javascript
Hôm nay mình hướng dẫn một Javascript mới là click thể thêm class/id và cách mình ứng dụng nó vào lập trình web.

Cách ứng dụng Click to add class

Click to add class áp dụng cho trang web tinhdauonline.com.vn

16/03/2018

Javascript Scroll to add class (Cuộn trang thêm class) cho blogspot

Để mô tả cách hoạt động Javascript Scroll to add class hoạt động như sau. 

Khi bạn cuộn web đến một cao nhất định được tính bằng px. Khi đó javascript sẽ tự thêm thuộc tính class='tên class'

Do vậy bạn chỉ cần viết thêm css cho class này thì sẽ thực hiện được một chức năng nào đó.


Javascript Scroll to add class
Javascript Scroll to add class

15/03/2018

Javascript click change text cho blogspot (Đổi chữ khi click)

Khi click chuột vào 1 id hoặc class chứa text thì text (chữ) sẽ chuyển thành text khác.
Thủ thuật click change text này được mình sử dụng cho trang web https://www.tinhdauonline.com.vn và chỉ sử dụng một đoạn javascript nhỏ!

Được minh họa như sau (Click change text)

Javascript click change text cho blogspot (Đổi chữ khi click)
Hiện text ĐÃ THÊM +1 để xác nhận thao tác click thành công!

05/03/2018

Tạo Banner quảng cáo có nút tắt (x) cho blogspot

Việc tạo banner quảng cáo để phục vụ các hoạt động quảng cáo tìm kiếm lợi nhuận là điều mà nhiều Webmaster/Blogger mong muốn.

Và dưới thủ thuật sau đây sẽ giúp bạn tạo 1 banner đồng thời có nút button (x) để người dùng có thể tắt để ngừng xem quảng cáo để tránh ảnh hưởng đến trãi nghiệm trên website/blog chúng ta.

Qua thủ thuật tạo banner quảng cáo này chúng ta cũng sẽ học về 1 chút javascript rất hữu ích.

Banner được trên menu và nó button tắt (x)