Tăng giảm cở chữ của nội dung bài đăng Blogspot

Khi lướt web các bạn thường thấy có rất nhiều trang web có tiện ích là tăng hoặc giảm kích thước chữ của nội dung bài viết mà bạn đang xem. Tiện ích này rất hữu ích, nó có thể giúp chúng ta lựa chọn cở chữ phù hợp để xem. Bạn có thể xem bài ở cở chữ lớn hoặc nhỏ khác nhau chỉ cần click vào nút tăng hoặc giảm cở chữ ngay trên bài đăng. Vậy có thể áp dụng nó vào blogspot của chúng ta? Mình xin chia sẻ cách đưa tiện ích này vào trong blogspot của chúng ta.

Xem Demo

☼ Bắt đầu thủ thuật
Cách 1: Dùng JS
1. Đầu tiên bạn hãy vào tài khoản blogger
2. Vào Thiết kế chọn chỉnh sửa HTML (Edit HTML)
3. Chọn phần mở rộng tiện ích (Expand Widget Templates) 

4. Tìm đến code bên dưới

<data:post.body/>

Thay nó thành code sau

<div id='post_body'>
<data:post.body/>
</div>

5. Chèn tiếp code bên dưới vào trước thẻ  </head> 

<script src='http://namknablog.googlecode.com/files/text_sizer.js' type='text/javascript'/>

Các bạn nên tải file Js và host Free về TẠI ĐÂY để Upload lên host riêng dùng lâu dài.
6. Tiếp đến hãy tìm đến đoạn code bên dưới hoặc tương tự

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

7. Sau đó chèn code bên dưới vào sau code vừa tìm được

<div style='float:right; margin: 0px 0px 0px 0px;font-size:12px;font-family:times; color:#000099;'>Cở chữ: <a href='javascript:ts(&quot;post_body&quot;,-1)'><img
 align='top' border='0' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDsYyxbO_bYDR6YQzboTrOaL-S1GAlqnB5ckmjtoWhxdTkDbaJxisbYI9XOE5P9KsOA6gPo99fyTh0MsxOVn_kRoHy3lVPVRdui2DZczx_sCLLtdtw6x6MjoyT-1Hmb-GNRK1mtT7rj0H/s1600/font_normal-namkna-blogspot-com-ngoctra.gif'
 title='Giảm cở chữ'/></a><a href='javascript:ts(&quot;post_body&quot;,1)'><img
 align='top' border='0' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmqOmc2a3a5DBjdZb5sQHi6tJHLX1RlOZZFDzX_p3mv0rar3qPcV7prNSunhlvkW-IN3eJTvpqTaRd85rlcauwfZ8357LLwnPKSo-aZNuR4_hgXt65WVFRirI3kPg1Io_eW1fh_Otoq-r1/s1600/font_enlarge-namkna-blogspot-com-ngoctra.gif'
 title='Tăng cở chữ'/></a> </div>

8. Cuối cùng save template lại là xong

Cách 2: Dùng Javarscrip.

Dán code sau vào HTML/Javarscrip

<script type='text/javascript'>
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
</script>

<a href="javascript:ts('body',1)"><img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCdI86L7FH6KYAYowfTvb8Xf9BAKe-4y2OIesDC_tVZwRudFj_FvQ_0d3b4-jiP1MIIaUzwzwHdF8_-wDRRuChLuKZkhyphenhyphencf9hCWaU-8Rjb3ZzYpj5sUkUTfB5O60PzNIdS46qIRWYFWYp/s1600/tang-co-chu-blogspot-namkna-ngoctra.png"
 alt="+A" /></a><a href="#" 
onclick="location.reload(true);"><img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiG0Qdts4u43FImj2rMxJXp-u0Lqdos8x4ju4vd0my3nuTli_l4Mgy7a6HgiFFYMswhs2Cu6_yDq2UzHL_IKSNNFgt1vuT3F5Oehv5ymcNai8jEN9BV7eATCjmNfTTpTYVj036ghsLrtp5/s1600/tang-co-chu-blogspot-namkna-ngoctra-2.png"
 alt="=A" /></a><a
href="javascript:ts('body',-1)"><img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV1R7dxpVwxPwu0SarKoipsROxvxVzIHoa4b0mqraQLTVYgDcGAUOZIE-Csrn38VhSbfE6v-vseeP4eNNU3HxHWiqoaOoVuVeSo9bm6Pm-LJqExpOD7KWT5MS2gNSOIkSUIfivw6Iegy_l/s1600/tang-co-chu-blogspot-namkna-ngoctra-3.png"
 alt="-A" /></a>

Chúc thành công!

Chủ đề: