اضافه ازرار المشاركة لمدونات بلوجر ( تم اصلاح المشكل )

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

ملاحظة: تم توفير نسخة افضل هنا

هكذا تظهر في الحقيقة:

كما يمكنك معاينتها في اسفل التدوينة،،
  لنبدأ على بركة الله ادراج هذه الاضافة الرائعة في مدونتنا:
- اولا ابحث عن الكود التالي:

</head>

- ثم ادرج قبله الكود التالي:

1. <style type='text/css'>
2. ul.social { list-style:none; margin:15px auto;display:inline-block; }
3. ul.social li { display:inline; float:left; background-repeat:no-repeat; }
4. ul.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
5. ul.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff;padding:3px; 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);}
6. ul.social li.facebook { background-image:url(&quot;http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png&quot;); }
7. ul.social li.twitter { background-image:url(&quot;http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png&quot;); }  
8. ul.social li.googlebuzz { background-image:url(&quot;http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png&quot;); }
9. ul.social li.stumbleupon { background-image:url(&quot;http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png&quot;); }
10. ul.social li.digg { background-image:url(&quot;http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png&quot;); }
11. ul.social li.delicious { background-image:url(&quot;http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png&quot;); }
12. ul.social li.linkedin { background-image:url(&quot;http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png&quot;); }
13. ul.social li.reddit { background-image:url(&quot;http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png&quot;); }
14. ul.social li.technorati { background-image:url(&quot;http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png&quot;); }
15. #cssanime:hover li { opacity:0.2; }
16. #cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
17. #cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
18. #cssanime li:hover { opacity:1; }
19. #cssanime li:hover a strong { opacity:1; top:-10px; }
20. </style>

- بعد ذلك ابحث عن:

<data:post.body/>

- لتدرج بعده الكود التالي:

1. <b:if cond='data:blog.pageType == &quot;item&quot;'>
2. <ul class='social' id='cssanime'>
3. <li class='facebook'>
4. <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' title='Share this on Facebook'><strong>Facebook</strong></a>
5. </li>
6. <li class='twitter'>
7. <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
8. </li>
9. <li class='googlebuzz'>
10. <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
11. </li>
12. <li class='stumbleupon'>
13. <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
14. </li>
15. <li class='digg'>
16. <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
17. </li>
18. <li class='delicious'>
19. <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
20. </li>
21. <li class='linkedin'>
22. <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'title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
23. </li>
24. <li class='reddit'>
25. <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
26. </li>
27. <li class='technorati'>
28. <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
29. </li>
30. </ul>
31. </b:if>

- مبروك عليك، انتهى التركيب، احفظ القالب و اذهب داخل تدوينة للمعاينة.
   اتمنى ان يكون مفيدا، و الى اللقاء :-)

____________________________________________________

• Facebook
• Twitter
• Google Plus
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati