Back to top đa chức năng cho Blogspot

Tích hợp button chia sẻ mạng xã hội ( Social Share Button ), widget cần thiết mà mọi Blog nên có, thủ thuật này nhằm nâng cao tính tiện lợi cho người đọc muốn chia sẽ bài đang xem một cách dể dàng và nhanh chóng.

Bắt đầu nhé .....

Bước 1:

Vào chỉnh sửa HTML trong Template của Blogspot tìm thẻ đóng ]]></b:skin> và dán đoạn code dưới đây vào bên dưới nó.

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<!--Import materialize.css-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css' media='screen' rel='stylesheet' type='text/css'/>
<style type='text/css'>
/* CSS Share Button */
.sharepost li{width:19%;padding:0;list-style:none;margin-top: 2% 0;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .mail-to{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .mail-to:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
</style>

Bước 2:

Dán đoạn code dưới đây trên thẻ </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'> </script>
<div class='fixed-action-btn click-to-toggle'>
  <a class='btn-floating btn-large light-blue darken-2 z-depth-2'>
    <i class='material-icons light-blue darken-2'>menu
    </i>
  </a>
  <ul class='ico-social'>
    <li>
      <a class='btn-floating yellow darken-1' id='social-trigger'>
        <i class='material-icons'>share
        </i>
      </a>
    </li><b:if cond='data:blog.pageType == &quot;item&quot;'>
<li>
  <a class='btn-floating red darken-1' onClick='jumpTo(&quot;#comments&quot;, 1000)'>
    <i class='material-icons'>comment
    </i>
  </a>
    </li></b:if>
    <li>
      <a class='btn-floating green' onClick='jumpTo(&quot;#scrollmain&quot;, 1000)'>
        <i class='material-icons'>publish
        </i>
      </a>
    </li>
  </ul>
</div>
<!-- Modal Structure -->
<div class='modal bottom-sheet' id='social-modal'>
  <div class='modal-content'>
    <h4>Chia sẻ bài viết này
    </h4>
    <div class='sharepost'>
      <ul>
        <li>
          <a class='twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:blog.url' rel='nofollow' target='_blank'>
            <i class='fa fa-twitter'>
            </i>Tweet
          </a>
        </li>
        <li>
          <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'>
            <i class='fa fa-facebook'>
            </i>Facebook
          </a>
        </li>
        <li>
          <a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'>
            <i class='fa fa-google-plus'>
            </i>G-plus
          </a>
        </li>
        <li>
          <a class='mail-to' expr:href='&quot;mailto:?Body=&quot; + data:blog.url' rel='nofollow' target='_blank'>
            <i class='fa fa-envelope'>
            </i>Mail
          </a>
        </li>
        <li>
          <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' rel='nofollow' target='_blank'>
            <i class='fa fa-pinterest'>
            </i>Pinterest
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class='modal-footer'>
    <a class=' modal-action modal-close waves-effect waves-green btn-flat' href='#'>Tắt
    </a>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'/>
<script type='text/javascript'>
  //<![CDATA[
(function(a){a(document).ready(function(){a("#social-trigger").on("click",function(){a("#social-modal").openModal()})})}(jQuery));function jumpTo(a,b){var c=parseInt(b)+100;$("html, body").animate({scrollTop:$(a).offset().top},b).after(function(){setTimeout(function(){$("html, body").stop()},c)})};
  //]]></script>

※ Bước cuối cùng là dán đoạn này

<div id='scrollmain'/>
vào dưới thẻ <body> sau đó lưu themes, khởi động lại site và xem kết quả.!

Xem demo: