السبت، 21 ديسمبر 2013

إضافة منزلقة لأزرار المشاركة على المواقع الإجتماعية



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

ندخل في موضعنا الاضافة منزلقة جميله و مميزه ولتركيب الإضافة على مدونتك قم بإتباع التالي :
  • اذهب الي لوحة تحكم بلوجر
  • ثم القالب
  • تحرير 
  • قم بالبحث عن هذا الوسم   </head>   و اضف فوقة الكود التالي :
   ملاحظه    قبل إضافة الاضافة يرجى اخذ نسخه احتياطيه لقالب مدونتك .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

ثم اضف الكود التالي قبل او فوق هذا الوسم   <data:post.body/>   .


<!-- 3arb1.blogspot.com Floating Social Bar -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</td>
<td>
<div class='w2bPinitButton' expr:id='&quot;w2bPinit-&quot; + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'>
<data:post.body/>
<script type='text/javascript'>
w2bPinItButton({
url:&quot;<data:post.url/>&quot;,
thumb: &quot;<data:post.thumbnailUrl/>&quot;,
id: &quot;<data:post.id/>&quot;,
defaultThumb: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHp7YzY9IO8YrPuJoIGA4-6hVzJ04k0wblzI1EegF76rYY9GBDk3rI4bBSEEUppZXVcL1gV1LKhiTO4SjFnwsEVW7MzWCdIOF7m4ZhHyO54lTVBRPQvqZWFZmGRTPV4ZPJcxBK0TO1d2jw/s1600/w2b-no-thumbnail.jpg&quot;,
pincount: &quot;horizontal&quot;
});
</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>
<!-- 3arb1.blogspot.com Floating Social Bar -->
و الان حفظ و مبروك الاداه .

تحياتي

0 التعليقات:

إرسال تعليق