اضافة شبكات التواصل الاجتماعي اسفل المشاركات في مدونة بلوجر
هي اضافة جميلة وتساعد كثيرا في نشر محتوى المدونة وجلب العديد
من الزوار للمدونة
طريقة اضافتها اذهب الى
لوحة التحم الرئيسية -> قالب -> تحرير HTML
ضع علامة على توسيع قوالب عناصر واجهة المستخدم
الان ابحث عن الكود التالي
]]></b:skin>
الان ضع الكود التالي فوق الكود السابق مباشرة
/* All Blogging Tools.com*/
ul.ABT-social {
list-style:none;
display:inline-block;
margin:10px auto;
padding:2px;
}
ul.ABT-social li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.ABT-social li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.ABT-social li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgbaundefined0,0,0,0.75);
background-color:rgbaundefined0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgbaundefined0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgbaundefined0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgbaundefined0,0,0,0.5);
padding:3px;
}
ul.ABT-social li.TBI-facebook {
background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitgoMNi4YaPCsXfS86uoaOWAIluGceE37iDmXxKdkAVVttolC4mpFe7U-DdjG4s7UFL9QUIC8snIyACU1N5RQIUNfoAP0P37yr11ago2ccZ8i9waAiq5ddpsDACI1yq_ZoNrb03numlp8/s50/facebook.png);
}
ul.ABT-social li.TBI-twitter {
background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYND3W9xudPDctpMVzb9f1IdHIJHW2IrRDpgGlGwReOarE9uGfatlYtDeL4NG-ZB8iLWQhJyvbihER_mrrUltTNK0K1kPsGQwmbg-E5FLTAAPgz-Vs0gCMhZTmMQZuZvDH-K44gwOVrHU/s50/twitter.png);
}
ul.ABT-social li.TBI-googleplus {
background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnRr3emga8PlEjno7ujLll7gWIDmKfh7kL5fsqs90BDHm3UlLLak9kn6uK22JHN03KfwOgeiDcHgB9amB9mcCco6x69TqN87zgbhJIJECpypkhUJr9J-MBtaPuJWEENeUoz70yqpmUaWY/s50/google%252B.png);
}
ul.ABT-social li.TBI-pinterest {
background-image: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidzDwF2bPQ9Yj-xLHa6j1nE3Zc07QdnQR4A9jYwNd5mr4WqdhK9gQk5cb2xKLVRzFHf7pS6HzgN4XE3UFL4GlaUgmtRTJpKMKsvjKGsuUFc2FCWcTdjM1VJjU-bjAl_2aXv9MAgRV_H4c/s50/pinterest.png);
}
ul.ABT-social li.TBI-stumbleupon {
background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNXo549Ibie5iq9jWvYbMN6ABoBk6tshh-x-aeKehXNtlzrGg5kmeoQPh2wf9brT6TGYoVw2wkn1aaKmcwJy3-H88RTCKGFPmKoEyQjUdrkMGdgYenlisW21V2AGick0Xha7po1Bia13M/s50/stumbleupon.png);
}
ul.ABT-social li.TBI-delicious {
background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDBf2HSNB_bjZvPvzm-LTZhDy6A0IAuPkXphk3-apCejEY0V3WKBvmupNCDIs4KqL-vQDrONPbSbLd05qLbYiufGZSvvlvsj2ohxunWQz8fCxeztPz2rR2QijTMoh-UZ01qnPMwEY4bTs/s50/delicious.png);
}
ul.ABT-social li.TBI-linkedin {
background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqi4FBeaGZjTjMhoisej4f9mDzQZSHpALo5jbCfJnEbu3nitNmhF3ZP0018p8MixvhHwAlbvLjzFJmntgpJ3-roho4-4oF0VkDYfrBBvO5sphor9F7S1duqe30JspuyA_25qT4y5SDZxQ/s50/linkedin.png);
}
ul.ABT-social li.TBI-reddit {
background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObulb1nJI5Hn85GF4wLMdz1NnzyKhRxe7a9QIwLbe-xZUaCnYGIosH2fplIiTekkQ78NzdRrzQC-5QGPUkHKlDPs3Uxidrk4UEQqRorJdBnW48BKwEHNWUSkw2LyqXZXImOZfOeizLoA/s50/reddit.png);
}
ul.ABT-social li.TBI-technorati {
background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsQnNW_WrDLyOHHOeiRahg47uL8lCbMxo2JB2TuJG0NL-PBfOlEv6bnsWCuw_wmr6dGwHD-WQBzNRJBCl9-cuN27XdjC4jS4eOm_THy20TcQC6XTJTb9sqgwPd4CmPet-0JWhYA85Lfs/s1600/technorati.png);
}
#ABT-cssanimation:hover li {
opacity:0.2;
}
#ABT-cssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
padding:2px;
}
#ABT-cssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#ABT-cssanimation li:hover {
opacity:1;
}
#ABT-cssanimation li:hover a strong {
opacity:1;
top:-10px;
}
/*Allbloggingtools.com */
الان ابحث عن الكود التالي
<data:post.body/>
الان ضع الكود التالي تحت الكود السابق مباشرة
<b:if cond='data:blog.pageType == "item"'>
<center>
<div style='font-size: 16px; color:#444;'>شارك الموضوع </div>
</center>
<ul class='ABT-social' id='ABT-cssanimation'>
<li class='TBI-facebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.openundefinedthis.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='TBI-twitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class=' TBI-googleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.openundefinedthis.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='TBI-pinterest'>
<a href='javascript:voidundefinedundefinedfunctionundefined)%7Bvar%20e=document.createElementundefined'script');e.setAttribute undefined'type','text/javascript');e.setAttributeundefined'charset','UTF-8');e.setAttributeundefined'src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.randomundefined)*99999999);document.body.appendChildundefinede)%7D)undefined));' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='TBI-stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='TBI-delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li>
<li class='TBI-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
<li class='TBI-reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
</li>
<li class='TBI-technorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
</li>
</ul>
</b:if>
الان احفظ القالب .
انتهى الشرح اي استفسار انا جاهز وانتظر تعليقاتكم
الكود فيه اخطاء كثير حرام عليم نزلو حاجه عدله واتأكد من صحة موضوعك