إضافة إيقونات المواقع الاجتماعية كماهو في ووردبريس لمدونات بلوجر

اليوم سوف نتعرف على إضافة مهمة  وأساسية لمدونات بلوجر  ، تضيف لمسة جمالية على مدونتك ، وأيضاً تعرف الزائر بمواقعك الاجتماعية  ، لذا أرتئينا أن نقدم لكم هذه الإضافة .

- طريقة تركيب الإضافة : 

1- أختر لوحة التحكم >> تخطيط >> إضافة أداة : HTML/JavaScript

2- أضف الكود التالي في صندوق الإضافة ، ثم إحفظ .

 <style>
/*----------------www.homeblog7.blogspot.com ~ Sidebar Social Widget-----------*/
#social-stats {
border-left: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
display: block;
float: left;
position: relative;
}
#social-stats ul {
overflow: hidden;
}
#social-stats ul li {
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
display: block;
float: left;
width: 33%;
}
#social-stats ul li a {
-moz-transition: all 0.6s ease-out 0s;
display: block;
float: left;
padding: 10px 0 3px;
text-decoration: none;
width: 100%;
}
#social-stats ul li a span, #social-stats ul li a large, #social-stats ul li a small {
display: block;
float: left;
margin: 0 auto;
text-align: center;
width: 100%;
}
#social-stats ul li a span {
background: url("http://4.bp.blogspot.com/-jN645A-bYkI/U0rQVit-liI/AAAAAAAADM0/zM2fqWp79kY/s1600/social_icon.png") no-repeat;
float: none;
height: 46px;
margin-bottom: 5px;
text-indent: -9999px;
width: 47px;
}
#social-stats ul li.ss-rss a:hover h5 {
background: #F18421;
}
#social-stats ul li h5 {
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
background: #999999;
border-radius: 50% 50% 50% 50%;
margin: 0 auto;
width: 47px;
}
#social-stats ul li a span:before {
}
#social-stats ul li.ss-twitter a:hover h5 {
background: #45B0E3;
}
#social-stats ul li.ss-facebook a:hover h5 {
background: #3C5B9B;
}
#social-stats ul li.ss-google-plus a:hover h5 {
background: #F83E29;
}
#social-stats ul li.ss-youtube a:hover h5 {
background: #CC181E;
}
#social-stats ul li.ss-linkedin a:hover h5 {
background: #1790CD;
}
#social-stats ul li.ss-rss a span {
background-position: 0 0;
}
#social-stats ul li.ss-twitter a span {
background-position: 0 -91px;
}
#social-stats ul li.ss-facebook a span {
background-position: 0 -47px;
}
#social-stats ul li.ss-google-plus a span {
background-position: 0 -135px;
}
#social-stats ul li.ss-youtube a span {
background-position: 0 -180px;
}
#social-stats ul li.ss-linkedin a span {
background-position: 0 -226px;
}
#social-stats ul li a large {
color: #333232;
font-size: 25px;
font-weight: 500;
}
#social-stats ul li a small {
color: #333232;
font-size: 10px;
}
</style>
<div id="social-stats">
<ul>
<li class="ss-rss"><a target="_blank" href="/feeds/posts/default" rel="nofollow external"><h5><span>Rss</span></h5><large>5000</large> <small>المشتركون</small></a></li>
<li class="ss-facebook"><a target="_blank" href="https://www.facebook.com/ضع هنا بروفايلك" rel="nofollow external"> <h5><span>Facebbok</span></h5><large>14,782</large> <small>المتابعون</small></a></li>
<li class="ss-twitter"> <a target="_blank" href="http://twitter.com/ضع هنا بروفايلك" rel="nofollow external"> <h5><span>Twitter</span></h5><large>63,207</large> <small>المتابعون</small> </a></li>
<li class="ss-google-plus"><a target="_blank" href="https://plus.google.com/ضع هنا بروفايلك" rel="nofollow external"> <h5><span>Google+</span></h5> <large>70,781</large> <small>المتابعون</small> </a></li>
<li class="ss-linkedin"><a target="_blank" href="http://bd.linkedin.com/in/ضع هنا بروفايلك" rel="nofollow external"> <h5><span>Linkedin</span></h5> <large>2,453</large> <small>المتابعون</small></a></li>
<li class="ss-youtube"><a target="_blank" href="http://www.youtube.com/user/ضع هنا بروفايلك" rel="nofollow external"> <h5><span>Youtube</span></h5> <large>6,237</large> <small>المشتركون</small> </a></li>
</ul>
</div>