اضافة ازرار التواصل الاجتماعي أسفل عنوان التدوينة يطفو عند النزول الى الاسفل

اضافة اليوم عبارة عن أزرار التواصل الاجتماعي (+facebook-twitter-google ...)لتمكين الزوارمن مشاركة الموضوع مع اصدقائهم في حساباتهم على مواقع التواصل الاجتماعي.
هذه الاضافة تتميز بكونها في شريط يطفو عند النزول الى الاسفل اي ان هذه الازرار تظل امام الزائر يمكنه في اية لحظة مشاركة موضوعك في مواقع التواصل الاجتماعي.

تركيب الاضافة :
1- من لوحة التحكم   >>>   قالب   >>>    تحريرhtml   (احفظ نسخة من القالب )
2- ابحث بواسطة  ctrl+f  عن  :

</head> 

3- انسخ الكود التاتلي قبله مباشرة :

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> /*<![CDATA[*/ #mblSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;} #mblSocialFloat td{padding:4px;margin:0;border:none;} #mblSocialFloat td iframe{max-width:82px;width:82px !important;} #mblSocialFloat.mblFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);} /*]]>*/ </style> <script type='text/javascript'> /*<![CDATA[*/ // Set the Top Offset $theOffset = 0; jQuery(document).ready(function(b){var a=b("#mblSocialFloat");a.wrap('<div id="mblSocialPlaceholder"> </div> ').closest("#mblSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#mblSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("mblFloatSocial"):a.removeClass("mblFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})}); /*]]>*/ </script> <script src='http://mbl-flipper-google-blogger.googlecode.com/files/mbl_blogger_pinit.js' type='text/javascript'/> <script type='text/javascript'> /*<![CDATA[*/ // Twitter (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs"); // Google + (plus) (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Stumbleupon (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Digg (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/ </script> </b:if>

4- الان ابحث عن :

<data:post.body/>

5- انسخ الكود التالي قبله مباشرة :

        <!-- http://rydnet.blogspot.com/ Floating Social Bar --> <b:if cond='data:blog.pageType == "item"'> <div class='mblSocialFloat' id='mblSocialFloat'> <table class='mblSocialFloat' width='100%'> <tr> <td> <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </td> <td> <iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/> </td> <td> <div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'> <data:post.body/> <script type='text/javascript'> w2bPinItButton({ url:"<data:post.url/>", thumb: "<data:post.thumbnailUrl/>", id: "<data:post.id/>", defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg", pincount: "horizontal" }); </script> </div> </td> <td> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/> </td> <td> <su:badge expr:location='data:post.url' layout='1'/> </td> <td> <a class='DiggThisButton DiggCompact'/> </td> </tr> </table> </div> </b:if> <!-- http://rydnet.blogspot.com/ Floating Social Bar -->

تنبيه : في بعض القوالب تجد <data:post.body/>  اكثر من مرة (انا عندي 5) قم بتجربة الكود قبل كل واحد ثم احفظ القالب فان لم تعمل الاضافة احذفه وضعه قبل الثاني و هكذا حتى تعمل الاضافة.
6- احفظ القالب.
مبروك تمت الاضافة .......
مع تحيات حمزة رمزي.......

اشكال اخرى من اضافات التواصل الاجتماعي:

اضافة صندوق المتابعة في google+

اضاف صندوق الاعجاب FACEBOOK مع الصوربتقنية jquery

اضافة صندوق المشاركة لقناةYOUTUBEمع صور المشتركين

اضاف صندوق المتابعة لTWITTER مع الصوربتقنية jquery

اضافة زر الارسال send + زر الاعجاب like لمدونات بلوجر من فيسبوك facebook

rydnet

[اذا اعجبك الموضوع هذه روابط النشر]

URL Of Post:

http://rydnet.blogspot.com/2013/11/Floating-Social-Bar.html

Paste This HTML Code On Your Page:

<a href="http://rydnet.blogspot.com/2013/11/Floating-Social-Bar.html">اضافة ازرار التواصل الاجتماعي أسفل عنوان التدوينة يطفو عند النزول الى الاسفل</a>

رابط الاضافة