إضافة شريط التواصل الاجتماعي لمدونة بلوجر لتيسير التفاعل و التواصل مع زوارك. بحيث تكون هذه القائمة للتواصل الاجتماعي قاعدة واساس لجذب الزوار لمدونتك
%20-%20%D8%B1%D9%8A%D8%A7%D8%B6%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1_files/social+shar.PNG)
طريقة تركيب الشريط الجانبي للتواصل الاجتماعي
1- تسجبل الدخول الى بلوجر>>>تخطيط>>>اضافة اداة html/javascript
2- نسخ الكود التالي في الأداة :
<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/
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>
<li class="ss-facebook"><a target="_blank" href="https://www.facebook.com/rydnet" rel="nofollow external"> <h5><span>Facebbok</span></h5>
<li class="ss-twitter"> <a target="_blank" href="http://twitter.com/
<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/
<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- حذف بعض الصفحات اذا كانت لا توجد لديك(اذا اردت حذف احدى الصفحات فما عليك الا حذف كود الصفحة المراد حذفها)
ليست هناك تعليقات:
إرسال تعليق