منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


كود أزرار التواصل الإجتماعي الجانبية احترافي

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود أزرار التواصل الإجتماعي الجانبية احترافي

مُساهمة من طرف Ahmedamer في 13/07/16, 12:37 pm

السلام عليكم ورحمة الله وبركاتة

أهلا بيكم أعضاء وزوار منتدى تقنيات الكرام

اليوم بقدملك كود رائع لأزوار التواصل الإجتماعي

كود إحترافي يبحث عنه الكثيرون

صورة للكود



الكود يتم تركيبة في العناصر المستقلة

لوحة الإدارة \ عناصر إضافية \ إدارو العناصر المستقلة على المنتدى
أظهار العناصر المستقلة : نعم
وقم بإنشاء عنصر جديد وضعه على يسار المنتدى
وضع بداخله هذا الكود


الرمز:
 <style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
 left: 0;
 margin-top: -75px; /* (li * a:width) / -2 */
 position: fixed;
 top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
 background: #121212;
 color: #fff;
 display: block;
 height: 50px;
 font-size: 18px;
 line-height: 50px;
 position: relative;
 text-align: center;
 width: 50px;
}
#social-sidebar ul li a:hover span {
 left: 130%;
 opacity: 1;
}
#social-sidebar ul li a span {
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 -webkit-transition: opacity .3s, left .4s;
 -moz-transition: opacity .3s, left .4s;
 -ms-transition: opacity .3s, left .4s;
 -o-transition: opacity .3s, left .4s;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}
#social-sidebar ul li a span:before {
 content: "";
 display: block;
 height: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 8px;
 z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/</style>
<div id="social-sidebar">
                             
   <ul>
                                  
      <li>
                          <a target="_blank" href="https://twitter.com/
" class="entypo-twitter">      <span>Twitter</span>     </a>                
      </li>
                                  
      <li>
                          <a target="_blank" href="http://plus.google.com/
" class="entypo-gplus">      <span>google+</span>     </a>                
      </li>
                                  
      <li>
                          <a target="_blank" href="http://www.tumblr.net/
" class="entypo-tumblr">      <span>tumblr</span>     </a>                
      </li>
                            
      <li>
                          <a target="_blank" href="https://www.facebook.com/
" class="entypo-facebook">      <span>facebook</span>     </a>                
      </li>
                                      
      <li>
                          <a target="_blank" href="http://feeds.feedburner.com/
" class="entypo-rss">      <span>feedburner</span>     </a>                
      </li>
                                
   </ul>
                             
</div>


قم بالبحث عن :


https://twitter.com/


http://plus.google.com/


http://www.tumblr.net/


https://www.facebook.com/


http://feeds.feedburner.com/

وبدلها بروابطك الخاصة وهكدا يكون قد تم بأذن الله


Ahmedamer

الجنس : ذكر
عدد المساهمات : 7
التقييم : 12
تاريخ التسجيل : 14/03/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود أزرار التواصل الإجتماعي الجانبية احترافي

مُساهمة من طرف JAR7 في 13/07/16, 12:41 pm

السسلآلآم عليككم ورحمة الله وبركاته...
~يسعد ايامكك ..
ماشاءالله عليك جدا جميله المشاركه 
الله يكتب أجرك ويارب تكون في موآزين اعمالك 
ماقصرت على هالحضور بجد أبدعت..
جهود مبارك جزاك الله خيرا
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود أزرار التواصل الإجتماعي الجانبية احترافي

مُساهمة من طرف وهبة الساحر في 13/07/16, 11:31 pm

شكرا لك



وهبة الساحر
القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها . . !!
     


وهبة الساحر
مؤسس المنتدى


الجنس : ذكر
عدد المساهمات : 334
التقييم : 60
تاريخ التسجيل : 07/03/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود أزرار التواصل الإجتماعي الجانبية احترافي

مُساهمة من طرف البراق في 14/07/16, 03:05 am

يعطيك ربى الف عاااافيه على الطرح المفيد
طرح جميل وممميز
لروحك

البراق
عضو نشيط


الجنس : ذكر
عدد المساهمات : 109
التقييم : 25
تاريخ التسجيل : 14/04/2016
اوسمتي : :3:4:3

معاينة صفحة البيانات الشخصي للعضو http://raad2.montadalitihad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود أزرار التواصل الإجتماعي الجانبية احترافي

مُساهمة من طرف Judy في 19/07/16, 07:36 am

السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي

Judy
عضو نشيط


الجنس : انثى
عدد المساهمات : 364
التقييم : 15
تاريخ التسجيل : 23/04/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى