لاصحاب مدونات بلوجر اليكم اضافة رائعة خاصة بازرار المواقع الاجتماعية

السلام عليكم ورحمة الله تعالى وبركاته اليوم في هدا الموضوع الجديد سوف نقدم لكم اضافة جميلة خاصة ببلوجر وهي ازرار المواقع الاجتماعية كافة . فاذا كان لديك مدونة على بلوجر وتريد اضافة ازرار لها بالوان جميلة تلائم جميع القوالب وشكل جميل وسهلة التركيب والتعديل فتابع هدا الموضوع معنا .

اولا وقبل كل شئ فطريقة تركيب هاته الاضافة هي جد سهلة فقط تدهب الى تخطيط الخاصة بمدونتك تم تختار عنصر جديد باسم HTML/JAVASCRIPT وتضيف اليه الكود التالي .

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>1000</large>

<small>مشترك</small></a></li>
<li class="ss-facebook"><a target="_blank"

href="https://www.facebook.com/Th3arabiandev" rel="nofollow external">

<h5>
<span>Facebbok</span></h5>
<large>5000</large> <small>

متابع</small></a></li>
<li class="ss-twitter"> <a target="_blank"

href="https://twitter.com/Th3arabiandev" rel="nofollow external">

<h5>
<span>Twitter</span></h5>
<large>300</large> <small>متابع</small>

</a></li>
<li class="ss-google-plus"><a target="_blank"

href="https://plus.google.com/u/+Th3arabiandev" rel="nofollow

external"> <h5>
<span>Google+</span></h5>
<large>2000</large> <small>

متابع</small> </a></li>
<li class="ss-linkedin"><a target="_blank"

href="https://www.linkedin.com/Th3arabiandev" rel="nofollow external">

<h5>
<span>Linkedin</span></h5>
<large>350</large> <small>

متابع</small></a></li>
<li class="ss-youtube"><a target="_blank"

href="https://www.youtube.com/user/Th3arabiandev" rel="nofollow

external"> <h5>
<span>Youtube</span></h5>
<large>1,700</large> <small>

مشترك</small> </a></li>
</ul>
</div>

وبعد ان تضع الكود قم بتغيير هاته الروابط الى تلك الخاصة بصفحاتك https://www.facebook.com/Th3arabiandev https://twitter.com/Th3arabiandev https://plus.google.com/u/+Th3arabiandev https://www.linkedin.com/Th3arabiandev https://www.youtube.com/user/Th3arabiandev وبعد تغييرهم قم الان بتعديل تلك الارقام التي تضهر اسفل الازرار بارقام حقيقية من حساباتك او اتركها كما هي تم قم بضغط على حفض . ومبروك عليك . هدا كل شئ اتمنى ان تنال هاته الاضافة اعجابكم وادا واجهتكم اية مشاكل اتركوها في تعليق وساساعدكم على حلها .