Thanh công cụ hỗ trợ người đọc cho Blogspot

Khi đọc bài thì người đọc có thể cần thự hiện một vài thao tác trên blog của bạn, đó là lí do mình tạo ra công cụ này. Những thao tác đó là: in bài viết, dịch bài viết, gửi bài viết qua email, tăng giảm kích thước chữ, nút đi đến ô bình luận và nút back to top. Sau đây là cách thực hiện:

Công cụ hỗ trợ người đọc

Demo ở trong bài viết này

+A -a +

#Thêm HTML

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ </body>

4. Dán code dưới vào trước thẻ mới tìm

<script type="text/javascript">$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script>
<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>
<!--khanh98.blogspot.com/2015/08/thanh-cong-cu-ho-tro-nguoi-doc-cho-blogspot.html-->
<div class="tool-post">
<a class="fontsize" href="javascript:ts('body',1)" title="Tăng kích thước chữ">+A</a>
<a class="fontsize"
href="javascript:ts('body',-1)" title="Giảm kích thước chữ">-a</a>
<a class="print" href='javascript:window.print()' title="In bài viết này"><i class="fa fa-print"></i></a>
<a class="mail" expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url' rel='nofollow' title='Share Via Email'><i class="fa fa-envelope"></i></a>
<a class='language' href='#' onclick='window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&amp;langpair=vn%7cen&amp;hl=en&#39;); return false;' rel='nofollow' target='_blank' title='Translate to English'><i class="fa fa-language"></i>
 </a>
  <a class="top" href="#" onclick='top.window.scrollTo(0,0)' title="Scroll to top"><i class="fa fa-angle-double-up"></i>
  </a>
    <a class="add_comment" href="#comment-form" title="Add a comment">+<i class="fa fa-comment"></i>
  </a>

</div>

#Thêm CSS

1. Tìm thẻ ]]></b:skin>
2. Dán code dưới vào trưới thẻ mới tìm

/*thanh-cong-cu-ho-tro-nguoi-doc-cho-blogspot.html*/
a.fontsize,a.print,a.mail,a.language,a.top,a.add_comment{font-weight:bold;text-decoration:none;padding:2px;background:#000;color:#fff;line-height:30px;display:block;text-align:center;margin-bottom:5px !important }
.tool-post{
  padding:5px;background:#fff; overflow:hidden;
position: fixed;
    left: 0px;/* vị trí so với bên trái */
    top: 15px;/* vị trí so với top */
  z-index:999;
  opacity:0.5/*độ mờ của công cụ*/
}
.tool-post:hover{opacity:1}

#fff là màu trắng và #000 là đen.

#Thêm font Awesome và Jquery

Lưu ý: Nếu trong template của bạn đã có font Awesome thì khỏi cần thêm vào và tương tự với Jquery.
1. Tìm thẻ </head>
2. Thêm thẻ dưới vào trước thẻ vừa tìm để thêm font Awesome

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" media="all"/>

3. Thêm thẻ dưới vào trước thẻ </head> mới tìm để thêm Jquery

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

4. Lưu mẫu lại.