أزرار المفضلات الاجتماعية بشكل جديد ومتحرك

عدد مشاهدات الموضوع:
السلام عليكم و رحمة الله تعالى و بركاته ،كما ذكرنا في الموضوع السابق عن إضافة أزرار المفضلات الاجتماعية أسفل التدوينات في بلوجر الآن نستهل موضوعنا التالي بشرح كيفية إضافة أزرار المفضلات الاجتماعية بتصميم جديد ،حيث تتميز هذه الأداة بكونها تتحرك بشكل عمودي عند التصفح للمدونة كما لو أنها تتبع الزائر أينما ذهب فتقول له ساهم في نشر الموضوع يا صديقي ههههه .

image alt




انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.
]]></b:skin>
ثم ضع الكود التالي فوقه :
.post_share{float:left;border:1px solid #DDD;margin-right:10px; top:200px; padding-top:10px;position:fixed;background:#FFF;margin-left:-80px; padding-bottom:10px;} .post_share .wdt_button{clear:left;margin:0}

top:200px : تعني المسافة الفاصلة بين بداية الصفحة و الأداة,قم بتعديلها حسب مدونتك
ثم قم بالبحث عن الكود التالي : فإذا وجدت 2 من هذا الكود ،فالثاني هو المقصود
<data:post.body/>
ثم ضع الكود التالي فوقه :
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='post_share'>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://sites.google.com/site/mohamedabuiyad/abu-iyad-social/button.js' type='text/javascript'> </script>
</center>
</div>
<div class='wdt_button'>
<center>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' onClick='return buzzPopup(this, &apos;Buzz this&apos;)' rel='nofollow'><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S3Y8Gi87V8I/AAAAAAAADDc/xpLQ5jnX_Gk/s1600/g-buzz.png'/></a>
</center>
</div>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
scoopeo_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://scoopeo.com/clicker/insert/large' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>Email
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</center>
</div>
</div>
<font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>
</b:if>
أخيرا قم بحفظ القالب و إذهب للمعاينة,فلا تنسى التعليق على هذا الموضوع,في إنتظار تشجيعاتكم

هناك 27 تعليقًا:

  1. بارك الله فيك ان استفت من كثير بنتضار جديدك بفارغ الصبر

    ردحذف
  2. شكرا جزىل الشكر لصديقي ابو اياد على هده اضافات جميلة جدا

    ردحذف
  3. جزاك الله خيرا عملت كل الخطوات بالظبط بس مفيش حاجة ظهرت
    ؟؟؟؟؟؟؟

    ردحذف
  4. أي متصفح تستعملين،؟؟؟أعتقد أنها تعمل جيدا فقط على فايرفوكس

    ردحذف
  5. بستعمل فايرفوكسس

    ردحذف
  6. قومي بالتعديل على القيمة top:200px ذات اللون الأحمر وذلك بتغيير القيمة إلى قيم أخرى أكبر أو أصغر

    ردحذف
  7. السلام عليكم

    أعجبني كثيرا الموضوع اخي الكاتب اياد بس انا ما قدرت اصبق الشرح بتاعك يا ريت توضح لي اكثر لو سمحت

    وأنا منتضر الرد منك

    ردحذف
  8. غير معرف1:05 ص

    السلام عليكم
    انا لم اجد
    اعمل ايه

    ردحذف
  9. غير معرف1:07 ص

    data:post.body

    ردحذف
  10. بارك الله بك ... أخي على هذا الموضوع ...

    http://leave1name.blogspot.com

    ردحذف
  11. جزاك الله خيرا
    تم التطبيق على المدونه
    http://www.e-business3.info/

    ردحذف
  12. السلام عليكم أبو إياد
    اتبعت نفس الخطوات ولم يظهر عندي شيء
    فما السبب ، بارك الله فيك ؟

    ردحذف
  13. السلام عليكم أبو إياد
    اتبعت نفس الخطوات ولم يظهر عندي شيء
    فما السبب ، بارك الله فيك ؟
    www.google--plus.blogspot.com

    ردحذف
  14. شكرا اخى ابو اياد ع الدرس الرائع والمفيد ..
    قمت باتباع جميع الخطوات كما ذكرت

    وغيرت القيمة top:200px
    لكن للاسف لم تظهر عندى فما السبب
    رابط مدونتى اذا اردت الاطلاع عليها
    http://mawalmp3.blogspot.com/

    ردحذف
  15. غير معرف2:41 م

    طبقت الطريقة بالتفصيل ولن يظهر لى اى شى فما السبب من فضلك

    ردحذف
  16. تسلم ابو اياد
    http://maazikatv.blogspot.com

    ردحذف
  17. بـــآآرك الله بك ياغالي مشكور بشكل كبير

    ردحذف
  18. شكرا لك على المجهود

    ردحذف
  19. تسلم يا باشا على الموضوع الجامد ده
    ياريت لو تشرفنى وتقولى ايه رايك في مدونتى
    http://mazika-4arab.blogspot.com/
    ومش عارف اعملها اعلان ادسنس

    ردحذف
  20. أزال المؤلف هذا التعليق.

    ردحذف
  21. ممكن كود المفضلات اللي انت مستعملها
    وطريقة اضافته في موقع

    ردحذف
  22. لو سمحت عندي مشكلة كيف احط قائمة لمدونتي؟

    ردحذف
  23. دمت موفقا يا اخي وتمالتجربة والتركيب
    http://www.ilofo.com

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية