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.

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-->
<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(&#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  -->

•  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 gadget -->
<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/AVvXsEjaGX8QftuLxCCvjjCGapc0FeMMP6Qi1GOoeA9VY9BtxxkdEaWxJCK5NmCmQew2BpOWAmzvYa_44r23ztzvwo7ZYWDtyqSqsiCr1wae3ovGxeTuILQmCFvPYcS8ts-37Hm2GKlqFoXQOlOF/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/AVvXsEjHVwq_fy0eSLyRgaO1eZMsxnXLU21S3MYf2TRifTMG5I6jxj6DWKkqIjIpv5r3RScEDOovxKFfH2F7AfJEmsBng1IdvKBMUIAkFmnbcOPc6tEKLVeKKoxZUP5ZAvVD6LrLJZYYcL2HI97Q/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/AVvXsEgLHGeYRmiN90cJubisb2Ny_tJfRfpKZ7R6cFUBOW0Yzp7pQV_pt7kJJyf1RAa2rQx78gOjFLuftmD2vyNtsiMfZRad6Rs2ItCfHJgAvEMPIqfmWna2VuYX8Zq5LvkPn5C_tJdiJqcfETMR/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/AVvXsEjvVRqFioVe4UdhyGfNfjCiBXdxji0AxdUGKZGIRGO172KFFTdoBf8XXx5Q3vm9Htx3xXzlPg28FvCG-8Hc9oW-GSnMEV9UoGGBw-9HEdt5NYmIeCx15MRcjfOvhw6sK__B1zwkNcLSEq8S/h120/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size gadget --> 

• 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à vào một bài đăng nào đó để xem kết quả nào!

 Bạn đừng quên để lại comments góp ý cho bài viết nhé!