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

شرح الكود وأهميته في المدونة

هذا الكود يُستخدم لإنشاء زر اشتراك تفاعلي في مدونة بلوجر، مع إضافة صورة متحركة (GIF) لجذب انتباه الزوار. الكود يتكون من جزأين رئيسيين: تنسيقات CSS وهيكل HTML. دعنا نشرح كل جزء بالتفصيل:

تنسيقات CSS (الأسلوب):

تم استخدام CSS لتحديد شكل وتصميم العناصر في الكود. إليك شرح الأجزاء الرئيسية:

كلاس .najiri-bo:

• الخلفية: تم استخدام تدرج لوني linear-gradient من اللون الوردي #e91e63 إلى اللون البنفسجي الداكن rgb(45, 33, 63).
• الإطار: تم إضافة إطار بسمك 4 بكسل border بلون وردي #e91e63، مع زوايا مدورة border-radius: 8px.
• تأثير الإطار: تم استخدام صورة SVG كإطار border-image مع تأثير متحرك animation يعطي مظهرًا جذابًا.
• الحشو: تم إضافة حشو داخلي padding: 15px لخلق مسافة بين المحتوى وحواف العنصر.

كلاس .najiri-demo:

• الزر: تم تصميم زر تفاعلي بلون وردي #ff4081 مع زوايا مدورة border-radius: 4px.
• التفاعل: عند تمرير الماوس فوق الزر hover، يظهر تأثير ظل box-shadow يعطي إحساسًا بالعمق.
• النص: تم تنسيق النص داخل الزر بلون أبيض شفاف rgba(255,255,255,0.8) وحجم خط مناسب font-size: 1em.

كلاس .najiri-z:

• الصورة: تم تحديد حجم الصورة المتحركة width: 80px ووضعها بشكل مطلق position: absolute فوق الزر.
• الموقع: تم استخدام margin-top: -44px لرفع الصورة قليلاً فوق الزر، مما يعطي مظهرًا جذابًا.

هيكل HTML:

هذا الجزء يحدد كيفية عرض العناصر في المدونة.

<div class="najiri-bo">:

هذا العنصر يعمل كحاوية تحتوي على نص دعوة للاشتراك (إشترك ليصلك أهم المستجدات) والزر التفاعلي.

<a class="najiri-demo">:

هذا هو الزر التفاعلي الذي يحتوي على صورة متحركة <img> ونص (إنضم إلى أعضاء). عند النقر على الزر، يتم توجيه المستخدم إلى رابط الاشتراك في المدونة href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=2658705137591797489" .

<img class="najiri-z">:

هذه هي الصورة المتحركة (GIF) التي تظهر فوق الزر لجذب الانتباه.

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

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

مثال على كيفية استخدام الكود:

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

نصائح لتحسين الكود:

• تحسين التوافق مع الهواتف: يمكنك إضافة استعلامات وسائط @media لتعديل حجم الصورة والزر على الشاشات الصغيرة.
• إضافة تأثيرات إضافية: يمكنك إضافة تأثيرات CSS مثل التمايل animation أو التدرج اللوني المتحرك لجعل الزر أكثر جاذبية.
• تحسين سرعة التحميل: تأكد من أن الصورة المتحركة (GIF) ليست كبيرة الحجم حتى لا تؤثر على سرعة تحميل المدونة.

الكود كاملا

<style>
.najiri-bo{ background:linear-gradient(to left, #e91e63, rgb(45, 33, 63));border: 4px solid #e91e63;border-radius: 8px;padding: 15px;
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1}
/* btn demo */ .najiri-demo{ margin: 10px auto;
text-align: center; text-decoration: none; cursor:pointer!important;
overflow:hidden; text-decoration:none; display:inline-block;
-webkit-appearance:none; font-size:1em; border-radius:4px;
color:rgba(255,255,255,0.8); font-weight:300;padding:5px 20px 20px 20px;
margin:0 15px; box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s; background:#ff4081; }
.najiri-demo:hover{ box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
position:relative;overflow:hidden;-webkit-transform:translatez(0) }
  /* استعلامات الوسائط لتعديل التنسيقات على الشاشات الصغيرة */
  @media (max-width: 768px) {
    .najiri-bo {
      padding: 10px; /* تقليل الحشو */
    }

    .najiri-demo {
      font-size: 0.9em; /* تصغير حجم الخط */
      padding: 8px 15px; /* تعديل الحشو */
    }

    .najiri-z {
      width: 50px; /* تصغير حجم الصورة أكثر */
      margin-top: -25px; /* تعديل المسافة العلوية */
    }
  }

  @media (max-width: 480px) {
    .najiri-bo h2 {
      font-size: 1.2em; /* تصغير حجم العنوان */
    }

    .najiri-demo {
      font-size: 0.8em; /* تصغير حجم الخط أكثر */
      padding: 6px 12px; /* تعديل الحشو */
    }

    .najiri-z {
      width: 40px; /* تصغير حجم الصورة أكثر */
      margin-top: -20px; /* تعديل المسافة العلوية */
    }
  }
</style>
<div class="najiri-bo" >
إشترك ليصلك أهم المستجدات programs
<br />
<br />
<p style="text-align:center;">
<a class="najiri-demo" target="_blank" rel="noopener nofollow" href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=2658705137591797489">
<img class="najiri-z" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixuUHpZCe1h4S4us4PQPdiE65Rldqo3vbzyDL7VnPVJ_5WmbzVgESpIXZ3qTxPs_Imjx-eqMPqS_95gSGN5gb-oQOm9JV_TzJB9cPRLNv8mjUgEJBYWOEBijYkedeaHNKbFIXoBru49f8/s1600/mdwab1.gif" style="
position: absolute;
width: 80px;
margin-left: auto;
margin-right: auto;
margin-top: -44px;
z-index: 9998;
" />
<br />
إنضم إلى أعضاء
</a></p>
</div>
    

الخلاصة

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