الشريط العائم لأزرار النشر على المواقع الاجتماعية

Share |

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

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

أحرص على أن تختار ادوات النشر بالمواقع الاجتماعية ذات الطابع المميز والتي لا تزعج الزوار اياً كان ,

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

مثلاً الاداة التي سنستعرضها اليوم في هذة التدوينة , اداة رائع و مميزة وليست مزعجة

حيث ان هذة الاداة لا تخرج عن مكان المحتوى او الموضوع وتنزل مع الزائر كلما نزل في الموضوع ,

هذة الاداة تذكر الزائر ولا تزعجة ,

وهنا صورة توضح عمل هذة الاداة:.

ملاحظة : هذة الصورة من www.mybloggerlab.com

مميزات الاداة :.

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

شرح تركيب هذة الاداة على مدونة بلوجر :.

#الخطوة الاولى :.

أتبع التعليمات المذكورة وطبقها , ولن تجد صعوبة في هذة الاداة بإذن الله

إذهب الى لوحة تحكم بلوجر >> ثم إذهب الى القالب
خذ نسخة أحتياطية للقالب (خطوة أختيارية لكن يفضل )
إذهب الى تحرير HTML
إبحث عن علامة   </head> والصق الكود التالي فوقة مباشرة 

(ملاحظة الكود التالي يحتوي على css + HTM + JavaScript)

<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/> ( قد تجد أثنان الثاني هو المطلوب )

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

<!-- al-a7mari.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/AVvXsEivCj3lB5y4WzVMZWPGuQANv0XRZBCU9ncJNQWzsKKNbKcq3uTQD9aA8pcHLPIHArtxnATDLiqehk10FupS2erjYatWPkiW4aR7jUbcGoPtxBvM4Eq2El1udS_9zSKDWEYPLGz9c5AGs7eG/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>


<!-- al-a7mari.blogspot.com Floating Social Bar -->

في الختام نعتذر على الاطالة لكن نتمنى ان النتيجة كانت مرضية لكم .

بسم الله الرحمن الرحيم