السبت، 15 ديسمبر 2012

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

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

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


Social shares buttons with effects


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



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

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


Social shares buttons with effects




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


Social shares buttons with effects


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



Social shares buttons with effects


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- ثم حفظ وهكذا إنتهيت



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





هناك تعليق واحد:

Related Posts Plugin for WordPress, Blogger...