إضافة أداة المشاركة الإجتماعية بتقنية jQuery لبلوجر

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

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

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

والان ساترككم مع 

صورة للمعاينة:

شرح الإضافة :

من لوحة تحكم المدونة أذهب إلي قالب ثم تحرير 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/AVvXsEjk5MIYIlXs4C-frlY5kMSEwUkUJdXngCujqC0vAwFd2WR-Cq_NooQJq_-WqBfSbCDRec9UT9199utitSibixDmXBuohoYhwBKGaVSmiAHAjB6gR_GkFspcJauX7Sx72qmFtNGqGQd14eg/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>

ثم أحفظ

اترك تعليقك في الاسفل  

منشورة في: اضافات وادوات بلوجر, بلوجر, دروس وشروحات بلوجر, jQuery