نيو ويب بلوجر { NEW WEB }: بشكل مختلف اضف أزرار المشاركة لقوالب بلوجر

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

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

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

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

 من لوحة تحكم المدونه اختر قالب

  اختر تحرير HTML

 ابحث عن هذا الكود  

وضع الكود التالى بعده

سوف يكون الأخير او الثانى اللى قبل { تابع المزيد } ممكن يكون الثالث ...

<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='ahmed14500' 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>

بالأخر حفظ مبروك عليك الأضافة ...

اى استفسار ضع رد وسيتم الرد على استفساراتكم فى اسرع وقت ممكن انشاء الله ...

عنوان التدوينة: بشكل مختلف اضف أزرار المشاركة لقوالب بلوجر
تقييم : 100من 100مرتكز على 53 تقييم.
الكاتب / المدير : Unknown
التسميات : أضافات بلوجر
توقيت النشر : 3:54 م

عدد التعليقات : 0

عدد المشاهدات :

الرجاء مشاركة الموضوع لتعم الفائده على الجميع

فيس بوك

غرد

تويتر

جوجل +

لينكدان

get