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

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

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

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

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

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- حذف بعض الصفحات اذا كانت لا توجد لديك(اذا اردت حذف احدى الصفحات فما عليك الا حذف كود الصفحة المراد حذفها)

كلمات دلالية

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

مع تحيات حمزة رمزي.......

اشكال اخرى من اضافات التواصل الاجتماعي:

اضافة صندوق المتابعة في google+

اضاف صندوق الاعجاب FACEBOOK مع الصوربتقنية jquery

اضافة صندوق المشاركة لقناةYOUTUBEمع صور المشتركين

اضاف صندوق المتابعة لTWITTER مع الصوربتقنية jquery

اضافة زر الارسال send + زر الاعجاب like لمدونات بلوجر من فيسبوك facebook

rydnet

[اذا اعجبك الموضوع هذه روابط النشر]

URL Of Post:

http://rydnet.blogspot.com/2014/11/Sidebar-Social-Widget-for-Blogger-Blog.html

Paste This HTML Code On Your Page:

<a href="http://rydnet.blogspot.com/2014/11/Sidebar-Social-Widget-for-Blogger-Blog.html">اضافة أداة شريط جانبي للتواصل الاجتماعي يضم (فيسبوك-تويتر-جوجل+ يويوب وغيرهم.....)</a>

رابط الاضافة