Share Widget Keren dengan Tooltip

Share widget dengan tooltip ini sebenarnya sama dengan share widget lainnya. Bedanya hanya pada tampilannya yang dilengkapi tooltip, sehingga terlihat lebih menarik dan atraktif. Sebelumnya saya ucapkan terima kasih pada helper blogger atas scriptnya. Sekarang mari kita bahas cara membuat share widget keren dengan tooltip. Ikuti langkah berikut.

Log in ke blogger
Klik Tata Letak
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<b:if cond='data:blog.pageType == "item"'>
<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>

<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>


        <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>

Klik Simpan dan letakkan di bawah posting area
Demikian tutorial blogger untuk cara membuat Share Widget Keren dengan Tooltip. Semoga bermanfaat bagi semua
Selamat mencoba dan sukses selalu

"keep spirits and do the best"