شرح إضافة شريط أزرار المشاركة تحت عنوان التدوينة|حصري

السلام عليكم ورحمة الله
في موضوع اليوم سنرى كيفية إضافة شريط تحت عموان كل تدوينة|موضوع
حيث يجتوي هذا الشريط على أزرار المشاركة الخاصة
بالمواقع الإجتماعية مثل تويتر وفيسبوك و جووجل بلس والمزيد
حيث تساعد هذه الإضافة بشكل كبير على نشر مواضيع وتدوينات المدونة
على الشبكات الإجتماعية بشكل سهل وسلس.
كما أن شكل الإضافة جذاب وله تأثير إيجابي ويعطي المدونة طابعا
احترافيا...وكذلك تساهم في إشهار المدونة...
social sharing buttons widget

...........................................................................................................
إضافة شريط أزرار المواقع الإجتماعية
...........................................................................................................

نذهب إلى تصميم|تحرير HTML|
نأخذ نسخة احتياطية من القالب
توسيع القالب
CTRL+F
نبحث عن الكود :
<data:post.body/>
قبله مباشرة نلصق الكود التالي:


<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>
<td><!-- Twitter -->
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>
<td><!--Facebook-->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>
<td><!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;مدونة عرب بلس&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>
<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>


لتغيير لون الإضافة فقط عدل على #FEE6E6
غير مدونة عرب بلس باسم مدونتك


ابحث عن الكود :
]]></b:skin>
بعده مباشرة ألصق الكود التالي :


<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

تخطى المرحلة السابقة إن كان لديك زر  google + في المدونة


احفظ القالب ومبروك عليك الإضافة
تحياتي
في انتظار تفاعلكم

4 Comments

  1. أخي الكريم أريد أن أصغر عرضها قليلا كيف أفعلها؟؟؟

    ReplyDelete
  2. للأسف أخي هذه الإعدادات افتراضية

    ReplyDelete
  3. شكرا للك نتمنى منك المزيد

    ReplyDelete