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

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

مغربي.كوم يقول...

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

رضا يقول...

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

علاء الدين يقول...

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

رضا يقول...

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

علي العسبلي يقول...

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

رضا يقول...

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

Mobile4MY يقول...

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

رضا يقول...

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

TechMan Seddik يقول...


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

رضا يقول...

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

foryouare يقول...

بارك الله فيك

أضف تعليق

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