قوالب اسفلت

الكل تطوير الانترنت قوالب بلوجر تاريخ قوالب عرض الالعاب قوالب للاغانى قوالب للافلام قوالب للصحه

من اجمل اضافات بلوجر واهم اضافات بلوجر اضافة المشاركة الاجتماعية الافقى ينزل مع نزول الصفحة داخل التدوينات, واهم ميزة انها ملفته جدا للإنتباه وبشكل جميل, وتحمل الاضافة العديد من ازرار المشاركات الاجتماعية وهى :

( Twitter, Facebook, Google plus, Pinterest, StumbleUpon Digg )

مشاهدة الاضافة من هنا

كيفية اضافة الشبكات الاجتماعية لمدونتك ؟؟

بعد تسجيل الدخول الى لوحة التحكم لدى بلوجر نختار قالب ثم تحرير HTML ونبدأ بوضع الاضافة.

فقط ثلاث خطوات ثم انتهاء الاضافة..

اول خطوة: اضافة تقنية JQUERY :

نبحث عن الوسم </head> ثم نضيف قبله مباشرة الكود التالى بعد التأكد انه غير موجود :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.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[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");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 type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/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;'>

, ونضيف قبلة مباشرة الكود التالى :

<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/AVvXsEhFsiQw7O6HDAePBjaKswffAXeXISalADzjrr9BnG8U98uJeiqfEvmpu7V9LRGOfY7KyDBDO2VIacTwNjM6st8LcwgjeVs5KErK_PUe-RAb5h_qLfTk6lfvZYUzgaeILVhyUFho0qpkY5wc/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>

ثم نضغط على حفظ القالب ومبروك الاضافة الجميلة

Unknown 0 تعليقات

التسميات

Follow Us