Tạo nút Tăng/Giảm cỡ chữ trong bài viết Blogger

Chủ Nhật, 5 tháng 12, 2010
Nút Tăng/Giảm cỡ chữ cũng rất cần thiết cho blog của bạn. Nó giúp người đọc chọn lựa cỡ chữ phù hợp với thị lực của họ. Thông thường trong một blogspot, việc tăng hay giảm cỡ chữ chỉ được được thiết lập cho phần nội dung bài viết (post body). Javascript sẽ giúp bạn thực hiện điều này một cách dễ dàng.

Bước 1: Trước tiên đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates, đặt đoạn code Javascript dưới đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function fontIncrease(){
var obj = document.getElementById("text_Font");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="10px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "21px";}
}
function fontDecrease(){
var obj = document.getElementById("text_Font");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="21px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "10px";}
}
//]]>
</script>

Bước 2: Tìm các dòng

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

rồi đặt sau đó với đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a alt='Tăng cỡ chữ' title='Tăng cỡ chữ' href='javascript:fontIncrease()'>A+</a> |
<a alt='Giảm cỡ chữ' title='Giảm cỡ chữ' href='javascript:fontDecrease()'>A-</a>
</b:if>

Bước 3: Đặt dòng <div id='text_Font'> vào sau dòng <div class='post-body'> (ở một số Template là <div class='entry'>).

Tiếp tục đặt thẻ đóng </div> vào trước dòng <div class='post-footer'>. Lưu Template là OK.
Copy bài viết: +A Tăng cỡ chữ =A Mặc định -AGiảm cỡ chữ

Liên hệ mail: tpm1512@yahoo.com và xem tất cả bài viết trang này Tại đây
Nhấn vào theo dõi thăm trang web của Trần Phúc Minh


  • https://yogaso1.blogspot.com/2010/12/tao-nut-tanggiam-co-chu-trong-bai-viet.html?m=0
Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.
Mã Hóa Code

Tổng số Bình luận [ 0]

Đăng nhận xét

Lên trên