×

Tạo button tăng giảm cỡ chữ trong bài viết cho blogspot/website

Nút Tăng/Giảm cỡ chữ cũng rất cần thiết cho blogspot/website 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 mình. 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).

Sau đây sẽ hướng dẫn bạn tạo button tăng giảm cỡ chữ cho blogspot/website-Button increase / decrease font size.

Bài này sẽ hướng dẫn cài đặt cho 2 trường hợp:

Trường hợp 1: Nút tăng giảm cỡ chữ với javascript và jquery tức là blogspot cần có thư viện jquery hỗ trợ.
Trường hợp 2: Nút tăng giảm cỡ chữ chỉ với javascript không cần jquery hỗ trợ.


Nút tăng giảm cỡ chữ với javascript và jquery


Xem demo:

DEMO

THỰC HIỆN:Trước tiên đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Bước 1 Thêm jquery vào trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' />

Bước 2 Thêm CSS

.button-fs span{font-size:13px;color:#222;float:right;margin:0 5px;text-decoration:none;display:inline-block;cursor:pointer;padding:0 5px;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.2)}
.button-fs span:hover {color: #fff;background-color: #337ab7;border-color: #2e6da4}

Bước 3 Thêm javascript vào trước thẻ </body>

<script>
//<![CDATA[
$(function(){$(".button-fs span").bind("click",function(){var size=parseInt($(".post-body").css("font-size"));$(this).hasClass("plus")?(size+=2,size>=24&&(size=24)):(size-=2,10>=size&&(size=10)),$(".post-body").css("font-size",size)})});
//]]>
</script>

Bước 4 Thêm HTML vào vị trí bạn muốn, thường là thêm vào sau:

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

Đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='button-fs'>
  <span class='plus'>A+</span>
  <span class='minus'>A-</span>
</div>
</b:if>

Lưu ý: Blog cần có thư viện jquery hỗ trợ thì code này mới hoạt động được.

Nút tăng giảm cỡ chữ chỉ với javascript


Xem demo:

DEMO

Bước 1 Thêm CSS

.zoom-in-out{float:right;margin:0 10px}
.in-out{margin-right:10px}

Bước 2 Thêm javascript vào trước thẻ </body>

<script>
//<![CDATA[
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>

Bước 3 Thêm HTML vào vị trí bạn muốn, thường là thêm vào sau:

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

Đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='zoom-in-out'>
<a href="javascript:ts('body',1)" title="Tăng cỡ chữ"><img class='in-out' src="https://4.bp.blogspot.com/-AnWrTbYZn90/XypvSp90YoI/AAAAAAAADB8/nZQYtyX515YqVdvWiErCgrA6xLVokurRwCLcBGAsYHQ/s1600/zoom-out.png" alt="+A" /></a> <a href="#" onclick="location.reload(true);" title="Cỡ chữ mặc định"><img class='in-out' src="https://2.bp.blogspot.com/-XXRuYjpXvLM/Xypvgqk5nBI/AAAAAAAADCA/1vlLBAn1Shoyh3j-d-HTVJkGJ4Vha-bVQCLcBGAsYHQ/s1600/default.png" alt="=A" /></a> <a
href="javascript:ts('body',-1)" title="Giảm cỡ chữ"><img class='in-out' src="https://1.bp.blogspot.com/-OOZ03MgQe6E/Xypvr11pM1I/AAAAAAAADCI/UXpt141FK7w29ud6Yzzl23YToFRDmtoKgCLcBGAsYHQ/s1600/zoom-in.png" alt="-A" /></a>
</div>
</b:if>

Nếu bạn không muốn dùng nút cỡ chữ mặc định thì bỏ đoạn bôi màu vàng chanh và dùng hình ảnh chiếc kính núp

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='zoom-in-out'>
<a href='javascript:ts(&apos;body&apos;,1)' title='Tăng cỡ chữ'><img alt='+A' class='in-out' src='https://4.bp.blogspot.com/-Hbjiz1JshoM/XyrFugSyNdI/AAAAAAAAEJM/xOs4Fsa7JLA5TJqKFi4Perhs1maKYObswCLcBGAsYHQ/s1600/Zoom-In-icon.png '/></a><a href='javascript:ts(&apos;body&apos;,-1)' title='Giảm cỡ chữ'><img alt='-A' class='in-out' src='https://2.bp.blogspot.com/-OZRKscb1flQ/XyrFuiKZssI/AAAAAAAAEJQ/xABpK6h1xuk4wl1v0BVjmSPzYvyQAgycwCLcBGAsYHQ/s1600/Zoom-Out-icon.png'/></a>
  </div>
</b:if>

Có thể thay ảnh bằng SVG hoặc font icon Awesome.

1 nhận xét :

Bạn có thể sử dụng biểu cảm yahoo

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3