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

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

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

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

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

صورة للكود :


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

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

او يمكنك تركيبه ايضا في اي مكان يقبل 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>

قم بالبحث عن :


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

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