شرح طريقة اضافة مواقع التواصل والنشر بشكل عائم في بلوجر SHARING BAR WIDGET FOR BLOGGER

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

SHARING BAR WIDGET FOR BLOGGER

نبدأ الشرح ومش هاطول عليكم فقط 3 خطوات ونكمل الشرح

اول شئ نقوم بعملة هو الدخول على حساب بلوجر من هنا http://www.blogger.com

ثم ندخل على قوالب كما بالصورة التالية

وقبل التعديل على اي شئ نقوم بأخذ نسخة احطياطية

هنلاقيها على الشمال كما موجودة في الصورة هنضغط عليها ونختار تنزيل

والان جاء دور التطبيق على المدونة  نضغط على تحرير HTMl

ولا ننسى توسيع القالب بوضع العلامة الخاصة بتوسيع القالب

ونقوم بالبحث على العنصر التالي </head> ولتسهيل عملية البحث نضغط على Ctrl + f

ثم نضع قبلة مباشر هذا الكود

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

ثم ايضا نقوم بأضافة هذا الكود بعد العنصر هذا </head>

  

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #w2bSocialFloat td{padding:4px;margin:0;border:none;}
 #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
 #w2bSocialFloat.w2bFloatSocial{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[*/
jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());w2bTopPos=a.offset().top;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){b(this).scrollTop()>=w2bTopPos?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script>
<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/> وغالبا يكون العنصر هذا مكرر نضيق الكود التالي قبل العنصر الثاني مباشر 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table  width="100%" class="w2bSocialFloat">
 <tr>
  <td>
   <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
  </td>
  <td>
   <iframe 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;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
  </td>
  <td>
   <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
    <data:post.body/>
    <script type="text/javascript">
     w2bPinItButton({ 
      url:"<data:post.url/>", 
      thumb: "\<data:post.thumbnailUrl/>", 
      id: "<data:post.id/>", 
      defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCzlSvxk9lVnrXDQ5cyXGmWtx2eTW8O-Q6Q3v0sNJ8ljWB8SRHWkUhsJS1Yc9HY_KvCJqKvezGsoyPEYqAtVZmmZKlLaSqVtsM9eDngRBOHDCmt3PcWhCAt90de0zd7AhwNA9d1mXBWOz/s1600/w2b-no-thumbnail.jpg", 
      pincount: "horizontal" 
     }); 
    </script> 
   </div>
  </td>
  <td>
   <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
  </td>
  <td>
   <su:badge layout="1" expr:location="data:post.url"></su:badge>
  </td>
  <td>
   <a class="DiggThisButton DiggCompact"></a>
  </td>
 </tr>
</table>
</div>
</b:if>

ونقوم بالضغط على حفظ ونقوم بمشاهدة موضوع من البلوجر الذي تم اضافة الاداه فية لانشاهد ما فعلناه

وشكرا الموضوع والشرح حصري لمدونة توب نيو

اكتب تعليك ولو بكلمة شكر ولو في اي استفثار انا موجود