زر بتلوين تدريجي

زر بتلوين تدريجي

يوجد الآن مشاهدة التعليقات : 11

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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


شرح  طريقة التركيب
1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن  ]]></b:skin>  أو ضعه بين <style>  </style>
3. ضع الكود التالي قبله [ فوقه ]
.buttonz{display:inline-flex;border-radius:4px;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;color:#FFF!important;
background:url(//ar1web-com.googlecode.com/svn/trunk/rainbow.png);background-size:cover;padding:8px 25px;text-shadow:none;transition:all 1s;}
.buttonz:hover, .buttonz:hover, .buttonz.link:hover {box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);} 

4. ضع الكود التالي إما فوق </head> أو فوق </body>
 <script type='text/javascript'>
var intval = null;
var pos = 0;
$(document).ready(function() {
intval = window.setInterval(moveBg, 70);
});
function moveBg() {
pos++; 
$('.buttonz').css({backgroundPosition: (pos * 1) + '% 1px'});
}
  </script> 

5. لتفعيل الزر ضع الكود التالي بداخل الموضوع بتبويب HTML
 <a class='buttonz' href='هنا الرابط' target='_blank'>إسم الزر</a> 
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

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

  1. شكرا جزيلا لك أخي

    عندي أستفسار أتمنى أنك ترد عليه كيف أضع أعلان بجانب شعار مدونتي لأنه المساحة الفارغة كبيرة
    www.66GS66.com

    ردحذف
  2. من التخطيط بجانب مكان إضافة الشعار ستجد أداة بالجانب الأيسر أضف هناك الإعلان

    ردحذف
  3. لا يوجد بجانب الشعار أداة

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

    ردحذف
  4. Mister Abdellah4/26/2015

    شكرا جزيلا لك أخيعندي أستفسار أتمنى أنك ترد عليه كيف اغير شكل تعليقات مدونتي الى شكل تعليقات مدونتك مع انني استعمل تعليقات بلوجر و ليس dISQUS

    ردحذف
  5. حمل هذا القالب توجد به أداة: http://www.ar1web.com/2014/06/flat-mag-blogger.html

    ردحذف
  6. عليك بتغيير كافة الأكواد بتعليقات بلوجر، توجد أشكال في مدونات تقدم الأكواد ما عليك إلاّ البحث في جوجل.

    ردحذف
  7. شكرا لك ممكن إني أطلب منك كود الميت تاج تبعك ؟
    مع كامل الإحترام

    ردحذف
  8. Ayoub Asb4/26/2015

    سلام اخي انا اريد كيفية وضع اعلان مثل الذي يوجد بجانب معلومات التدوينة في قالبك علما ان قالبي فيه مكانه لكن فارغ مكتوب فية 300 في 250 فقط و انا اريد وضع الاعلان مكانها

    ردحذف
  9. mohammed4/27/2015

    السلام عليكم ورحمة الله وبركاته

    اخي في مدونتي لا تظهر الاضافات لا ادري لماذا

    لو تتكرم وتقولي الحل

    ردحذف
  10. ilyas_aouadi4/27/2015

    اضافة رائعة شكرا

    http://tknielantrnat.blogspot.com/

    ردحذف
  11. احمد5/01/2015

    اخي الله يرضة عنك تعبت وانا احاول اضهار صفحة اتصل بي في هذا القالب .. عندك حل ..

    http://rayashiq.blogspot.com/

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم