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>

<!-- Start Text re size gadget by chinhtrucblog.blogspot.com-->
<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(&#39;span&#39;,&#39;.section2&#39;);
section = section.join(&#39;,&#39;);
// Reset Font Size
var originalFontSize = $(section).css(&#39;font-size&#39;);
$(&quot;.resetFont&quot;).click(function(){
$(section).css(&#39;font-size&#39;, originalFontSize);
});
// Increase Font Size
$(&quot;.increaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});
// Decrease Font Size
$(&quot;.decreaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});
});
</script>
<!-- End Text re size gadget by chinhtrucblog.blogspot.com -->

• 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

<!-- Start Text re size by chinhtrucblog.blogspot.com -->
<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/AVvXsEiGDpRYMBiqR8A7KLQAw-mXSHH46iPBkQ11MwEplZwKTWDB-sjDUAT8w3OYKDI2s0Y-k3Gx2X88qHoEuHIT_3PvwEcjtIbDNyD8-OIPDrs_MPwxhjUTPcigR20DGY6xlNGLhv6xqHfRD66W/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/AVvXsEhIaFAO8mZ6s_U_0Ux2qvsaAAld-uHyWqfqBEi9lc42wH3y27S5N0Z4fZ_lKAr7wR-MxewMZZUvWxBHoS8BTpLJaIi1ulGV9FH5zU7H2cwqd2EOAWfu3NdFLy9d38sqtQ9drLWuahZ-7j9M/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/AVvXsEjfQLVe-2rleDMJzSnaEBUaet6QR79zZiNdKc8LnRJQdV1DxdjMhtgNKnQxfxk95Z8as8xK1AqQ6pm1TIVlKkTrXCsPgQH71di0HpOe0BhNtBeaYqolBtFIQWF7IarN_nOAoWEctEYzcvf7/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/AVvXsEi7WR5CcndwSSIiGWckEVnJ7XbFxIrbJGpmZO1Msxyrg0qJWgZS_sY2BYg7AODvJdMjGOaCsA_FhKffQvY6ZzEPGnQ1r0L5ltRCRuw2bJU1BcjxE9-iISKNptb86jJv0OgzVy0ydcbmADXS/h120/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size by chinhtrucblog.blogspot.com -->

• Tìm code sau

<data:post.body/>

• Thay thế  tất cả đoạn <data:post.body/> bằng code bên dưới 

<span><data:post.body/></span>

• Lưu lại và tận hưởng kết quả thôi.

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