كيفية إضافة إيقونات المواقع الإجماعية الخاص بك إلى مدونات بلوجر
by homeblogger
HTML
<div class="social-profile-icons">
<ul>
<li class="social-facebook"><a href="#" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="#" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="#" title="Google+">Google+</a></li>
<li class="social-linkedin"><a href="#" title="LinkedIn">Linkedin</a></li>
<li class="social-pinterest"><a href="#" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="#" title="RSS">RSS</a></li>
</ul>
</div>CSS
<style>
/***** Social Profile Icon Widget CSS *****/
.social-profile-icons { margin: 20px 0 0; overflow: hidden; }
.social-profile-icons ul { display: inline-block; margin: 0 auto !important; text-align: center; }
.social-profile-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; }
.social-profile-icons ul li a, .social-profile-icons ul li a:hover { background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; }
.social-profile-icons ul li.social-facebook a { background-color: #3b5998; background-position: -60px 3px; }
.social-profile-icons ul li.social-twitter a { background-color: #00aced; background-position: -253px 3px; }
.social-profile-icons ul li.social-gplus a { background-color: #dd4b39; background-position: -93px 3px; }
.social-profile-icons ul li.social-linkedin a { background-color: #007bb6; background-position: -125px 3px; }
.social-profile-icons ul li.social-pinterest a { background-color: #cb2027; background-position: -157px 3px; }
.social-profile-icons ul li.social-rss a { background-color: #F87E12; background-position: -189px 3px; }
.social-profile-icons ul li a:hover { background-color: #333; }
</style>