انها اداة المشاركة الاجتماعية صممها المصمم شان ديب الذي يعمل في شركة جي كويري

م اقدم لكم اضافة جميلة خفيفة علي المتصفح ولا تاخذ مساحة من مدونتك بتقنية الجاكوري انها اداة المشاركة الاجتماعية  صممها المصمم شان ديب الذي يعمل في شركة جي كويري 

مميزات هذه الاضافة 

* التحرك علي جانب المدونة مع متصفح المدونة

 * عدم التسبب بإزعاج المتصفح اذ تظهر برغبة الزائر 

والان ساترككم مع صورة للمعاينة 

شرح الإضافة :

من لوحة تحكم المدونة أذهب إلي قالب ثم تحرير html :

 أبحث عن الوسم التالي:

</head>

ألصق فوقه مباشرة الكود التالي :

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

<script src='http://apis.google.com/js/plusone.js' type='text/javascript' >{lang: &#39;en-US&#39;} </script>

في حال سبق و كانت مدونتك تحتوي علي مكتبة جي كويري تجنب وضع السطر الأول

  و الآن أذهب إلي التخطيط و أختر إضافة أداة html/javascript

و ضع الكود التالي

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function () { jQuery(".hbslidebox").hover(function () { jQuery(this).stop().animate({ left: "0" }, "medium"); }, function () { jQuery(this).stop().animate({ left: "-70" }, "medium"); }, 500); }); /*]]>*/ </script> <style type="text/css"> .hbslidebox { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFmQnWphHf2ghJR9rN9LowKMyBLiq94YzEbKqu88MXUuYxlxNnKa9ib8Cnr4D4nEdKOMM-6mOKzjtiS8jz_cb3zrVFesMIVz7CCrlD8r7RE1hHHzkNyuQOO8v2G7-_MKXWxWLcs2y4yg/s1600/helperblogger.com-tab_left_vertical.png") no-repeat scroll right top transparent !important; display: block; float: left; height: auto; padding: 0 45px 0 0px; width: 65px; z-index: 99999; position:fixed; left:-70px; top:20%; } .hbslidebox div { border:none; position:relative; display:block; } #floatingbuttons { background: #fff; border-radius: 5px 5px 5px 5px; border: 1px solid #CCCCCC; float:left; padding:0 0 3px 0; bottom:15%; z-index:399; } #floatingbuttons .floatbutton { float:left; clear:both; margin:5px 4px 0 4px; } .addbuttons { clear:both; text-align:center; padding-top:5px; } .addbuttons a span.getfloat, .addbuttons a span.sharebuttons { color:#000; background:none; font-family:arial, sans-serif; display:block; font-size:9px; font-weight:bold; text-decoration:none; line-height:11px; } .addbuttons a:hover span { color:#fff; background:none; text-decoration:underline; } </style> <div class="hbslidebox" style=""> <div> <div id='floatingbuttons' title="Share this post!"> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"> </script> <script type="text/javascript"> (function () { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script> <!-- Medium Button --> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> <div class='floatbutton' id='facebook'> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='google+1'> <g:plusone size="tall"></g:plusone> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> </div> <div class="addbuttons"> <a href="http://esrare.blogspot.com/2012/09/jQuery-SHARE.html" title="أضغط هنا لتحصل علي الإضافة!"><span class="getfloat">إضافة المشاركة الإجتماعية</span></a> </div> </div> </div> </div>

ثم أحفظ