إضافة أزرار المشاركة بتأثيرات أنيقة Social buttons with effects

إضافة أزرار المشاركة بتأثيرات Social shares buttons with effects

إضافة أزرار مشاركة بتأثيرات رائعه وأنيقة تعطي رونق وأناقة لمدونتك

مشاهده حيـّه Live Demo

*ولطريقة إضافتها نتبع الخطوات التالية :

1- ندخل للتخطيط او الLayout

2- إضافة اداة او Add Gadget

3- نختار اداة HTML/Javascript

4- ننسخ بالصندوق الكود التالي :

<!-- Social Bookmarking Widget With Animated Tooltips  -->

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

5- ثم حفظ وهكذا إنتهيت



والآن أصبح بمدونتك أزرار مشاركة بتأثيرات أنيقة ..تهانينا...!