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

مرحبا بكل متابعي وزوار مدونة PH3ahmed

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

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

اولا اذهب الى لوحة التحكم في مدونتك ثم القالب ثم تحرير 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2KKFZJQDrQpviyNqL75XLidGzXx0RRjVGclNMsMCEdtEIVDEvjdO9nmvllKqzXfteJmu6SGYmNdjSxqLJzEWVx2SZk4zFXMajPYrbafPaQ0wNQ72SNaS_2UJGOaeqWzWCPx-HueWqkrYq/s320/BS+Black+facebook.png);}ul.bssocial li.bstwitter {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivb53iOvkyaybG63yXysGPuk67FgJwxhGMyAz5QxGa6jjnB4AAtVGSP2Xfe4c4xGeN78wglhKn-qQndAuxfDDMRvB8sWYC8LLNbcRu6nyH1Gm7AJxSCm0ODHGiLrxeM4g-n6cvxIrUZsuu/s320/BS+Black+twitter.png);}ul.bssocial li.bsredit {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitbtGwsSAaiJCYLcyBvUEW9s2tR0HoAOrTove4KVaWYft7YL5qRlQsWGDc0eu5wy2NySckMNr0GsioA6WHjRp7mhmowKpYrursDhx2LjxqVVX_0q46doZOdMXU1dRHs0LmMGaYZ_ZFsGg5/s320/BS+Black+reditt.png);}ul li.bstechnorati {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5ePKrJnbTKkojuwUkJJF38r2WBea2GSq38yCSlCmaff8DSX_NVvZy1twO7uFFeaEKau3ZFLZKLQY0dWTDZ27sqQV8NJ3DiL_n1FCsYTMjmKSQkW2zlvmoGLz0mZZVXIyvKj_Aq3GtUDQ/s320/BS+Black+technorati.png);}ul.bssocial li.bsstumbleupon {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimCp5JGUAZzdxam1zLYjJR-j4YUW7Yw-h4UBxsc9DduE0mYI8eypmfQ3boGZ6hhMKWsN1_xHkkHC7xIHxaOyegLQ8rswaAee6VreK1WB_883sNsadNYvxQkbTqu4S9jmvtIUMTR1jbund-/s320/BS+Black+stumbleupon.png);}ul.bssocial li.bsdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhreRNK34WCophCj8t-gvAEpVXojXL0eQuO9fDz98Xzi9SBZWTZAULwX_NRWtnmmhSxcp0yYNkwPyjZK6zRCF7BSkJPZgTFuZF8EnYQKkK5pXUShD8w5Cx5KleStiK2sHaGZ9SxoBbEErO/s320/BS+Black+digg.png);}ul.bssocial li.bslinkedin {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3wotMBNFf2x46QeeHfQsH6tPRuy7KCKubFwGZ8wdpRoGmkTlqsgyWup9EduxXUOSTDj_J2H_Pj7oMODoR45imxbDAtgoMZwE_jJRTgWAfVRWy2Vg3WfPx6EyZbueeHk1KSkxU4ny-fCw/s320/BS+Black+linkedin.png);}ul.bssocial li.bsdelicious {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipfsIOVhkO8i_j0uuPYFvTc0KfIK1-uUhFqacp5ilH0PYrQNqMXt0-bcej8vttQQBy6ogQRKlPkQ97Hi8diHhzKiB5LlcAcW6NoX2dJIiUPdTayi002waDsDK0aNw0aAFYBPQ_zNIVMob9/s320/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/>

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

واختر الحفظ ومبروك عليك

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

كاتب الموضوع : PH3ahmed

تدوينات ذات صلة

0 التعليقات:

إرسال تعليق