شرح الكود وأهميته في المدونة
هذا الكود يُستخدم لإنشاء زر اشتراك تفاعلي في مدونة بلوجر، مع إضافة صورة متحركة (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>
الخلاصة
هذا الكود يُعد أداة فعالة لزيادة تفاعل الزوار وتعزيز عدد المتابعين في مدونتك. بفضل تصميمه الجذاب وتفاعليته، يمكن أن يساهم بشكل كبير في نجاح مدونتك.