Blog mới của Nguyễn Lâm Blog. Welcome

Thêm Nút Thay Đổi Kích Thước Văn Bản Trong Bài Viết Trên Blogger

Nguyễn Lâm Blog - Thêm Nút Thay Đổi Kích Thước Văn Bản Trong Bài Viết Trên Blogger

 Thay đổi kích thước văn bản là một nút có tác dụng phóng to và thu nhỏ các chữ cái trong bài viết blog của bạn. Nút thay đổi kích thước văn bản này thường có dạng 'A-' để thu nhỏ và 'A+' để thu nhỏ. Nhưng cũng tùy vào mỗi blog mà nó sẽ có nút khác nhau.


Thay đổi kích thước văn bản rất hữu ích để tạo sự thuận tiện cho khách truy cập blog, vì nó có thể điều chỉnh kích thước của các chữ cái theo nhu cầu của họ hoặc điều chỉnh theo chiều rộng của màn hình. Đặt biệt giúp cho những người bị suy giảm thị lực có thể nhìn thấy dễ dàng hơn.

Cách Thêm Nút Thay Đổi Kích Thước Văn Bản Bài Viết Trên Blogger

Cách thêm nút thay đổi kích thước văn bản rất đơn giản, và JS và CSS này cũng không gây ảnh hưởng đến tốc độ trang web của bạn.

Bước 1: Đăng nhập vào Blogger.

Bước 2: Trên bảng điều khiển Blogger , Chọn Chủ Đề ➺.Chỉnh Sửa HTML.

Bước 3: Tìm đến thẻ </body> và dán đoạn JS này vào trên nó.

<script>//<![CDATA[
$('').ready(function() {
$('#incfont').click(function(){
curSize= parseInt($('.post-body, .post-info').css('font-size')) + 2;
if(curSize<=22)
$('.post-body, .post-info').css('font-size', curSize);
});
$('#decfont').click(function(){
curSize= parseInt($('.post-body, .post-info').css('font-size')) - 2;
if(curSize>=12)
$('.post-body, .post-info').css('font-size', curSize);
});
});
//]]></script>

  • + 2- 2 : Thay đổi số theo cách của bạn để phóng to hơn.
  • post-body : Mặc định là post-body.

Bước 4: Tìm đến thẻ <body> hoặc <body id='mainContent'> và thêm đoạn HTML này vào bên dưới nó.

<b:if cond='data:view.isSingleItem'><div class='NLam-texresizer'><div class='text-A+' id='incfont'><b>A+</b></div><div class='text-A-' id='decfont'><b>A-</b></div></div></b:if>

Bước 5: Tìm đến thẻ </head> hoặc &lt;/head&gt; và thêm CSS vào trên nó.

<b:if cond='data:view.isSingleItem'>
<style>
.NLam-texresizer { position: fixed; color: #ffffff; right: 30px; bottom: 180px; z-index:998;background-color:black; } #incfont, #decfont{font-size:18px;padding: 8px 10px; box-shadow: 0 0 40px 40px #e74c3c inset, 0 0 0 0 #e74c3c; box-sizing: border-box; background-color: transparent; border: 1px solid #fff;cursor: pointer;-webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;}#incfont:hover, #decfont:hover { box-shadow: 0 0 10px 0 #e74c3c inset, 0 0 10px 4px #e74c3c;;margin-top: -2px; }
</style>
</b:if>

Bước 6: Ấn Lưu chủ đề và quay lại trang chủ blog của bạn để thử nhé.

Kết luận

Vậy là mình đã hướng dẫn cho các bạn cách thêm nút thay đổi kích thước vào bài viết trên blogger rồi. Nếu bạn đang gặp vấn đề gì thì comment bên dưới nhé.

13 comments

  1. thêm đếm số người online trên web đi bn ơi
    1. Dễ mà bạn
    2. trang whos among ấy lúc mình thêm vào nó bị hiện lỗi ảnh dưới phần footer ý nhìn khó chịu qá
    3. Lỗi sao bạn. Comment ảnh mình xem
    4. bạn xem trực tiếp trên trang của whos.among gì đó á, r vào phần get code hay plugin chèn vào web bạn kéo xuống footer là thấy cái icon ảnh bị lỗi ở chân trang lun
    5. Bạn chèn vào phần sidebar ấy
  2. Hi bạn, sắp tới mình chuyển site nên bạn gỡ liên kết với quochieu.com đi nhé, cảm ơn trong thời gian qua
    1. Ok ạ.
  3. rating chưa fix đc hả bn
    1. Chưa bạn ạ
    2. nào fix đc up post mới nha
    3. Mình chuẩn bị update
  4. mà tui có cái blog đăng phim thì đặt liên kết được hok ông