ازرار المشاركه اسفل المواضيع بلوجر

ازرار المشاركه اسفل المواضيع بلوجر

تعتبر ازرار المشاركه من اهم عوامل زيادة شهرة المدونه لانها تسهل من نشر مواضيع المدونه على شبكات التواصل الاجتماعى اليوم اتيت لكم باضافة ازرار المشاركه اسفل المواضيع بلوجر
هناك الكثير من الاشكال لازرار المشاركه على مواقع التواصل الاجتماعى ولكن لن تجد اجمل من هذه الاضافه جربها بنفسك

 اضافة ازرار المشاركه اسفل المواضيع بلوجر متجاوبه وتعمل على جميع انواع المتصفحات معاينه الاضافه اسفل الموضوع

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

 1- من لوحة تحكم المدونه اختر قالب
 2- اختر تحرير HTML
 3- ابحث عن هذا الكود <data:post.body/> وضع الكود التالى بعده

<b:if cond='data:blog.pageType == "item"'>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
    width: 475px;
    overflow: hidden;
    margin: 20px auto 10px;
}
 
.social-sharing-title{
    background: #E74C3C;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    width: 643px;
    height: 40px;
    display: block;
    margin: 20px 0px -5px;
}
 
.button {
    float: left;
    margin-right: 10px;
    width: 110px;
    background:#E2E2E2;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 15px 5px 5px;
    box-sizing: border-box;
}
 
.button i {
    background: #353535;
    color: #eaeaea;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
 
.social-container {
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    color: #353535;
    line-height: 54px;
    font-family: GESSTwoMediumRegular;
    background: #d8d8d8;
    width: 100%;
    height: 45px;
    box-shadow: inset 0 -2px 4px #c7c7c7;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
    overflow: hidden;
}
 
.slide, .button i {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
 
.slide {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 22px 22px;
    -o-border-radius: 0 0 22px 22px;
    -ms-border-radius: 0 0 22px 22px;
    -moz-border-radius: 0 0 22px 22px;
    -webkit-border-radius: 0 0 22px 22px;
 /* top fix */
    transition: all 0.2s ease-in-out;
    position: absolute;
    height: 45px;
    width: 100%;
    top: -35px;
}
 
.slide::after {
    content: &quot;&quot;;
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    box-sizing: border-box;
    bottom: 0;
}
 
.button:hover .slide {
    top: 0;
    border-radius: 3px;
}
 
.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
    top: 1px;
    position: relative;
}
 
.twitter iframe {
    width: 79px !important;
}
 
.google #___plusone_0 {
    width: 60px !important;
}
 
.button.facebook:hover i, .facebook .slide {
    background: #305c99;
    color: white;
}
 
.button.twitter:hover i, .twitter .slide {
    background: #00cdff;
    color: white;
}
 
.button.google:hover i, .google .slide {
    background: #d24228;
    color: white;
}
 
.button.linkedin:hover i, .linkedin .slide {
    background: #007bb6;
    color: white;
}
 
.button.linkedin {
    margin-right: 0;
}
 
.credit {
   display: none;
}
 
.credit a {
   display: none;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 
<div class='social-sharing-title'>الرجاء مشاركة الموضوع لتعم الفائده على الجميع</div>
<div id='buttons'>
<div class='facebook button'>
 <i class='icon-facebook'/>
 <div class='social-container fb'>
  <div class='slide'>
   <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:21px; margin: 0px; }'/>
  </div>
فيس بوك
 </div>
</div>
<div class='twitter button'>
 <i class='icon-twitter'/>
 <div class='social-container tw'>
  <div class='slide'>
   <a class='twitter-share-button' data-hashtags='المايسترو' data-via='iTh3Maestro' href='https://twitter.com/share'>
   غرد </a>
   <script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
  </script>
  </div>
  تويتر
 </div>
</div>
<div class='google button'>
 <i class='icon-google-plus'/>
 <div class='social-container tw'>
  <div class='slide'>
   <!-- Place this tag where you want the +1 button to render. -->
   <div class='g-plusone' data-size='medium'>
   </div>
   <!-- Place this tag after the last +1 button tag. -->
   <script type='text/javascript'>
    (function() {
      var po = document.createElement(&#39;script&#39;);
      po.type = &#39;text/javascript&#39;;
      po.async = true;
      po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
      var s = document.getElementsByTagName(&#39;script&#39;)[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
  </div>
  جوجل +
 </div>
</div>
<div class='linkedin button'>
 <i class='icon-linkedin'/>
 <div class='social-container tw'>
  <div class='slide'>
   <script src='//platform.linkedin.com/in.js' type='text/javascript'>
 lang: en_US
   </script>
   <script type='IN/Share'/>
  </div>
   لينكدان
 </div>
</div>
</div>
<div class='credit'>
  <a href='http://goo.gl/vnNkHv' target='_blank' title='Get'><span style='font-size: x-small;'>get</span></a></div>
</b:if></b:if>

الان اضغط حفظ
اى استفسار او تعديلات على الاضافه ضع رد وسيتم الرد على استفساراتكم فى اسرع وقت ممكن

HashtagsTech

هاشتاج التقنيه قوالب واضافات بلوجر وجديد الاخبار التقنيه

Facebook

Twitter

Instagram

شارك هذا الموضوع