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

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

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

مثال حي:


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 
ثم حرك الأداة حيث تريد ظهورها بعد الحفظ بالتوفيق.
مشاركات أقدم المقال التالي
5 تعليق
  • hgjfgj
    hgjfgj 14‏/03‏/2014، 7:10:00 م

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

    • مداد الجليد
      مداد الجليد 14‏/03‏/2014، 8:29:00 م

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

  • Unknown
    Unknown 24‏/03‏/2014، 4:45:00 ص

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

  • Unknown
    Unknown 24‏/03‏/2014، 4:47:00 ص

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

    koon-awal.blogspot.com

    • مداد الجليد
      مداد الجليد 24‏/03‏/2014، 7:00:00 ص

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

أضف تعليق
عنوان التعليق