Chia sẻ thủ thuật blogspot - blogger

luat1x1

10/19/2011

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


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.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top