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

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

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

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

من لوحة تحكم المدونه اختر قالب
اختر تحرير HTML
ابحث عن هذا الكود

<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: "";
    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 == "item"'>
 
<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='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=85&show_faces=false&action=like&colorscheme=light&font&height=21"' 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)?'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>
<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('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>
  جوجل +
 </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>

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

• غرد
• شارك
• شارك
• شارك
• شارك

عن الكاتب محترف البلوجر

أحمد التونسي : من تونس, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة محترف البلوجر الافضل لكم تعبر عما أهواه .

مواضيع ذات صلة