إضافة أزرار تابعني تقفز من داخل السلة لمدونات بلوجر

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


1.انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي :لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

]]></b:skin>
2.ثم قم بلصق قبله هذا الكود :

.stack {
position: fixed;
bottom: -5px; right: 940px; }
.stack > img { position: relative;
cursor: pointer;
padding-top: 28px;
z-index: 2;
}
.stack ul { list-style: none;
position:absolute;
top: 5px;
cursor: pointer; z-index: 1;
}
.stack ul li { position: absolute;
}
.stack ul li img { border: 0;
}
.stack ul li span { display: none;
}
.stack .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 0px;
position:absolute;
top: 17px;
right:60px;line-height: 14px;border: 0;background-color:transparent;padding: 0px 0px;
border-radius: 10px;-webkit-border-radius: 0px;
-moz-border-radius: 0px;color: #4F3939;text-align: center;
text-shadow: #000 1px 1px 1px;opacity: .85;filter: alpha(opacity = 85);
}/* IE Fixes */.stack { _position: absolute; }.stack ul { _z-index:-1; _top:-15px; }.stack ul li { *right:5px; }
يمكنك تبديل القياسات ذات اللون الأحمر لإختيار موضع الأداة في مدونتك .

3.انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :
(لا تضع للأداة أي عنوان)

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" /><ul id="stack">

<li><a href="http://www.facebook.com/pages/mdwnt-abw-ayad/129817460386636"><span></span><img alt="Facebook" src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseBy0fACpI/AAAAAAAAAko/mVIO1rP2a7g/s320/facebook.png" ilo-full-src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseBy0fACpI/AAAAAAAAAko/mVIO1rP2a7g/s320/facebook.png" /></a></li>

<li><a href="http://feeds.feedburner.com/feedburner/simo"><span></span><img alt="RSS" src="http://www.trables.com/social_images/rss.png" ilo-full-src="http://www.trables.com/social_images/rss.png" /></a></li>

<li><a href="http://www.youtube.com/simochardo"><span></span><img alt="youtube" src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" ilo-full-src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" /></a></li>

<li><a href="http://twitter.com/abuiyad007"><span></span><img alt="technorati" src="http://2.bp.blogspot.com/_JUJEXEamsyU/SseBvuXqEbI/AAAAAAAAAkY/sZbUDV5zNH0/s320/twitter.png" ilo-full-src="http://2.bp.blogspot.com/_JUJEXEamsyU/SseBvuXqEbI/AAAAAAAAAkY/sZbUDV5zNH0/s320/twitter.png" /></a></li>



<li><a href="http://delicious.com/chardo007"><span></span><img alt="delicious" src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseB3LY7lkI/AAAAAAAAAk4/1lsxOZ_klP4/s320/delicious.png" ilo-full-src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseB3LY7lkI/AAAAAAAAAk4/1lsxOZ_klP4/s320/delicious.png" /></a></li></ul></div>

<!-- end div .stack --><script src="https://sites.google.com/site/mohamedabuiyad/button/jquery.min.js" type="text/javascript"></script><script src="https://sites.google.com/site/mohamedabuiyad/button/fisheye-iutil.min.js" type="text/javascript"></script>

<span ><a href="http://www.monte-escalier-prix.org/" target="_blank"></a></span>
لا تقم بتبديل صورة السلة التي تتمثل بالروابط ذات اللون الأزرق فإن بدلت الروابط لن يظهر لك شىء مكان الأداة::(
لا تنسى تبديل الروابط ذات اللون الأحمر بالروابط الخاصة بك .:yawn:
1.رابط صفحة الفيسبوك لديك
2.رابط الخلاصات RSS
3.رابط قناتك الخاصة على التويتر
4.رابط التويتر
5.رابط الدلسيوز
ليس شرطا أن تكون لديك جميع هذه الروابط حتى تقوم بإضافتها ،يمكنك التحكم في عدد الأزرار المراد تركيبها.:wave:

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

  1. طريقة جد رائعة و أريد ان أشكرك على هده الخدمات التي توفرها

    ردحذف
  2. لا شكر على واجب أخي الكريم ،شكرا لك لمتابعتك مدونتنا المتواضعة

    ردحذف
  3. شرح رائع اخوي ابواياد واتمنا لك التوفيق

    ردحذف
  4. ما شاء الله درس كامل
    جزاك الله كل خير على العمل المميز وان شاء الله يستمر التميز
    اخي الغالي
    وبانتضار جديدك الحصري دائماً ,,
    جاري تجريب الاضافة

    ردحذف
  5. Thanks man i translate ur Blog and now i well try it on my company blog.

    ردحذف
  6. موضوع مفيد فعلا
    ومدونة رائعة والdesign اكتر من رائع

    ردحذف
  7. بعد التجربة تبين ان الموضوع ينقصه مكتبة ال jquery !

    تحياتي لك اخي الكريم

    ردحذف
  8. بلى أخي خالد ، لقد قمت بتغيير هذا الرابط
    http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
    برابط آخر خاص بي على موقع google site
    https://sites.google.com/site/mohamedabuiyad/button/jquery.min.js
    تحياتي لك اخي الكريم

    ردحذف
  9. عاشو يا ابو اياد
    اضافة مميز

    ردحذف
  10. يعطيك العافية

    ولكن كيف أضع أزرار برأس المدونة كما هو موجود ببعض المدونات

    والتي من خلاله تنقلك للصفحه أخرى به مواضيع وتعليقات

    ردحذف
  11. @Abo Emad
    عليك إضافة قائمة أفقية تضم الأزرار التي تريد عملها ،ولعمل تلك القائمة تفضل من هنا

    ردحذف
  12. لك كل الشسكر والتقدير أخ محمد

    ردحذف
  13. @يوسف
    على الرحب والسعة أخي يوسف ،مرحبا بك

    ردحذف
  14. الف شكر
    http://world-in-brief.blogspot.com/

    ردحذف
  15. ((= السلام عليكم اخي الكريم ابو اياد للاسف لم تنجح معي الاضافة بسب عدم تنسيق الموقع ولم اعرف الحل

    ردحذف
  16. شكرا لك اخي ابواياد على ماتقدمه هنا

    ردحذف
  17. مشكوررر ابو اياد
    :))Blogger

    ردحذف
  18. السلام عليكم
    أخوي أبو اياد

    انا ابغى اضيف ايقونه فلكر ..
    اذا ممكن كيف اسوي الكود او اقدر اغير الايقونه تبع الدلسيوز
    لاني لن استخدمها ينفع كذا ولا لا

    ردحذف
  19. السلام عليكم لو سمحت اريد طريقة بقلم وشكرا

    ردحذف
  20. غير معرف12:21 ص

    شكرا ابو اياد
    wwwayame.blogspot.com

    ردحذف
  21. رائعة جدا جدا جدا
    شكرا جزيلا

    ردحذف
  22. آخوي الله يسعدك ساعدني شوي ربي يرضى عليك خبرتي بالاكواد قليله اخاف اخرب المدونه على كبرها ’ ياليت تساعدني ض1

    ردحذف
  23. السلام عليكم ورحمة الله تعالى وبركاته, شكر جزيلا على الإضافة الرائعة, ولي سؤال لك إن سمحت - كيفية اجعل هذه الأزرار تتحرك مع الصفحة كما في مدونتك التجريبية
    http://abu-iyad-test.blogspot.com/
    تتحرك الأزار مع الصفحة, وشكرا-مدونة رائعة و متفردة ومبروك تأهل منتخبنا الوطني لأمم إفريقيا ;))

    ردحذف
  24. شكرا لك أخي أبو اياد

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

    ردحذف
  26. مــــــشــــــكــــــورة جـــــــداً

    ردحذف
  27. غير معرف10:46 م

    شكرا على الاضافة ابو اياد

    http://a7la7lool.blogspot.com/

    ردحذف
  28. جزاك الله خيرا> ابو اياد <وتحياتي لك من مصر وارجو قبول مدونتي ضمن المواقع الصديقة لمدونتك
    الفتي الذهبي33
    مدونة متخصصة في عالم السيارات والربح من النت وزيادة الزوار واخبار الفن والمشاهير واخبار السياسة وىخر الاخبار المحلية والعالمية

    http://goldsboy33.blogspot.com

    وجزاك الله خيرا

    ردحذف
  29. جميل اخي شكرا نجح الأمر معي

    http://estp-laayoun.blogspot.com/

    ردحذف
  30. جميل , نجح معي الأمر

    http://estp-laayoun.blogspot.com/

    ردحذف
  31. شكرا لك اخى الكريم ....
    ارجو ابداء رأيك فى مدونتى والقالب
    المصمم العربى
    http://www.arab-designer.tk

    ردحذف

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

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