اضافة اليوم عبارة عن أزرار التواصل الاجتماعي (+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+

rydnet

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

URL Of Post:



Paste This HTML Code On Your Page:


التعليقات : 1

Alaa Shafeek

شكرًا لك على الموضوع
الكود لم يشتغل عندي في مدونتي لذلك جربت الكود من موقع أجنبي يمكنك مشاهدته من هنا
http://www.bloggerwidgetgenerators.com/2014/02/floating-social-sharing-buttons-for-blogger.html

واعذرني على ازعاجك... لا اقصد تخريب موضوعك

أخي الكريم، رجاء قبل وضع أي كود في تعليقك، حوله بهذه الأداة ثم ضع الكود المولد لتجنب اختفاء بعض الوسوم.
الروابط الدعائية ستحذف لكونها تشوش على المتتبعين و تضر بمصداقية التعليقات.