Tiện ích phóng to,thu nhỏ cho bài viết trong Blogspot

Đã lâu rồi chưa viết bài về thủ thuật Blog. Hôm nay mình hướng dẫn các bạn cách thêm các nút phóng to/thu nhỏ văn bản trên bài viết của Blogspot. Tiện ích sử dụng một số jQuery đơn giản và các biểu tượng đầy màu sắc để tạo ra một bảng thay đổi kích cỡ văn bản thật phong cách và nổi trên góc của bài viết sẽ giúp cho độc giả dễ xem hơn. Tiện ích gồm ba nút tăng, giảm kích thước văn bản và một nút thiết lập lại cỡ chữ mặc định. Nào chúng ta cùng bắt đầu.

DEMO

Để thêm tiện ích này bạn hãy làm theo hướng dẫn sau nha

Vào blogger > Mẫu > Chỉnh sửa HTML
Chọn mở rộng mẫu Tiện ích
Dán đoạn code bên dưới trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array('span','.section2');
section = section.join(',');
// Reset Font Size
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
});
</script>

Lưu ý : Trong blog của bạn đã chèn dòng màu đỏ rồi thì xóa đi nha. Nếu chưa có thì để lại.
Tìm đoạn

<div class='post-header-line-1'/>

Và dán sau nó đoạn code bên dưới

<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDtFH7C_8BFNPV287C7I7_8EDoYOUutAfICWs0pkDAeBLCMtxUFbODr6LtmevwloDq_DAcb6xp3aPm4woBYKGDsVIAUJGyYewwHFbuR-I-pcpQJZhvLlIuyBTV8KQvK50J8NahmHX9iFeC/h120/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0GUePt3plV4a_0mjyQED7z-3y-xeJ4SqyUXWCd6bdNXxpONWke-fVfsniuPvtjAqTmKb3YJaynIrju2v2q3-vGXsMdo3csfx3UmAk6Zx8sbxmZQvx2wC_q4c3uckdC-TGheocG6bYvJqs/h120/bigger-font+-+Copy.png'/></a>
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtkNDaeGJJOYCNWnVrECHkDXTyzjyqRAZYcCMd8yLZJtVYAVSFPsuHP5RgR6ZvGbCuAqnbLMMS7m3dF5OT9g51OB4bChwBma46uHcmcVNK7oFiBrfunVYrVXdqpZniZpZeDkjNDRPnORM9/h120/smaller-font.png' style='cursor: hand;'/></a>
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIGh5FGZuE2ehxL4ZzF5-SfauM2wjkdm1mPd15UunybhcCQBHQf3mZRzvU2MYAKGAtIAVc8iG0bZT91tH27CKpESOoX43GW2HngYEtOsA-XZP_7W_NcqoCmV8Nh-6ZnN8xNpJY0LA_GmL/h120/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>