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

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

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


اولا اذهب الى لوحة التحكم في مدونتك ثم القالب ثم تحرير 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/AVvXsEgsmvkh-ScGF1bVFGKlhvfGAD_CLCk8gSBCDuQ4S4NvsSBo6WyzC0pqLlt4VByWp5t4OowhEwG7J3hdOkIXqQ2Blgrne2jAmkKeIaSSb3slrQXAcDa83GEFDKF-8G4yCCe29z1lVk7P33uY/s320/BS+Black+facebook.png);}ul.bssocial li.bstwitter {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeYORnTY4TQChr01muyAhPeLYFu4gGClmTsuXNbm7tdt2a1y8EMjhzpnBYQ5MQAXZO9nJRydAtazdRTUYqQHGIqiec1Mlc0mqCJQrFaNhjDEsJmYPnZVnFsYYkhHPP0Ni6SHiq3ThLKAa/s320/BS+Black+twitter.png);}ul.bssocial li.bsredit {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBS5GjjFfb9RWUpYhK_QSZb7XYZe5ZwhedzVWRsw6QHIMd63dIOWRWUvHiadD5NhdPXUKDBKS17yk0WKNZ2uwl9asJWa3xWGKeBsXZMhcwiPbxALtdTrtYBsJtlImuorp65ShdhFCDmd2K/s320/BS+Black+reditt.png);}ul li.bstechnorati {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVF9gFdehIVxFWxyVpWImrasncLAxr3HakECxtJ8B9PDJJo_H0Lo4RaGCbCfmlKhWKQxDSSNsaJonBiTJSXJcpptywK2lcJ3RMw8tHh36V11FKZKLN6S5NBQg6rwiv0kQ6Cy2VWTLQYsyN/s320/BS+Black+technorati.png);}ul.bssocial li.bsstumbleupon {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiMtfWQVVznfGyKcGhN1-VVRIK-tvC7YeW93JDEl_-pF8gF76LSj2CVCC4dpX_9oSCOyoTrHdL39j0vDDMiDPvfEPp97ll7jEdsdRiQxqhKS4UCZ8eNDlQYlZk6fKI0YFB3uqE9OsNtDwn/s320/BS+Black+stumbleupon.png);}ul.bssocial li.bsdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiiV0iHJHUDA406fWk9dcyz-NSf4SECZVQnBl8FCDp7_-jeXioAPtvfk3Ls-ihRdIBfSWitCf5qs1Q_LL0C679Q02GO4brW7XQSsuAdaIMIuNvo00NHMmMlhhKQDaheEZ-Jr8HpGEuz6v5/s320/BS+Black+digg.png);}ul.bssocial li.bslinkedin {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTD25yfT_-KnU9E83g7EUSI1_WWyWCICuGQ2y15rRMKpQDmBbc-Qt6ZKCwsArPORVFPh1swTsZA6Gcc0pAjK9AgVY6ydx6GeLJ39h_nOV48-I6j_qPNKI-ibN5AQN4RRCHXNg38pdeTHt5/s320/BS+Black+linkedin.png);}ul.bssocial li.bsdelicious {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Lhm3H9QyN6qO36xYe9dU7v3oaLn7gTApMP6PHVoQdzcEeXWFbzTvg13t5nPx9vWDjhQjztXojAkg53HuN5VMJfPOje0QVcA1iJ6GJJQ9ns21PhCQu-8r4lDz9v6Ywb4G6R96w5_ilkoJ/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 == &quot;item&quot;’><div style=’font-size: 22px;’><b>هل اعجبك الموضوع شاركه الأن!..</b></div>    <ul class=’bssocial’ id=’bscssanimation’>    <li class=’bsfacebook’>    <a expr:href=’&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ‘ onclick=’window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;’ rel=’nofollow’><strong>Facebook</strong></a>    </li>    <li class=’bstwitter’>    <a expr:href=’&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; — &quot; + data:post.url ‘ rel=’nofollow’ target=’_blank’><strong>Twitter</strong></a>    </li>    <li class=’bsredit’><a expr:href=’&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ‘ rel=’nofollow’><strong>Reddit</strong></a>    </li>    <li class=’bstechnorati’><a expr:href=’&quot;http://technorati.com/faves?add=&quot; + data:post.url ‘ rel=’nofollow’ target=’_blank’><strong>Technorati</strong></a>    </li>    <li class=’bsstumbleupon’>    <a expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ‘ rel=’nofollow’ target=’_blank’><strong>StumbleUpon</strong></a>    </li>    <li class=’bsdig’>      <a expr:href=’&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ rel=’nofollow’ target=’_blank’><strong>Dig</strong></a>    </li>    <li class=’bslinkedin’>    <a expr:href=’&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;’ rel=’nofollow’ target=’_blank’><strong>LinkedIn</strong></a><li class=’bsdelicious’>    <a expr:href=’&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ‘ rel=’nofollow’ target=’_blank’><strong>Delicious</strong></a>    </li>    </li>    </ul>    </b:if> 

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