السبت، 22 فبراير 2014

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

اليوم وفى موضوع جديد وحصرى من مدونة ابداعاتى أقدم لكم اضافة مواقع التواصل الاجتماعى بشكل مختلف وجديد بتقنية css الاحترافية والاضافة سريعة جدا وسوف لا تؤثر فى سرعة المدونة وهى عبارة عن أزرار المواقع الاجتماعية كاملة بشكل منتظم بمجرد الوقوف على أحدهم ينزلق اسمه بشكل جميل جدا ، ولكى لا أطيل عليكم فى مقدمة يبخل الكثير عن النظر إليها فهيا بنا للشرح والمعاينة 
يمكنك معاينة الاضافة قبل الشروع فى تركيبها فى مدونتك  
من هنا
والأن جاء وقت شرح التركيب
♦ شرح التركيب ♦
اذهب للوحة التحكم >> التخطيط >> اضافة أداة >> Html/javascript
ضع بها الكود التالى ثم قم بالحفظ
<style>
    #socialbdrssliding a{width: 40px;transition:width 0.4s;-webkit-transition:width 0.4s;-moz-transition:width 0.4s;overflow: hidden;}#socialbdrssliding a:hover{width: 100px;overflow: hidden;}#socialbdrssliding {float: right;position: relative;height: 40px;}#socialbdrssliding ul { margin: 0; }#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-thumb,#socialbdrssliding li .bdrs-title {display: block;position: relative;width: 40px;height: 40px;}#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-title {float: left;width: auto;overflow: hidden;}#socialbdrssliding li a {width: 40px;line-height: 40px;color: #E9E9E9;font-size: 11px;font-weight: bold;text-shadow: 1px 2px 2px #000;text-decoration: none;}#socialbdrssliding li .bdrs-thumb { float: left; }#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("http://1.bp.blogspot.com/-ZXAdQPhrGPI/UnY1jy86NFI/AAAAAAAAB_E/w9k1NSlv7qY/s1600/FACEBOOK.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("http://1.bp.blogspot.com/-6kXAR8gUIJI/UnY1juBh0PI/AAAAAAAAB_A/k2VxWHM0Lco/s1600/googleplus.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("http://1.bp.blogspot.com/-Tdm-eNud6rU/UnY1jYdKh9I/AAAAAAAAB-8/cS-j5ZdWPf8/s1600/TWITTER.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("http://4.bp.blogspot.com/-2OHUHeGD494/UnY1l485tVI/AAAAAAAAB_U/l9JGli_YD7c/s1600/rssbd.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("http://3.bp.blogspot.com/-ZU4mfmIGylA/UnY1uNPlQyI/AAAAAAAAB_c/H7vh2EablVQ/s1600/youtube.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;}</style> 
    <div id="socialbdrssliding"><ul><li class="bdrs-gplus"><a href="رابط حساب جوجل بلس" target="_blank" rel="nofollow" title="جوجل بلس"><div class="bdrs-thumb"></div><div class="bdrs-title">جوجل بلس</div></a></li>
    <li class="bdrs-facebook"><a href="رابط حساب الفيس بوك" target="_blank" rel="nofollow" title="فيس بوك"><div class="bdrs-thumb"></div><div class="bdrs-title">فيس بوك</div></a></li>
    <li class="bdrs-twitter"><a href="رابط حساب تويتر" target="_blank" rel="nofollow" title="تويتر"><div class="bdrs-thumb"></div><div class="bdrs-title">تويتر</div></a></li>
    <li class="bdrs-rss"><a href="رابط حساب الخلاصة" target="_blank" rel="nofollow" title="rss feed"><div class="bdrs-thumb"></div><div class="bdrs-title">RSS</div></a></li>
    <li class="bdrs-youtube"><a href="رابط قناة اليوتيوب" target="_blank" rel="nofollow" title="يوتيوب"><div class="bdrs-thumb"></div><div class="bdrs-title">يوتيوب</div></a></li></ul></div>
</div>
♫ غير روابط المواقع الاجتماعية فى الكود السابقى بروابطك الخاصة

√ فى انتظار تعليقاتكم المشجعة متتبعى مدونة ابداعاتى الكرام √

من فضلك اضغظ لايك لمشاهدة لينك التحميل

11 التعليقات:

  1. رائعة بالفعل نتمنى المزيد من الحصريات

    ردحذف
    الردود
    1. شكرا لمرورك اخى الفاضل ياسين

      حذف
  2. الردود
    1. توقف أخى Rayyan عن نشر رابط مدونتك فى مواضيعى مدونتى
      بعد ذلك سيتم تجاهل التعليق

      حذف
    2. واصلا اخى rayyan انت بذلك تضيع مدونتك
      ففعل هذه الطريقة كثيرا ينقلب اثره بالفشل فلا الارشفة
      وتدمير مدونتك بالكامل
      http://3alam-b.blogspot.com/

      حذف
  3. رائع اخ محمود واصل ابداعك (h)

    ردحذف
  4. شكراااااااااااااااااااا
    http://www.fmed.bu.edu.eg/en/
    http://www.fmed.bu.edu.eg/fmed/index.php/studentsunion

    ردحذف

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار