Thêm tiện ích Phóng To/Thu Nhỏ văn bản cho bài viết trong blogger

Bài viết này hướng dẫn thêm các nút phóng to/thu nhỏ văn bản trên bài viết của Blogger. 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.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.

Để 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.6.4/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>

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/AVvXsEi9lox5NqcKEG8A4lZMbFspsrVnvzcu_FabMQAUyluEWjmExe9br8fue9ydsfIpfETQffeFzWmYdoNVlETEnsRO6hUBGPCgA5hLibEq-1I6O_D26Z6ogLbE1fd7mk3zcE5HxdngJrE9J4Dg/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/AVvXsEjDf1LoScaR0irRkfhxA7RlrJz-rj8ijUx9mbzM-9XfnSIGdPUp0-l1YBrKxbT6to5bbVVRwoIvOWjH0C7PsKYkEorLCyme1sQMuwJWqEkx6t2Kx9YhBKBMckptwT7bA2vvwrxSrVY7tUg0/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/AVvXsEhxXsq0-iWPdeDvYH2cl0bwJfQzNOmBO9mLarYzJlxIT66G29ULZwXsotl8Z2mWCDTrIv-lrhtyx0x2NLweDzxOyT22smjSEnKMprwVfbxguUYYeHEmtobKokmv7DezJgGXbyLeFuLJLz0a/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/AVvXsEhOvpF43o7Yk8vzrW90RrZJrJ1zdVMXlq7vHsA1smJLCaA2TCmXlSvQBldBbbW8R2adjuDrIRrCH0WbPNEZ6QchtHU03nmcSmcGUAuU694C8UwtZfjCmHbP1hDzbxm2FToCwN6NchAoWefh/h120/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>