CSS, jQuery

ایجاد نوار شناور اطلاع رسانی رایگان hellobar.com با jQuery

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

اخیرا یک نوار اطلاع رسانی جالب بنام Hellobar.com پیدا کردم و تصمیم گرفتم ازش استفاده کنم.

کاری را که انجام می داد دوست داشتم ولی زیاد برام جالب نبود ماهانه ۵$ برای پلاگینی بدم که تو یک عصر جمعه می تونستم اون را بنویسم آن هم با محدودیت ۲۵ کلیک ماهانه روی لینک .بنابراین تصمیم گرفتم یک راه جایگزین برای hellobar.com بنویسم و اینجا قرار بدم تا هر کسی خواست بتواند از اون استفاده کند.

یک نمونه از آن را می توانید در این سایت بینید : http://www.jobdeals.com/about

 

برای دیدن سایز بزرگ روی عکس بالا کلیک کنید

این نوار زیبا می تواند وسیله خوبی برای تبلیغ یک کالا ، ایبوکی که نوشته اید و یا افزایش هواداران تان در شبکه های اجتماعی مختلف باشد.

فایل های گرافیکی مورد نیاز را می توانید از پایین ذخیره کنید :

Up Arrow

Up Arrow Hover

hellobar.com source code example

Down Arrow

مطمئن شوید که کتابخانه jQuery را در بخش <head> صفحه اضافه کرده اید ، البته اگر از قبل نبود .

اجازه دهید با کدهای جاوااسکریپت شروع کنیم .کدهای زیر را جایی در بدنه <head> قرار دهید :

حالا کدهای HTML زیر را بعد از تگقرار دهید :

اضافه کنم که این نوار در مرورگرهای مدرن تست شده است . به خوبی کار می کند (Chrome, FF, Safari, ioS/Android, IE, و …)

حالا فقط استایل های دوست داشتنی مانده اند که باید در بخش <head> اضافه کنید :

شما به راحتی می توانید رنگ این نوار را در ۴ جا که از کد زیر استفاده شده است ، تغییر دهید :

/* << set custom bar color here */

امیدوارم ازش استفاده کنید و مفید باشه

منبع

8 Comments

  1. سلام
    ممنون از نوشه خوبتون.
    یه سوال داشتم: اگه بخوایم همین کارو انجام بدیم ولی بجای قرار گیری نوار در بالای پنجره کاری کنیم که پایین پنجره بچسبه باید چه کرد؟

    1. سلام دوست عزیز
      ممنون .برای این کار باید چند جا رو ویرایش کنید .اول در بخش جاوااسکریپت در خط های ۸ و ۱۳ و ۲۴ عبارت marginTop رو به marginBottom تغییر بدید.
      بعد در بخش css در خط ۴ عبارت top رو به bottom تغییر بدید.در خط ۱۷ عبارت border-bottom رو به border-top تغییر بدید.در خط ۲۴ هم top رو به bottom تغییر داده و مقدار -۱۰ رو هم به ۱۰ تغییر بدید.در خط ۲۹ هم جای ۵ و ۷ رو عوض کنید.
      برای بهتر شدن می تونید سمت عکس های فلش رو هم تغییر بدید.

  2. در کل فکر نکنم ایده خوبی باشه. هم دو فایل پر حجم به درخواست های دانلود صفحه اضافه میشه و هم از یک سایت خارجی درخواست اطلاعات میکنه که سرعت رو بیشتر میاره پایین. ویدگت های معادل های برای وردپرس با همین کاربرد هست.

    1. نه زیادم پر حجم نیست اگه minimal هم بشن خیلی سایزشون کمتر میشه . جی کوئری هم که تو اکثر طرح ها از قبل هست .خوب شما می تونین همه فایل ها رو بزارید رو هاست خودتون تا از سایت خارجی نخونه .ضمن اینکه ممنون میشم اگه پلاگین مشابهی برای وردپرس هست معرفی کنید ،شاید سیستم کسی وردپرس نبود و خواست از این استفاده کنه . اگر هم پلاگینش باشه باز استفاده از این توصیه می شه چون استفاده از پلاگین درسته کنترل بیشتری میده ولی خودش حجم بیشتری از منابع سرور رو می گیره

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *