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

Rate this post
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.

Bạn Đang Xem: 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 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

Xem Thêm : Thêm Tiện Ích Google Dịch Cực Nhẹ Vào 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.

Xem Thêm : Breadcrumbs chuẩn seo cho người làm Blogspot

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

Xem Thêm : Tự động thêm alt và title cho hình ảnh blogspot

———————————–


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

  1. Đỗ Mạnh Hồng says:

    Như vậy mới ổn chứ bạn, lấy title bài viết nhỡ bài viết có quá nhiều ảnh thì ảnh của bạn trùng title à =_=