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

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

avatar
الزعيم
المدير العام
المدير العام
المساهمات : 235
تاريخ التسجيل : 27/08/2016
الموقع : http://taqniyat.123.st/
معاينة صفحة البيانات الشخصي للعضو http://taqniyat.123.st

مُساهمةالزعيم في الإثنين أغسطس 29, 2016 11:06 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>

قم بالبحث عن :


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


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


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


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


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

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

_________________

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

للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل

يجب ان تعرف نفسك بتسجيل الدخول او بالاشتراك معنا للمشاركة

التسجيل

انضم الينا لن يستغرق منك الا ثوانى معدودة!


أنشئ حساب جديد

تسجيل الدخول

ليس لديك عضويه ؟ بضع ثوانى فقط لتسجيل حساب


تسجيل الدخول

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