Tăng giảm cở chữ của nội dung bài đăng

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Khi lướt web các bạn thường thấy có rất nhiều trang web có tiện ích là tăng hoặc giảm kích thước chữ của nội dung bài viết mà bạn đang xem. Tiện ích này rất hữu ích, nó có thể giúp chúng ta lựa chọn cở chữ phù hợp để xem. Bạn có thể xem bài ở cở chữ lớn hoặc nhỏ khác nhau chỉ cần click vào nút tăng hoặc giảm cở chữ ngay trên bài đăng. Vậy có thể áp dụng nó vào blogspot của chúng ta? Mình xin chia sẻ cách đưa tiện ích này vào trong blogspot của chúng ta.


☼ Bắt đầu thủ thuật

1. Đầu tiên bạn hãy vào tài khoản blogger
2. Vào bố cục chọn chỉnh sửa HTML (Edit HTML)
3. Chọn phần mở rộng tiện ích (Expand Widget Templates) như bên dưới

4. Tìm đến code bên dưới
<data:post.body/>

Thay nó thành code sau
<div id='post_body'>
<data:post.body/>
</div>

5. Chèn tiếp code bên dưới vào trước thẻ </head>.
<script src='http://data-traidatmui.appspot.com/scripts/text_sizer.js' type='text/javascript'/>

6. Tiếp đến hãy tìm đến đoạn code bên dưới hoặc tương tự
<div class='post-header-line-1'/>

7. Sau đó chèn code bên dưới vào sau code vừa tìm được
<div style='float:right; margin: 0px 0px 0px 0px;font-size:12px;font-family:times; color:#000099;'>Cở chữ: <a href='javascript:ts(&quot;post_body&quot;,-1)'><img align='top' border='0' src='http://lh4.ggpht.com/_BTztXRwC9ik/TBrjUK7RHUI/AAAAAAAACl0/bJ3DFafCC3c/font_normal.gif' title='Giảm cở chữ'/></a><a href='javascript:ts(&quot;post_body&quot;,1)'><img align='top' border='0' src='http://lh6.ggpht.com/_BTztXRwC9ik/TBrjT5-0UAI/AAAAAAAACls/NXc8rG9vJlY/font_enlarge.gif' title='Tăng cở chữ'/></a> </div>

8. Cuối cùng save template lại là xong

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

Loading...

18 nhận xét

  1. thủ thuật này hay lắm nhất là với người mắt kém

    Trả lờiXóa
  2. Chào bạn, mình đã thử dùng cách "Tạo ứng dụng tăng kích cỡ font" trên website của bạn. Nhưng không hiểu sao nó không chạy. Cảm ơn và mong phản hồi từ bạn ^^

    Bạn xem giúp mình nhé: Lỗi !!!

    Trả lờiXóa
  3. Đó là do trong site bạn không có id post_body như trên nên không hoạt động được. Bây giờ bạn tìm đến thẻ <data:post.body/> và thay nó thành code sau

    <div id='post_body'>
    <data:post.body/>
    </div>


    Như vậy nó có thể hoạt động rồi bạn ah. Chúc thành công

    Trả lờiXóa
  4. Cảm ơn bạn. Mình đã thử nhưng vẫn còn 1 lỗi nữa. Đó là có chữ thì to nhỏ được, có chữ thì không. Bạn có bít vì sao ko ^^?

    Bạn xem giúp nhé: Lỗi !!!

    Trả lờiXóa
  5. Nếu nội dung nằm trong phần

    <div id='post_body'>
    nội dung
    </div>
    sẽ tăng giảm được. ngoài thẻ trên sẽ không thay đổi.

    Trả lờiXóa
  6. Đó là do trong site bạn không có id post_body như trên nên không hoạt động được. Bây giờ bạn tìm đến thẻ và thay nó thành code sau.Cái Thẻ Dó Là Thẻ gì vậy Pác :((

    Trả lờiXóa
  7. Cái thẻ mình có để ở comment 3 đó bạn.thẻ data:post.body

    Trả lờiXóa
  8. Thời gian qua mình thấy một số bạn vẫn gặp khó khăn với thủ thuật tăng giảm cỡ chữ này nên mình đã cập nhật thêm bước 4 ở trên để bạn dễ dàng thực hiện hơn. Chúc bạn thành công. lleu

    Trả lờiXóa
  9. Bạn ơi, mình đã làm theo các bước nhưng nó ko hoạt động. Click thwws nàonó cũng y nguyên, chữ ko to lên :(

    Trả lờiXóa
  10. Trai datmui ơi
    Cho mình hỏi chút
    sao mình làm thì nếu tăng kích thước chữ to nó ko như của bạn mà nó đè chết lên nhau khiến ko đọc được mà toàn hoa văn

    Trả lờiXóa
    Trả lời
    1. Đấy là do thuộc tính line-height của bạn đặt đơn vị là em hoặc px nên nó k tự dãn dòng khi tăng kích thước font. Bạn k nên đặt đơn vị vho thuộc tính này, ví dụ chỉ đặt là line-height:1.5; thôi.

      Xóa
  11. line-height của tất cả các phần hay chỉ nguyên phần post thôi vậy tại line-height nhiều em quá à

    Trả lờiXóa
    Trả lời
    1. Vì ở đây mình chỉ tăng giảm phần post nên chỉ cần phần post thôi e, những phần khác k ảnh hưởng

      Xóa
    2. Dạ Cám Ơn anh - Cho em hỏi một chút nữa tại sao em áp dụng phần print nó lại ko giống như trang của anh nhỉ

      Xóa
  12. http://mobi-bnews.blogspot.com/2012/10/20-bi-quyet-ban-hang-cua-doanh-nhan-my.html tải chế độ print ko giống trang này được

    Trả lờiXóa
  13. áp dụng cái bài viết tạo nút print trong web anh ấy

    Trả lờiXóa