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).
Hướng dẫ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
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 == "item"'> <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 == "item"'>
<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 == "item"'> <div class='zoom-in-out'> <a href='javascript:ts('body',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('body',-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.