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

كما تعلمون، هناك العديد من الاضافات الخاصة بازرار مشاركة التدوينات، و كلها جميلة صراحة، لكن انا اليوم احضرت لكم افضلها في نظري، شكلها خلاب للغاية، لا يوجد كثير من يستخدمها، و لكنها رائعة جدا، هذه الاضافة استخدمها شخصيا، و في نظري، هذه الاضافة افضل من اي واحدة رائتها سابقا، لهذا قررت ان اشارككم اياها، اتمنى ان تعجبكم،،
ملاحظة: تم توفير نسخة افضل هنا
هكذا تظهر في الحقيقة:
كما يمكنك معاينتها في اسفل التدوينة،،
  لنبدأ على بركة الله ادراج هذه الاضافة الرائعة في مدونتنا:
- اولا ابحث عن الكود التالي:
</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>
- مبروك عليك، انتهى التركيب، احفظ القالب و اذهب داخل تدوينة للمعاينة.
   اتمنى ان يكون مفيدا، و الى اللقاء :-)
____________________________________________________

11 التعليقات:

غير معرف يقول...

موضوع جميل أفادني

Unknown يقول...

شكرا لمرورك العطر :-)

Alaeddine يقول...

السلام عليكم،
أزرار مهمة، شكرا لك :)
بالتوفيق إن شاء الله !
--------------
مُخْتَارَات بلوجر

Unknown يقول...

شكرا لك اخي علاء،
يرني مرورك

Unknown يقول...

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

Unknown يقول...

اخي اذا اردت ان تفتحهي في نافذة جديدة، اضغط على عجلة الفأرة
شكرا لك على المرور

Mehdi Bounya يقول...

عند إضافة الكود الثاني يقول لي المحرر خطأ في تحرير XML

Unknown يقول...

لا يا اخي, الاضافة تعمل بكفائة، اضن انك لم تقم بنسخ الكود بشكل كامل و صحيح
شكرا لمرورك

Unknown يقول...


عند إضافة الكود الثاني يقول لي المحرر خطأ في تحرير XML

Unknown يقول...

تم تصحيح الكود و هو يشتغل الان بكفائة، اسف على الخلل

foryouare يقول...

بارك الله فيك

أضف تعليق

 
| مدونة رضا © 2010-2012 | تعريب وتطوير : عرب بلوجر | الى الاعلى |