تقنيات Pro

في هذا الدرس سوف نقوم بشرح كيفية إضافة أزرار المشاركة والإعجاب أسفل المواضيع في بلوجر، وهذه الإضافة تتكون من أهم مواقع التواصل الاجتماعي وهم الفيسبوك وتويتر ثم جوجل + ، بحيث أن كل موقع لتواصل الاجتماعي يحتوي على زرين، فالفيسبوك به زر أعجبني وزر مشاركة، وتويتر به زر غرد وزر تابع، ثم جوجل + به زر G+1 وزر مشاركة.

للمعاينة اضغط على زر المعاينة أسفل الصورة.

المعاينة

طريقة الإضافة

اذهب إلى المدونة ç قالب ç تحرير HTML

إضافة رمز CSS

ابحث عن الرمز التالي بضغط على ctrl+f

ثم قم بنسخ الرمز التالي ولصقه فوق الرمز السابق

#button-share{ width:650px; height:150px; background-color:#fff; border:0px; border-radius:10px; margin-top:25px; }
#button-share h1{ font-family:"Times New Roman", Times, serif; font-size:20px; color:#00AAEE; text-align:right;}
#face{
float:right; margin-right:50px; width:145px; height:105px; background-color:#47639E; border:0px; border-radius:10px;}
#face h1{ font-family:"Times New Roman", Times, serif; font-size:20px; color:#FFF; margin-top:10px; margin-right:10px;}
#face img{ width:45px; height:45px; float:left;}
#face1{ margin-right:15px; margin-top:0px; }
#twitter{ float:right; margin-right:50px; width:145px; height:105px; background-color:#59B7DB; border:0px; border-radius:10px; }
#twitter h1{ font-family:"Times New Roman", Times, serif; font-size:20px; color:#FFF; margin-top:10px; margin-right:10px; }
#twitter img{ width:45px; height:45px; float:left; }
#twitter1{ margin-right:15px; margin-top:15px; }
#google{ float:right; margin-right:50px; width:145px; height:105px; background-color:#CF273A; border:0px; border-radius:10px; }
#google h1{ font-family:"Times New Roman", Times, serif; font-size:20px; color:#FFF; margin-top:10px; margin-right:10px;}
#google img{ width:45px; height:45px; float:left; }
#google1{ margin-right:15px; margin-top:0px; }
.fb-like{ margin-bottom:10px;}

إضافة رمز HTML

ابحث عن الرمز التالي بضغط على ctrl+f

ملحوظة: يوجد من الرمز السابق أكثر من واحد، جرب في الأول ثم الذي بعده حتى ينجح الأمر

ضع الرمز التالي أسفل الرمز السابق

<div id='face'>
<img height='45' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihd2mmD7l3ncXcsMChGpwHAZGEAGE6XJPNRS-IxgJl_swuQDJ2lHtunG59MK_zQ2K8axjsjVDLvdj8mFtvo0CVaJTDEJJwgIA99l7AetSzcJ7iQzSCmo-0xAdmPLj_dMc-WXRGurv2UPqC/h120/facebook.png ' width='45'/>
<h1>
فيسبوك</h1>
<div id='face1'>

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ar_AR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

</div>
</div>
<div id='twitter'>
<img height='45' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jhipEOTDElJm6yDxZVCVHHufbOATRfzVsAtLUWn14FRI7EWttNcfS4X3Py-ci-OlHW854U42nVU2TjXPu-euivAxTspX35AwDl-tAxMi-pq2R9Wq_9XwQmjTZxvqE9U_awxPpDSdo21C/h120/twitter.png' width='45'/>
<h1>
تويتر</h1>
<div id='twitter1'>

<a class='twitter-share-button' data-lang='ar' href='https://twitter.com/share'>تغريد</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<br/>

<a class='twitter-follow-button' data-lang='ar' data-show-count='false' data-show-screen-name='false' href='https://twitter.com/#'>تابِع @MED_ELBOUACHRI</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

</div>
</div>
<div id='google'>
<img height='45' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo6d6VV1t6r0gydUer3MGv0t7y0BuCEHJExwPLtL5OHVCbtDpjziqRYI_v_-zgPM4WHGiyKkbheF2zwV5YTD02BoMb9JxX5ZQTJOPi-GQsAZltl5iumUL8GvvUVkz3zos0XawtcQ9v-y8h/h120/google%252B.png ' width='45'/>
<h1>
جوجل +</h1>
<div id='google1'>

<div class='g-plusone' data-size='small'/>

<script type='text/javascript'>
  window.___gcfg = {lang: 'ar'};

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<div class='g-plus' data-action='share' data-annotation='bubble'/>

<script type='text/javascript'>
  window.___gcfg = {lang: 'ar'};

</div>
</div>
</div>

قم باستبدال # بحسابك في تويتر

ثم احفظ القالب

مرحبا بكم في تقنيات Pro

Med Man

أقسام الموقع

إشترك في موقعنا

إضافة أزرار المشاركة والإعجاب أسفل المواضيع بشكل مميز

2 التعليقات:

اشترك في قناتنا على اليوتوب

شائع هذا الأسبوع

تابعنا علي الفيس بوك

المشاركات الشائعة