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

1 سبتمبر، 2021

السلام عليكم ورحمة الله وبركاته

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

لاضافة هذه الاداة اسفل كل تدوينة اتبع الشرح التالي

اولا اذهب الى لوحة التحكم في مدونتك ثم القالب ثم تحرير html

الان استخدم مفتاح الاختصار ctrlوf ثم ابحث عن الرمز
]]></b:skin>

ثم اضف الكود التالي فوقه مباشر

ul.bssocial {list-style:none;display:inline-block;margin:15px auto;}ul.bssocial li {display:inline;float:left;background-repeat:no-repeat;}ul.bssocial li a {display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none;}ul.bssocial li a strong {font-weight:400;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px;}ul.bssocial li.bsfacebook {background-image:url(http://1.bp.blogspot.com/-dhbW9mA7gus/UasUFsoBj1I/AAAAAAAADR0/hH7NhxaQjRo/s1600/BS+Black+facebook.png);}ul.bssocial li.bstwitter {background-image:url(http://1.bp.blogspot.com/-foRgVi7BSCQ/UasUHix6JGI/AAAAAAAADSo/VmDegJmp3bA/s1600/BS+Black+twitter.png);}ul.bssocial li.bsredit {background-image:url(http://2.bp.blogspot.com/-A6Xj5bvz_gI/UasUGwCeDlI/AAAAAAAADSQ/ibp1LI1dn4I/s1600/BS+Black+reditt.png);}ul li.bstechnorati {background-image: url(http://4.bp.blogspot.com/-AeYKZI7csr8/UasUHbz-keI/AAAAAAAADSg/W6et0yKHRUE/s1600/BS+Black+technorati.png);}ul.bssocial li.bsstumbleupon {background-image:url(http://3.bp.blogspot.com/-I_XDslhij-I/UasUGzlxWQI/AAAAAAAADSU/F-Bkfp4YvwE/s1600/BS+Black+stumbleupon.png);}ul.bssocial li.bsdig {background-image:url(http://1.bp.blogspot.com/-YvPAJlhGlb0/UasUF5SJY6I/AAAAAAAADR8/U862d2T-LLo/s1600/BS+Black+digg.png);}ul.bssocial li.bslinkedin {background-image:url(http://3.bp.blogspot.com/-3UFBbRGm9NQ/UasUGrVMjRI/AAAAAAAADSI/2wDnt6Er-vM/s1600/BS+Black+linkedin.png);}ul.bssocial li.bsdelicious {background-image:url(http://4.bp.blogspot.com/-NMNlldMGFjg/UasUFof6r_I/AAAAAAAADR4/Dr8o2ML1kcU/s1600/BS+Black+delicious.png);}#bscssanimation:hover li {opacity:0.2;}#bscssanimation li {-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms;}#bscssanimation li a strong {opacity:0;-webkit-transition-property:opacity, top;-webkit-transition-duration:300ms;-moz-transition-property:opacity, top;-moz-transition-duration:300ms;}#bscssanimation li:hover {opacity:1;}#bscssanimation li:hover a strong {opacity:1;top:-10px;}

الان ابحث عن الرمز
<data:post.body/>

ثم اضف الكود التالي بعد الرمز <data:post.body/>

<b:if cond=’data:blog.pageType == "item"’><div style=’font-size: 22px;’>هل اعجبك الموضوع شاركه الأن!..</div> <ul class=’bssocial’ id=’bscssanimation’> <li class=’bsfacebook’> <a expr:href=’"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ‘ onclick=’window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;’ rel=’nofollow’>Facebook</a> </li> <li class=’bstwitter’> <a expr:href=’"http://twitter.com/home?status=" + data:post.title + " — " + data:post.url ‘ rel=’nofollow’ target=’_blank’>Twitter</a> </li> <li class=’bsredit’><a expr:href=’"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ‘ rel=’nofollow’>Reddit</a> </li> <li class=’bstechnorati’><a expr:href=’"http://technorati.com/faves?add=" + data:post.url ‘ rel=’nofollow’ target=’_blank’>Technorati</a> </li> <li class=’bsstumbleupon’> <a expr:href=’"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ‘ rel=’nofollow’ target=’_blank’>StumbleUpon</a> </li> <li class=’bsdig’> <a expr:href=’"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title’ rel=’nofollow’ target=’_blank’>Dig</a> </li> <li class=’bslinkedin’> <a expr:href=’"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="’ rel=’nofollow’ target=’_blank’>LinkedIn</a><li class=’bsdelicious’> <a expr:href=’"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ‘ rel=’nofollow’ target=’_blank’>Delicious</a> </li> </li> </ul> </b:if>

ملاحظة
قد تجد اكثر من رمز مثل هذا <data:post.body/>

اذا لم تعمل الاضافة على اول واحد استخدم الثاني

ثم اختر حفظ وشاهد النتائج

1 سبتمبر، 2021

مقالات ذات صلة