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

 من طرف AYOUB bl في الأحد يوليو 31, 2016 2:46 am

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

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

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

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

صورة للكود :



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

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

او يمكنك تركيبه ايضا في اي مكان يقبل html
وضع بداخله هذا الكود

الكود:


 <style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- */
@import url([url=http://weloveiconfonts.com/api/?family=entypo]http://weloveiconfonts.com/api/?family=entypo[/url]);
[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="[url=https://twitter.com/]https://twitter.com/[/url]
" class="entypo-twitter">      <span>Twitter</span>     </a>                
      </li>
                                  
      <li>
                          <a target="_blank" href="[url=http://plus.google.com/]http://plus.google.com/[/url]
" class="entypo-gplus">      <span>google+</span>     </a>                
      </li>
                                  
      <li>
                          <a target="_blank" href="[url=http://www.tumblr.net/]http://www.tumblr.net/[/url]
" class="entypo-tumblr">      <span>tumblr</span>     </a>                
      </li>
                            
      <li>
                          <a target="_blank" href="[url=https://www.facebook.com/]https://www.facebook.com/[/url]
" class="entypo-facebook">      <span>facebook</span>     </a>                
      </li>
                                      
      <li>
                          <a target="_blank" href="[url=http://feeds.feedburner.com/]http://feeds.feedburner.com/[/url]
" 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/

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

 من طرف زائر في الأحد يوليو 31, 2016 3:19 pm

بارك الله فيك
ويعطيك العافية على الموضوع

 من طرف AYOUB bl في الأحد يوليو 31, 2016 6:06 pm

منورة الموضوع

 من طرف زائر في السبت أغسطس 27, 2016 5:55 pm

كود جميل شكرا لك

 من طرف زائر في الأحد أغسطس 28, 2016 5:59 am

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

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

تحياتــي

 من طرف زعيمة الفوتوشوب!!! في الإثنين سبتمبر 05, 2016 1:27 pm

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

شكرا لك على الموضوع الرائع

استمر بالابداع المستمر

 من طرف AmEr MaGroh في الأربعاء سبتمبر 14, 2016 11:15 pm

شكرااا

كود رائع

التوقيع

لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط
من هنا لطلب الالتحاق بفريق منتدانا الحبيب

 من طرف AYOUB bl في الجمعة سبتمبر 16, 2016 3:27 pm

شكرا لمرورك

 من طرف manissa في الجمعة سبتمبر 16, 2016 6:46 pm

جميل فعلا

 من طرف AYOUB bl في الجمعة سبتمبر 16, 2016 10:24 pm

شكرا لمرورك