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

شرح كود زرين تفاعليين باستخدام Font Awesome

شرح الكود

مكتبة Font Awesome

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>

الوظيفة: يتم تحميل مكتبة Font Awesome التي تحتوي على مجموعة كبيرة من الأيقونات (Icons) التي يمكن استخدامها في التصميم.

الأهمية: توفر الأيقونات مظهرًا جذابًا واحترافيًا للأزرار.

التنسيقات (CSS)

<style>
#wrap {
  margin: 20px auto;
  text-align: center;
}
#wrap br {
  display: none;
}
.btn-slide, .btn-slide2 {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 200px;
  line-height: 50px;
  padding: 0;
  border-radius: 50px;
  background: #fdfdfd;
  border: 2px solid #09c;
  margin: 10px;
  transition: .5s;
}
.btn-slide2 {
  border: 2px solid #efa666;
}
.btn-slide:hover {
  background-color: #09c;
}
.btn-slide2:hover {
  background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
  left: 100%;
  margin-left: -45px;
  background-color: #fdfdfd;
  color: #09c;
}
.btn-slide2:hover span.circle2 {
  color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
  left: 40px;
  opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
  opacity: 1;
  left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
  display: block;
  background-color: #09c;
  color: #fff;
  position: absolute;
  float: left;
  margin: 5px;
  line-height: 42px;
  height: 40px;
  width: 40px;
  top: 0;
  left: 0;
  transition: .5s;
  border-radius: 50%;
}
.btn-slide2 span.circle2 {
  background-color: #efa666;
}
.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {
  position: absolute;
  left: 90px;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  color: #30abd5;
  transition: .5s;
}
.btn-slide2 span.title2, .btn-slide2 span.title-hover2 {
  color: #efa666;
  left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
  left: 80px;
  opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
  color: #fff;
}
</style>
    

الوظيفة: هذا الجزء يحتوي على تنسيقات CSS لتحديد شكل الأزرار وتفاعليتها.

التفاصيل:

• #wrap: يُنظّم محتوى الأزرار ويجعلها في وسط الصفحة.
• .btn-slide, .btn-slide2: تنسيقات عامة للأزرار، مثل الحجم، اللون، الحدود، والزوايا المدورة.
• :hover: يُحدد التغييرات التي تحدث عند تمرير الماوس فوق الزر، مثل تغيير لون الخلفية أو تحريك الأيقونة.
• .circle, .circle2: تنسيقات الأيقونة داخل الزر، مثل الحجم، اللون، والحركة.
• .title, .title-hover: تنسيقات النصوص داخل الزر، مثل الخط، اللون، والحركة.

الأزرار (HTML)

<div id="wrap">
  <a class="btn-slide" href="https://cnetjo.blogspot.com/" target="_blank">
    <span class="circle"><i class="fa fa-rocket"></i></span>
    <span class="title">معاينة</span>
    <span class="title-hover">اضغط هنا</span>
  </a>
  <a class="btn-slide2" href="https://cnetjo.blogspot.com/" target="_blank">
    <span class="circle2"><i class="fa fa-download"></i></span>
    <span class="title2">تحميل</span>
    <span class="title-hover2">اضغط هنا</span>
  </a>
</div>
    

الوظيفة: هذا الجزء يُنشئ زرين تفاعليين.

التفاصيل:

• class="btn-slide": يُحدد الزر الأول بتصميم معين.
• class="btn-slide2": يُحدد الزر الثاني بتصميم مختلف.
• <i class="fa fa-rocket"></i>: أيقونة الصاروخ من مكتبة Font Awesome.
• <i class="fa fa-download"></i>: أيقونة التحميل من مكتبة Font Awesome.
• <span class="title">: النص الرئيسي الذي يظهر على الزر.
• <span class="title-hover">: النص الذي يظهر عند تمرير الماوس فوق الزر.

أهمية الكود وفوائده في المدونة

جذب انتباه الزوار

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

تحسين تجربة المستخدم

• الأزرار توفر واجهة تفاعلية وسهلة الاستخدام للزوار.
• النصوص التي تتغير عند التمرير (مثل "معاينة" إلى "اضغط هنا") توفر إرشادات واضحة للزوار.

زيادة التفاعل

• يمكن استخدام هذه الأزرار لتوجيه الزوار إلى روابط مهمة، مثل صفحات أخرى، ملفات للتحميل، أو مواقع خارجية.
• الأزرار التفاعلية تزيد من احتمالية قيام الزوار بالإجراء المطلوب (مثل النقر أو التحميل).

التخصيص

• يمكن تعديل الألوان، الأحجام، والأيقونات بسهولة لتتناسب مع تصميم المدونة.
• يمكن إضافة المزيد من الأزرار بنفس التصميم بسهولة.

كيفية استخدام الكود في المدونة

1. انسخ الكود بالكامل (CSS + HTML).
2. الصقه في قسم HTML/JavaScript في مدونتك (من خلال لوحة تحكم بلوجر).
3. غيّر الروابط (href) والأيقونات (fa fa-rocket أو fa fa-download) والنصوص (معاينة، تحميل) حسب احتياجاتك.
4. احفظ التغييرات وشاهد النتيجة على مدونتك.

أمثلة على استخدامات الأزرار

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

نصائح لتحسين الأزرار

• تأكد من أن الروابط تعمل بشكل صحيح.
• استخدم ألوانًا متناسقة مع تصميم مدونتك.
• اختبر الأزرار على أجهزة مختلفة (كمبيوتر، هاتف) للتأكد من أنها تعمل بشكل جيد.