Tạo nút Share với hiệu ứng Tooltips

 Đây là một bộ Share button với hiệu ứng Tooltips khá đẹp. Hy vọng các bạn sẽ thích nó.

DEMO
Bắt đầu thực hiện thủ thuật:

• Vào Bố cục >> Thêm một tiện ích HTML/JAVASCRIPT và dán code sau vào:

<b:if cond='data:blog.pageType == "item"'> 

<!-- Social Bookmarking Widget With Animated Tooltips By http://ceewave.blogspot.com/ -->

<script type="text/javascript">

  var SHRCB_Settings = {"shr_classic":{"size":"32","link":"","service":"5,7,313,309,78,304,88","apikey":"2fc518bd8c0bb3cf45bdade11877971c1","shortener":"bitly","shortener_key":"","designer_toolTips":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};

  var SHRCB_Globals = {"perfoption":"1"};

  </script>

 <!-- End Shareaholic Classic Bookmarks settings -->



        <!-- Start Shareaholic Classic Bookmarks script -->

<script type="text/javascript">

       (function() {

            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;

            sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-cb.min.js";

            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);

        })();

        </script>



<!-- End Shareaholic Classic Bookmarks script -->



        <script type='text/javascript'>

          if (typeof(SHR4P)=="undefined") SHR4P = {};

          SHR4P.blogger_addDiv = SHR4P.blogger_addDiv || function(divClass)

          {

                  var post = new RegExp('hentry');

                  var titleContainer = new RegExp('post-title');

                  var postContainer = new RegExp('post-footer');

                  var elements = document.getElementsByTagName('div');

                  for (var i = 0; i < elements.length; i++) 

                  {

                      var classes = elements[i].className;

                      if (post.test(classes)) 

                      {

                          var container = elements[i];

                          for (var j = 0; j < container.childNodes.length; j++)

                          {

                              var item = container.childNodes[j].className;

                              if (titleContainer.test(item))

                              {

                                  var link = container.childNodes[j].getElementsByTagName('a');

                                  if (typeof(link[0]) != "undefined")

                                  {

                                      var url = link[0].href;

                                      var title = link[0].innerHTML;

                                  }

                                  else

                                  {

                                      var url = document.url;

                                      var title =  container.childNodes[j].innerHTML;

                                  }

                                  if (typeof(url) == "undefined"|| url == 'undefined' ){

                                      url = window.location.href;

                                  }

                                  title=title.replace('"',"%22");

                              }

          

                              if (postContainer.test(item))

                              {

                                  var footer = container.childNodes[j];

                              }

                          }

                          var d = document.createElement('div');

                          var code = '<div style="clear:both"></div><div class="' + divClass + ' shareaholic-show-on-load" data-shr_href="' + encodeURI(url) + '" data-shr_title="' + title + '"></div><div style="clear:both"></div>';

  

                          d.innerHTML = code;

                          container.insertBefore(d , footer);

                    }

                }

                return true;

        };

        SHR4P.blogger_addDiv("shr_classic");</script>

</b:if>

•  Lưu lại và tận hưởng thành quả!