اضافة أداة شريط جانبي للتواصل الاجتماعي يضم (فيسبوك-تويتر-جوجل+ يويوب وغيرهم 2015

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




طريقة تركيب الشريط الجانبي للتواصل الاجتماعي

 1- تسجبل الدخول الى بلوجر  >>>  تخطيط  >>>  اضافة اداة html/javascript
 2-  نسخ الكود التالي في الأداة :

<style>
/*----------------http://akegeneral.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 {
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>Subscribers</small></a></li>
<li class="ss-facebook"><a target="_blank" href="https://www.facebook.com/ake.alhkae.form" rel="nofollow external"> <h5><span>Facebbok</span></h5><large>14,782</large> <small>Followers</small></a></li>
<li class="ss-twitter"> <a target="_blank" href="http://twitter.com/ake_alhkae" rel="nofollow external"> <h5><span>Twitter</span></h5><large>63,207</large> <small>Followers</small> </a></li>
<li class="ss-google-plus"><a target="_blank" href="https://plus.google.com/104148722188971457816" rel="nofollow external"> <h5><span>Google+</span></h5> <large>70,781</large> <small>Followers</small> </a></li>
<li class="ss-linkedin"><a target="_blank" href="http://bd.linkedin.com/in/alhkae" rel="nofollow external"> <h5><span>Linkedin</span></h5> <large>2,453</large> <small>Followers</small></a></li>
<li class="ss-youtube"><a target="_blank" href="https://www.youtube.com/channel/UCORpWS1SNraVPAVWzjReMpA" rel="nofollow external"> <h5><span>Youtube</span></h5> <large>6,237</large> <small>Subscribers</small> </a></li>
</ul>
</div>

3-  حفظ الأداة .
4-  تعديل الروابط باللون الازرق في الكود بروابط صفحاتك للتواصل الاجتماعي (تعديل رابط صفحة فيسبوك وتويتر وغيرهم.....) 
5- حذف بعض الصفحات اذا كانت لا توجد لديك (اذا اردت حذف احدى الصفحات فما عليك الا حذف كود الصفحة المراد حذفها)
كلمات دلالية

تشرفون بتعليقاتكم تحويل كودإخفاء محول الأكواد الإبتساماتإخفاء

شكرا لك ولمرورك