كيفية إضافة أزرار المشاركات الاجتماعية مع التاثير تحت كل تدوينة لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

اليوم سوف نتعرف على طريقة إضافة أزرار المشاركات الإجتماعية تحت كل تدوينة  لمدونات بلوجر  ، إلإضافة  رائعة جدا وجميلة تضفي على مدونتك الإحترافية .

- طريقة التركيب : 

1- أدخل إلى مدونتك | أختر لوحة التحكم >> قالب >> تحرير قالب : html

2- إبحث عن الوسم : ]]></b:skin>

3- أضف الكود التالي فوقه :

 .flipShare{ width:90px; height:35px; margin:5px 60px 5px 0;text-align:center;line-height:35px;float:left }
.flipShare > .front{
    position:absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    background:#333;color:#fff; width:140px; height:35px;
    border-radius: 3px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}
.flipShare > .back-fb,.flipShare > .back-tw,.flipShare > .back-g,.flipShare > .back-in,.flipShare > .back-pin,.flipShare > .back-print,.flipShare > .back-title{
    position:absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    width:140px; height:35px; border-radius: 3px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}
.flipShare:hover > .front{
    transform: perspective( 600px ) rotateY( -180deg );
}
.flipShare:hover > .back-fb,.flipShare:hover > .back-tw,.flipShare:hover > .back-g,.flipShare:hover > .back-in,.flipShare:hover > .back-pin,.flipShare:hover > .back-print,.flipShare:hover > .back-title{
    transform: perspective( 600px ) rotateY( 0deg );
}
.flipShare > .back-fb{
    background-color: #324b81;
}
.flipShare > .back-tw{
    background-color: #01A7dE;
}
.flipShare > .back-g{
    background-color: #BA3227;
}
.flipShare > .back-in{
    background-color: #136F9B;
}
.flipShare > .back-pin{
    background-color: #B01C23;
}
.flipShare > .back-title,.flipShare > .back-print{
    background-color: #333;vertical-align:middle;color: #fff;
}
.flipShare > .back-print a{
    color: #fff;
    text-decoration:none;
}

4- إبحث عن الوسم :  <data:post.body/>  هذا الوسم مكرر أكثر من مرة المقصود الثاني منه  أو الثالث .

5- أضف الكود التالي تحته :

 <div class="flipShare">
    <div class="front">هل أعجبك الموضوع ?</div>
    <div class="back-title">شارك هذا الموضوع</div>
    </div>
<div class="flipShare">
    <div class="front">شارك على FB</div>
  <div class="back-fb">
      <span style='position:absolute;top:-7px;left:10px'>
      <span class='fb-like' data-href='http://www.kompiajaib.com/2014/09/membuat-menu-vertical-dengan-details.html' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90'></span></span>
  </div>
</div>
<div class="flipShare">
    <div class="front">شارك علىTwitter</div>
  <div class="back-tw">
      <span style='position:absolute;top:5px;left:10px'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-text='Membuat Menu Vertical Dengan Details And Summary Tag' data-url='http://www.kompiajaib.com/2014/09/membuat-menu-vertical-dengan-details.html' data-via='' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
</span>
  </div>
</div>
<div class="flipShare">
    <div class="front">شارك على G+</div>
  <div class="back-g">
<span style='position:absolute;top:5px;left:10px'>
<span class='g-plusone' data-count='true' data-href='http://www.kompiajaib.com/2014/09/membuat-menu-vertical-dengan-details.html' data-size='medium'>
</span>
</span>
  </div>
</div>
<div class="flipShare">
    <div class="front">شارك على Likedin</div>
  <div class="back-in">
      <span style='position:absolute;top:5px;left:10px'>
<script type='IN/Share'></script>
</span>
  </div>
</div>
<div class="flipShare">
    <div class="front">شارك على Pinterest</div>
  <div class="back-pin">
      <span style='position:absolute;top:5px;left:7px;border:none;'>
<a data-pin-config='beside' data-pin-do='buttonPin' href='http://pinterest.com/pin/create/button/?url=http://www.kompiajaib.com/2014/09/membuat-menu-vertical-dengan-details.html' title='Pin It'><img alt='pinit' height='20' src='//assets.pinterest.com/images/pidgets/pin_it_button.png' title='Pin It' width='40'/></a>
</span>
  </div>
</div>
<div class="flipShare">
    <div class="front">أطبع هذه الصفحة</div>
  <div class="back-print">
<a href='javascript:print(document)' title='Print This Page'><img alt='print' height='16' style='margin-right:5px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD8MNfKupjQQXFWc_QFAPI5VWYLmNoEA7F9ORIMn8mc-s4gYOHARlufBezDQq2Pwk-I1557INofa14ffUNNCUSFzZjz_7phqibhm3Mux9uqNqLYWoWeg5T1RC0fOwZ_xRVO5K7zJkUtPke/s1600/iconprinter.png' title='Print This Page' width='16'/>Print This Page</a>
  </div>
</div>
<div style='clear:both'></div> 

6- إبحث عن الوسم : <body>

7- أضف الكود التالي تحته :

 <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.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> 

8- إبحث عن الوسم التالي : </body>

9 - أضف الكود التالي فوقه :

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

- وأخيراً إحفظ القالب .