إضافة أزرار المشاركة الى بتأثيرات احترافية - CSS3

,
إضافة أزرار المشاركة الى بتأثيرات احترافية - CSS3
تدوينة اليوم هي عبارة عن إضافة أزرار المشاركة بتأثيرات رائعة و خلابة
يمكنك معاينتها من هنا


كيفية تركيب هذه الإضافة
تابع معي
أولا قم بالبحث عن هذا الوسم  ]]></b:skin>
و ضع الكود التالي فوقه/قبله

 .flipShare{ width:90px; height:35px; margin:5px 0 5px 60px;text-align:center;line-height:35px;float:right; font-family:ge_ss_threeregular; }
.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;
}

ثانيا قم بالبحث عن هذا الوسم </body>
و ضع الأكود التالية فوقه/قبله

 <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> 



 <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>




الان ابحث عن هذا الكود <div class='post-footer'>   أو    <data:post.body/>
ستجده مكرر أكثر من مرة الأخير هو المقصود
أو إذا كان لديك أزرار مشاركة ابحث عن الاكواد الالخاصة بها و استبدلها بهذه الأكواد

 <div class="flipShare">
    <div class="front">هل أعجبك الموضوع</div>
    <div class="back-title">إذا شاركه</div>
    </div>
<div class="flipShare">
    <div class="front">على فيسبوك</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">على تويتر</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'>غرد</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">على لينكدون</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">طباعة الصفحة</div>
  <div class="back-print">
<a href='javascript:print(document)' title='طباعة'><img alt='print' height='16' style='margin-right:5px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4RL1LVl-HyE88t_JuGcSe84TnkwnhIsy4R5GD16650xdtj4WdgZkR2R8PmBYrq64O5uznaP68cGxeO4PcD8KRJmnQp9NPiRNz9yC2u9mh4NsVe0YaYrszDTAxSYQMDrZamG90oV8VLm4j/s1600/iconprinter.png' title='طباعة' width='16'/>طباعة الصفحة</a>
  </div>
</div>
<div style='clear:both'></div>
        </div>


أتمنا أن تكون الإضافة قد أعجبتكم
ولا تنسونا من تعليقاتكم المشجمعة

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)