Text Zoom in, Zoom out Blogspot post - Code phóng to thu nhỏ chữ trong Blogspot

Nhân tiện có một bạn hỏi về loại code phóng to và thu nhỏ chữ trong Blogspot ( code này đã có share lâu rồi ) . Nay mình chia sẻ lại để bạn nào có nhu cầu thì sử dụng.

Các bạn vui lòng click từng Tab, và làm theo hướng dẫn:

1. Đăng nhập Blogspot -> Mẫu -> Edit HTML
2. Tại khung code HTML, các bạn bấm tổ hợp phím Ctrl+F để tìm thẻ </head>
3. Copy đoạn code CSS sau đây và paste nó vào trước thẻ đóng </head>

<!-- Code Phóng to thu nhỏ : Re-post by Softnew.net -->
<script>
$(document).ready(function(){
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>
<!-- Kết thúc  -->

4. Xong bước 1. Tiếp tục mở Tab " Bước 2 : Chèn Code"

1. Tại giao diện Edit HTML, bấm tổ hợp phím Ctrl+F để tìm đoạn code 

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

2. Chèn đoạn Code sau đây vào dưới đoạn code <div class='post-header-line-1'/>

<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/AVvXsEhW_bpPypVCCCea6xFvc1CPyETkiTmkvvge7RneZkcfgKhkH09dBIf_WpxCGy9xmmVwsFNnbM6Vzljpn9pp_OM6qWF1MsAWY_Tni9JL7WNVT_eoqN1SjIAK6LVVIRdxygkyYFD7EeNb26ER/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/AVvXsEh4PItFpbP6w7EqyD16nF2RxYwABus0V580V3MW1ZKIItPrAL_ZsyeTm-Z1OG2bSvko2WhwNgIbHKVSldspMGgCcgb0fquZh2aycprchbdIM4yh9RHZWwaaoStkQgpnpVlax2pQV7-hEALF/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/AVvXsEgcGydCk29y7SJIt8TxuPhpL8BIvm8X6s-RaZEi_2IlxT8sg-MSh9tO45lNiHeolyxI4W0KRWdDEI79a1ZGB74JV9mpFrSK6sT860Zh88kgpOF2OdtmzcRomNAV-ei6-mxvzcZVXdWq63xh/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/AVvXsEjB5cg8n5s1VHrJTr4l5kgDSUpy_1cW8aClHaXvLjfemSyuVTtcjhRg4ko3W23tMdkSRIkQabNomVR1M4OGRRfCwF798dw3FVMOvmdKzm0_Ka3wQoHU0Mi5llxIi7sj9LUug3Uienb4pbo2/h120/reset-font.png' style='cursor: hand;'/></a></td></tr></table>

</b:if>

3. Có thể có nhiều hơn 1 code <div class='post-header-line-1'/> tùy vào loại template. Các bạn chèn thử từng lượt 1 rồi test bài viết, cho đến khi nó hiển thị đúng yêu cầu của các bạn nhé
4. Hình ảnh biểu tượng Zoom in / Zoom out các bạn có thể tự tạo và thay thế sao cho phù hợp nhé.

Cuối cùng các bạn bấm tổ hợp phím Ctrl +F vào tìm đoạn code <data:post.body/> .
Các thay hết đoạn code  <data:post.body/>  thành đoạn code <span><data:post.body/></span>

Lưu mẫu và thưởng thức kết quả nhé !