surfe.pro أزرار رائعة خاصة بالمشاركات أسفل مواضيع المدونة - إربحــوا

    • أحدث المشاركات

    إعلان أعلى المشاركات

    السبت، 31 يناير 2015

    الرئيسية بلـوجـر أزرار رائعة خاصة بالمشاركات أسفل مواضيع المدونة

    أزرار رائعة خاصة بالمشاركات أسفل مواضيع المدونة

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





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

     مع الإضافة الأولى بالشكل التالي وفي الحقيقة تبدوا بالشكل الرمادي وعند مرور مؤشر الماوس عليها تبدوا بالشكل التالي 



    ولتركيب هذه الإضافة إذهب إلى قالب ثم تحرير 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: &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>        

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

    ******************************************

    أما الإضافة الثانية فهي مثلها فقط بها بعض التغييرات كما في الصورة التالية
    ولتركيبها قم بنفس الطريقة السابقة

    الكود الخاص بالإضافة :

       <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Open+Sans);
    @import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
    #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: 600px;
        height: 40px;
        display: block;
        margin: 20px 0px -5px;
    }

    .button {
        float: left;
        margin-right: 10px;
        width: 110px;
        background:#DE14E1;
        border: 1px solid #cbcbcb;
        border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        padding: 10px 5px 5px;
        box-sizing: border-box;
    }

    .button i {
        background: #353535;
        color: #eaeaea;
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        width: 70px;
        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: 100px;
        font-family: GESSTwoMediumRegular;
        background: #d8d8d8;
        width: 100%;
        height: 65px;
        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: 65px;
        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>  


    التصنيف
    شارك الموضوع
    Author Image

    عن: مـــدون

    By -
    العمل على الانترنت

    Post Top Ad

    نبذة عن الكاتب

    مـدون هــاوي في مجــال التقنيــة

    روابط الصفحات الاخرى

    عن الموقع

    مــوقــع مختــص في مجــال التقنيــة ويحــاول إيجــاد كــل مــاهــو جــديــد لإفــادة الجميــع
    إقرأ المزيد

    أخترنا لكم

    تواصل معنا عبر ترك رسالة أدناه

    الاسم

    بريد إلكتروني *

    رسالة *