أزرار مواقع التواصل الاجتماعي شكل جديد أجمل من عالم التقنية

أزرار مواقع التواصل الاجتماعي شكل جديد أجمل من عالم التقنية

السلام عليكم ورحمة الله تعالى وبركاته

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

معاينة أنقر هنا

كيفية الإضافة إلى مدونتك

ببساطة توجه إلى لوحة التحكم في مدونتك -->> التخطيط -->> إضافة أداة ثم أختر أداة HTML/JavaScript

الآن أضف الكود التالي داخل الأداة والا تنسى إضافة روابط صفحاتك وحساباتك في مواقع التواصل الإجتماعي بدلاً من الروابط المشار إليها في الكود:

<style>
#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/mdadice" 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/mohammed1811990" 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>

بعد ذلك يمكنك تحريك الأداة حيث تريد ظهورها في مدونتك
إلى اللقاء