السلام عليكم ورحمة الله وبركاتة
أيقونات المواقع الإجتماعية بشكل وتأثير إحترافى بشكل جديد وأنيق لمدونات بلوجر ستعطى مظهراً جميلا وجزابا لمدونتك فقط من مدونة مدون الإضافة مخصصة للمتابعه على بعض المواقع مثل " جوجل بلس - يوتيوب - Rss - فيس بوك - تويتر " .
لوحة التحكم - التخطيط - إضافة اداة جافاسكريبت وضع بها الكود التالى
<style type="text/css">
.pbtv2Social {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.pbtv2Social span {
float: left;
display: inline;
margin-right: 8px;
}
.pbtv2Social span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmSVVqX9PupPgk17k9wrn-JMieU_oEKmEUUSLW2Q71DKNnffNKcNo5OQzkK8GNVViRVmXnFzL0kYxJpVZxO2qkx6WhFecef4M-FN5nCYvP8NlfRrNHQ9Ud15L7e7cJRI1blKYeJPcIVhDG/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<body>
<div class='pbtv2Social'>
<span><a href='twitter.com/mdwan_blogger' id='iconTwitter' target='_blank' title='Follow us on Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/mdwanblog' id='iconFacebook' target='_blank' title='Join us at Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/mdwanblog' id='iconRSS' target='_blank' title='Subscribe our RSS Feed'>RSS</a></span>
<span><a href='youtube.com/mdwanblog' id='iconYouTube' target='_blank' title='Follow our YouTube Channel'>YouTube</a></span>
<span><a href='https://plus.google.com/1111/posts' id='iconGooglePlus' target='_blank' title='Follow us at Google+'>Google</a></span></div>
</div>
</div>
مع تغيير ما باللون للروابط الخاصة بك
ليست هناك تعليقات :
إرسال تعليق
=a= =b= =c= =d= =e= =f= =g= =h= =j= =k= =l= =m= =n= =o= =p= =q= =w= =x= =y= =z=