MASIGNASUKAv101
1938498085333396857

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

أضف ازرار مواقع التواصل الاجتماعي  إلى مدونتك بأسلوب متحرك
أضف تعليق
10‏/03‏/2014
السلام عليكم ورحمة الله وبركاته
نقدم لكم اليوم أزرار مواقع التواصل الاجتماعي بأسلوب جميل يمكنك إضافة صفحات موقعك على كل منها من خلال هذه الازرار لتمكين زوار موقعك من العثور عليك في مواقع التواصل ومتابعة جديدك

صورة الإضافة:

مثال حي:


Google+

YouTube

كيف تضيفها إلى مدونتك

 أذهب إلى لوحة التحكم في مدونتك - >> تخطيط - >> إضافة أداة ثم أختر اداة HTML / جافا سكريبت ثم أضف الكود التالي داخل الأداة


<style>
.button {
    background: #DCE0E0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    margin: 4px;
    overflow: hidden;
    width: 156px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.icon {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    text-align: center;
}
.icon i {
    color: #fff;
    line-height: 42px;
}
.slide {
    z-index: 2;
    display: block;
    margin: 0;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 118px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
}
.slide p {
    font-family: Open Sans;
    font-weight: 400;
    border-left: 1px solid #fff;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 16px;
    left: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
}
.button .slide {
    -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;
    transition: all 0.2s ease-in-out;
}
.facebook iframe {
    display: block;
    position: absolute;
    right: 23px;
    top: 10px;
    z-index: 1;
}
.twitter iframe {
    width: 90px !important;
    right: 5px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}
.google #___follow_0 {
    width: 70px !important;
    top: 10px;
    right: 45px;
    position: absolute;
    display: block;
    z-index: 1;
}
.youtube #___ytsubscribe_0 {
    top: 10px;
    right: 1px;
    position: absolute;
    display: block;
    z-index: 1;
}
.facebook:hover .slide {
    left: 180px;
}
.twitter:hover .slide {
    top: -40px;
}
.google:hover .slide {
    bottom: -40px;
}
.youtube:hover .slide {
    left: -150px;
}
.facebook .icon, .facebook .slide {
    background: #305c99;
}
.twitter .icon, .twitter .slide {
    background: #00cdff;
}
.google .icon, .google .slide {
    background: #d24228;
}
.youtube .icon, .youtube .slide {
    background: #b31217;
}
</style>
  <div class="facebook button">
    <i class="icon">
      <i class="fa fa-facebook"></i>
  </i>
  <div class="slide">
    <p>
      Facebook
    </p>
  </div>
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/mdadice&amp;like&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowtransparency="true">
  </iframe>
  </div>
  <div class="google button">
    <i class="icon">
      <i class="fa fa-google-plus"></i>
  </i>
  <div class="slide">
    <p>
      Google+
    </p>
  </div>
  <div class="g-follow" data-annotation="bubble" data-href="//plus.google.com/+مدادالجليد" data-rel="publisher"></div>

  <script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
  </div>
  <div class="youtube button">
    <i class="icon">
      <i class="fa fa-youtube"></i>
  </i>
  <div class="slide">
    <p>
      YouTube
    </p>
  </div>
  <div class="g-ytsubscribe" data-channel="monemoor" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
    <script src="https://apis.google.com/js/platform.js"></script>
<script>
  function onYtEvent(payload) {
    if (payload.eventType == 'subscribe') {
      // Add code to handle subscribe event.
    } else if (payload.eventType == 'unsubscribe') {
      // Add code to handle unsubscribe event.
    }
    if (window.console) { // for debugging only
      window.console.log('YT event: ', payload);
    }
  }
</script>
</div>
<div class="twitter button">
    <i class="icon">
      <i class="fa fa-twitter"></i>
  </i>
  <div class="slide">
    <p>
      Twitter
    </p>
  </div>
  <a href="https://twitter.com/mohammed1811990" class="twitter-follow-button" data-show-count="false" data-via="mariuCSS">
    Tweet
  </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>

 غير كل من:

 رابط صفحتك على فيس بوك بدلاً من mdadice 
رابط او اسم ملفك الشخصي في جوجل بلس بدلاً من مدادالجليد 
رابط قناتك على يوتيوب بدلاً من monemoor 
واخير رابط او إسم ملفك الشخصي على تويتر بدلاً من mohammed1811990 
ثم حرك الأداة حيث تريد ظهورها بعد الحفظ بالتوفيق.
تعليقاتكم تشجعنا على تقديم المزيد وهي محل إهتمامنا دائمًا

  1. تسلم يا غالي :) و شكرا للاضافات العظيمه و استمر و منكم نستفيد
    مدونه طلبك عندنا

    ردحذف
    الردود
    1. شكراً جزيلاً لك أخي محمود أتمنى لك التوفيق أيضاً :))

      حذف
  2. أرجوك ساعدني لقد ركبت جميع الضافات الإجتماعية ولكن وهم يشتغلون بشكل جيد ولكن أيقونة اليوتيوب لا تعمل يقول لي أنا هناك خطاء ولا أعرف مالعمل أرجو منك مساعدتي على حل هذه المشكلة بأسرع وقت ممكن جزاك الله خيرا

    ردحذف
  3. هذا هو رابط مدونتي يمكنك رؤية الخطأ ;((

    koon-awal.blogspot.com

    ردحذف
    الردود
    1. لقد ادخلت معرف قناتك على يوتيوب بشكلٍ خاطئ تاكد من معرف القناة الخاصة بك

      حذف