Thay đổi kích cỡ chữ trên web/blogspot với Jquery

Trong bài viết hướng dẫn sử dụng JavaScript khá ngắn gọn này, Chúng tôi sẽ chỉ bạn cách dùng vài đoạn mã đơn giản để thay đổi kích cỡ chữ trên trang web của mình chỉ với một vài cú nhấn chuột.

Trên thực tế, hầu như tất cả các trình duyệt có một tính năng để kiểm soát các ký tự trên các trang web bạn truy cập, bằng cách nhấn phím Ctrl + (phóng to) hoặc – (thu nhỏ). Nhưng có một cách khác bổ sung thêm một chức năng “kích thước font chữ động” trên trang web của bạn bằng cách sử dụng javascript.

Dưới đây là một kịch bản có thể được sử dụng để tạo điều kiện thuận lợi cho các khách truy cập để kiểm soát kích thước font chữ của văn bản trên mỗi trang của trang web / blog của bạn. Điều này sẽ rất hữu ích cho độc giả cuộc đấu tranh với các chữ cái nhỏ, và cho phép người để phóng to kích thước font chữ của văn bản của bạn, vì vậy họ dễ dàng hơn để đọc. đơn giản là chép đoạn code sau vào blog hay web của bạn:

Cách Thực Hiện:

1.Đăng nhập vào Blog

2.Tùy chọn (Mũi tên xuống)

3.Chọn mẫu

4.Chọn Chỉnh sửa HTML

5.Chọn tiếp tục

6.Chọn mở rộng tiện ích

7.Nhấn F3 Hoặc bấm tổ hợp phím Ctrl + F tìm </head> và chèn đoạn sau ngay phía trước thẻ 

</head>

Code này :

<script type=”text/javascript”>
var min=8;
var max=18;
function zoominLetter() {
var p = document.getElementsByTagName(‘p’);
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace(“px”,”"));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+”px”
}
}
function zoomoutLetter() {
var p = document.getElementsByTagName(‘p’);
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace(“px”,”"));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+”px”
}
}
</script>

8.Lưu lại

9.Vào bố cục chọn > Thêm tiện ích và chọn HTML/Javascript 

Việc cuối cùng là các bạn chèn đoạn code sau đây vào vị trí mà bạn muốn tạo chức năng to nhỏ phông chữ

<a href=”javascript:zoominLetter();”>A</a>
<a href=”javascript:zoomoutLetter();”>a</a>

Chúc các bạn thành công !