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

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

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

شكل الشريط الجانبي للتواصل الاجتماعي بعد تركيبه

معيانة حية للشريط الجانبي للتواصل الاجتماعي
من هنا شريط جانبي للتواصل الاجتماعي

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

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

2-  نسخ الكود التالي في الأداة :

<style>

/*----------------http://rydnet.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>Subscribers</small></a></li>
<li class="ss-facebook"><a target="_blank" href="https://www.facebook.com/rydnet" 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/rydnet" 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/+hamzaramzi111/posts" 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/rydnet" 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="http://www.youtube.com/channel/UCg_nBioB-uPQMdz0krGUlJQ" rel="nofollow external"> <h5><span>Youtube</span></h5> <large>6,237</large> <small>Subscribers</small> </a></li>
</ul>
</div>

3-  حفظ الأداة .

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

5- حذف بعض الصفحات اذا كانت لا توجد لديك(اذا اردت حذف احدى الصفحات فما عليك الا حذف كود الصفحة المراد حذفها)

كلمات دلالية

• تواصل اجتماعي
• اضافة أداة
• فيسبوك
• تويتر
• جوجل+
• يوتوب
• مشاركة
• متابعة
• زوار
• مشتركين