في هذه التدوينة سنرى كيف يمكنك إضافة شريط إشعارات ثابت إلى مدونتك على بلوجر مع تأثير انزلاق jQuery. لا بد أنك رأيت العديد من المدونات تستخدم هذا النوع من أشرطة الإشعارات الثابتة لعرض آخر الأخبار أو الإعلانات أو الفعاليات، حتى لا يفوّت قراؤها أي معلومة مهمة. من المهم جداً تزويد قرائك على الإنترنت بآخر المعلومات عن المدونة لزيادة جمهور القراء.

شريط الإشعارات هذا مكتوب بـ HTML/CSS وjQuery. تأثيرات الانزلاق الجميلة لإظهار الشريط وإخفائه منشأة باستخدام jQuery. لا يحتوي الشريط على محتوى فلاش أو صور ثقيلة، لذا لن يزيد من زمن تحميل صفحات مدونتك. يمكنك أيضاً تخصيص شكله ومظهره، وهو ما سنتناوله في جزء التخصيصات. أولاً، لنلقِ نظرة على خطوات إضافة هذه الودجة إلى مدونتك.

مقالات موصى بها

كيفية إضافة شريط الإشعارات الثابت بـ jQuery

سجّل الدخول إلى حسابك في بلوجر.
انقر على القالب وخذ نسخة احتياطية كاملة من مدونتك. هذا مستحسن قبل إجراء أي تغيير على القالب.
الآن ابحث عن وسم <head> وأضف الكود التالي تحته مباشرة:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

إذا كنت قد أضفت بالفعل ملف jQuery إلى مدونتك، يمكنك تخطي الخطوة أعلاه.
الآن، قبل وسم </head> مباشرة، ضع الكود التالي:

<script type="text/javascript">
jQuery(document).ready(function()
{
  jQuery('#UT-up').click(function()
  {
    jQuery('#UT-up').fadeOut('100');
    jQuery("#UT-notify").slideUp('1000',function()
    {
      jQuery('#UT-down').slideDown('fast',function()
      {
        jQuery('#UT-down-img').fadeIn('2000');
      });
    });
  });

  jQuery('#UT-down').click(function()
  {
    jQuery('#UT-down').slideUp('fast',function()
    {
      jQuery('#UT-up').fadeIn('2000');
      jQuery("#UT-notify").slideDown('1000');
    });
  });
});
</script>

استخدم CTRL+F للعثور على الكود ]]></b:skin> وضع الكود التالي أسفله:

<style>
#UT-notify
{
height:30px;
background-color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
position:fixed;
top:0;
left:0;
right:0;
width:100%;
text-align:center;
box-shadow:0px 0px 1px 2px #0F0;
border-radius:0px 0px 5px 5px;
z-index:1000;
}
#UT-notify a, #UT-notify a:hover, #UT-notify a:visited
{
color:#FFF;
text-shadow:#CCC 0px 1px 0px;
text-decoration:none;
}
#UT-up
{
position:fixed;
top:8px;
right:20px;
z-index:1000;
cursor:pointer;
}
#UT-down
{
position:fixed;
top:0px;
right:15px;
z-index:1000;
display:none;
cursor:pointer;
height:30px;
width:30px;
background-color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
border-radius: 0px 0px 5px 5px;
box-shadow:0px 0px 1px 2px #0F0;
}
#UT-down-img
{
position:fixed;
right:20px;
top:10px;
}
#UT-nofifications
{
margin-top:5px;
}
</style>

اضغط CTRL+F للعثور على وسم <body> (في بعض القوالب يحتوي وسم body على خصائص إضافية، فابحث حينها عن <body).
ضع الكود التالي مباشرة تحت هذا الوسم:

<div id="UT-notifications-Wrap">
  <div id="UT-down">
    <img src="YOUR_DOWN_ARROW_IMAGE_URL" title="Show Notification bar" alt="show-notice" id="UT-down-img"/>
  </div>
  <div id="UT-notify">
    <span id="UT-up">
      <img src="YOUR_UP_ARROW_IMAGE_URL" title="Hide Notification bar" alt="hide-notice"/>
    </span>
    <div id="UT-nofifications">
      <!--Write your notifications below and give hyperlinks-->
      <a href="https://www.yourblog.com/your-first-link" target="_blank">First announcement</a>&nbsp;|&nbsp;
      <a href="https://www.yourblog.com/your-second-link" target="_blank">Second announcement</a>&nbsp;|&nbsp;
      <a href="https://www.yourblog.com/your-third-link" target="_blank">Third announcement</a>
    </div>
  </div>
</div>

الآن غيّر عناوين الإشعارات حسب احتياجاتك واستبدل الروابط بروابطك الخاصة. استبدل أيضاً رابطي صورتي السهمين بأيقونات أسهم صغيرة (أعلى/أسفل) خاصة بك.
احفظ القالب وانقر على عرض المدونة لرؤية شريط الإشعارات وهو يعمل.

نصيحة مفيدة

إذا كنت تريد تغيير محتوى شريط الإشعارات هذا بانتظام، فنوصيك بإضافة كود الخطوة 8 في أداة HTML/JavaScript من نافذة التخطيط بدلاً من وضعه تحت وسم body. سيتيح لك ذلك تحديث الإشعارات بسهولة دون تعديل القالب في كل مرة.

التخصيصات

لتغيير لون الخلفية الرئيسي، غيّر قيم background-color:#333 في كود CSS.
لتغيير لون الروابط، غيّر قيمة color:#FFF في قاعدة #UT-notify a.

لقد أضفت بنجاح شريط الإشعارات الثابت بتأثيرات انزلاق jQuery إلى مدونتك. يمكنك الاطلاع على قسم نصائح وحيل بلوجر لمزيد من نصائح التدوين وتحسين محركات البحث.

شريط إشعارات ثابت ومتحرك لبلوجر

مقالات موصى بها

كيفية إضافة شريط الإشعارات الثابت بـ jQuery

نصيحة مفيدة

التخصيصات