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é.

-----------------------------------