أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة

عدد مشاهدات الموضوع:

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





- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات.



الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  ]]></b:skin>

ثم نضيف الكود التالي قبله .

/*sus code by Ayoub-Etmaiti */
 .Azrar-Ayoub-Etmaiti {
border-radius: 50%; /* الحدود الدائرية  */
box-shadow: 0px 0px 15px #000; /* الظل*/
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.Azrar-Ayoub-Etmaiti:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /*لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.Ayoub-Etmaiti-center {
        text-align: center /*لتوسيط الأزرار  */
}
 /*sus code by Ayoub-Etmaiti */

قم بحفظ القالب


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


<div class="Ayoub-Etmaiti-center">
<a href="رابط الفيسبوك هنا" target="_blank" title="¡فيسبوك!"><img class="Azrar-Ayoub-Etmaiti" src="http://1.bp.blogspot.com/-ZKoFaeP1f2s/UBceZWyke8I/AAAAAAAABE0/d_0vqj43WyI/s1600/sus-Ayoub-Etmaiti-facebook.png" /></a>
<a href="رابط تويتر هنا" target="_blank" title="¡تويتر!"><img class="Azrar-Ayoub-Etmaiti" src="http://3.bp.blogspot.com/-TJH_umUcQDY/UBceanQhoAI/AAAAAAAABFA/Mg0ILCRrwHM/s1600/sus-Ayoub-Etmaiti-twitter.png" /></a>
<a href="رابط يوتوب هنا" target="_blank" title="¡يوتوب!"><img class="Azrar-Ayoub-Etmaiti" src="http://1.bp.blogspot.com/-BTGMZZ-SDSg/UBcebFves8I/AAAAAAAABFI/AMmlhLKM6Bg/s1600/sus-Ayoub-Etmaiti-youtube.png" /></a>
<a href="رابط الخلاصة هنا" target="_blank" title="¡الخلاصة!"><img class="Azrar-Ayoub-Etmaiti" src="http://2.bp.blogspot.com/-HcaATl1ylms/UBceaMdkJsI/AAAAAAAABE4/qLlINjLE7nY/s1600/sus-Ayoub-Etmaiti-rss.png" /></a>
</div>
وأخيرا قم بحفظ الأداة
وهذا هو كل شئ مع تحياتي اخوكم : 

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

  1. اشكرك اخي ايوب على الاضافة

    ولكن مسالة وضع الكود الاول مرهقة فانا اكره كثرة الاكواد في خاصة في تحرير القالب ودائما افضل ان تكوت الاكواد في اداه خارجية من نوع HTML/Javascript

    حتى لاتكثر الاكواد في القالب .

    وقد جربت وضع الكود فقط دون الدخول الى القالب ونجحت الطريقة ولكن بدون ظلال او دوران

    المهم في ذلك يشرفني ان اكون من الاوائل في الرد على موضوعك وجزاك الله خيرا لكل ماتقوم به

    ردحذف
  2. فعلا هي إضافة جميلة جدا وموضوع أجمل ،واصل تميزك

    ردحذف
  3. ششششششششششششششششكرا لك

    ردحذف
  4. شكرا جزيلا أخي، بارك الله فيك ;))

    ردحذف
  5. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  6. أزرار رائعة
    ممكن تعطيني رأيك في مدونتي يا أبو إياد :
    http://freeinternet-ma.blogspot.com

    ردحذف
  7. @سيمو الدامي

    أنا سأعطيك رأيي مكان أبو إياد المدونة جيدا تحتاج الى خفظ في ارتفاع الشعار و اختيار أماكن جيد للإضافات من الأفضل أن لا تقوم بنشر مدونتك في أي مكان لانه قد يدي بك لدخول القائمة السوادء في منتدى عرب بلوجر لأنك حذفت حقوقهم من القالب مع تحياتي مزيدا من التألق.

    ردحذف
  8. أسف لعدم ردي على كل التعليقات لكن اشكركم جميعا على تعليقاتكم وتشجيعكم .

    ردحذف
  9. بسم الله الرحمان الرحيم أشكرك على هذه الاضافة الرائعة
    http://www.sihati.com/

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

    ردحذف
  11. @dzlag
    عفوا شرفتني بمرورك

    ردحذف
  12. @مواطن مصري

    في الحقيقة اخي لم استخدم جوملا في حياتي وسمعت عنها انها معقدة ولا اظن ان اضافات بلوجر ستعمل عليها.

    ردحذف
  13. جزاك الله خير ويعطيك ألف عافية.نجحت العملية
    وهذة هي مدونتي ما رأيكم فيها؟
    http://shbab-gate.blogspot.com/

    ردحذف
  14. @Mogtaba Almotaz

    المدونة حلوة لكن من الافضل ان تنقص من حجم إقرأ المزيد لانها تظهر بشكل كبير ^^'

    ردحذف
  15. ما اعرف ما فهمت وين زر متابعة عشان اظغطة وابحث عن الكلمة

    ردحذف
  16. @Fuz Alshlash

    لو فهمت سؤالك لوجدت لك جواب لكنني لم أفهم قصدك!!

    ردحذف
  17. شكرا على هذه الازرار الرائعة هل ممكن تشرح لنا كيف عملت راس مدونتك هذه لانة روعة حقيقةً

    ردحذف
  18. هل من الممكن أن تضع أيقونة للجوجل + لاضيفه أيضا ؟

    ردحذف
  19. بارك الله فيك على الموضوع القيم والمميز و في انتظار جديدك الأروع والمميز لك مني أجمل التحيات

    ردحذف
  20. بارك الله فيك على الموضوع القيم والمميز و في انتظار جديدك الأروع والمميز لك مني أجمل التحيات

    ردحذف

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

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