الأحد، 29 يونيو 2014

حصرياً : إضافة مشاركة للمواقع الإجتماعة على شكل الماك

السلام عليكم ورحمة الله وبركاته

بسم الله رحمين الرحيم

اعزائي زوار ابداعاتي اليوم احضرت لكم اضافة جديدة وهي اداة المشاركة على المواقع الاجتماعية لمدونات بلوجر تشبه نظام الماك
صورة الاداة :





يمكنك معاينة الاداة من هنا

طريقة تركيب الاداة في المدونة
١- اضغط على تخطيط من لوحة تحكم المدونة
2- اختر اضافة اداة
3- اختر اداة HTML /JavaScript
4- اترك العنوان فارغ و انسخ الكود التالي و ضعه في الاداة
لمن تواجه اي مشاكل في اي من الخطوات السابقة يمكنك مشاهدة الشرح المصور من هنا



<style type="text/css">

  #sharedock { position: fixed; bottom: -12px; left: 0; width: 100%; height: 90px; z-index: 999; }

  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }

  .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP0mO4KFSFrSXYZ-LyiBOvELDtIFoDfKMYh7aPPRMF4X4KKVYV6CTzkvBhINN7vVT-Rj6Cvx08aVyi4PiCbD0ZfTLkD0gPUIGSGWxYC8RxOdZs4bXXjnuWIL6i4XCbYq7FIwOvknoGqVw/) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }

  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }

  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }

  </style>


<div id="sharedock">

  <div id="dock">

  <div class="dock-container">


<div class="addthis_toolbox"> 


 <div class="custom_images">


 <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>

  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>

<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>

<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>

<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>

<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>

  <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>

  </div>

  </div> 

  </div>

  </div>

  </div>

  

  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>

  <script type="text/javascript">

  $(function () { 

  // Dock initialize

  $('#dock').Fisheye(

  {

  maxWidth: 30,

  items: 'a',

  itemsText: 'span',

  container: '.dock-container',

  itemWidth: 50,

  proximity: 60,

  alignment : 'left',

  valign: 'bottom',

  halign : 'center'

  }

  );

  });

  </script>


إضغط حفظ ويعطيك العافية
من فضلك اضغظ لايك لمشاهدة لينك التحميل

2 التعليقات:

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار