learndl learndl triboon

آموزش اضافه کردن نوار اطلاعیه در سایت

notice-bar

اضافه کردن نوار اطلاعیه

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

راهنمای اضافه کردن نوار اطلاعیه

خوب برای این کار شما نیاز به کمی دانش html , css دارید خوب ما یادتان میدهیم چگونه این کار رو انجام بدید.
فایل استایل یا همان style.css خود را باز کرده و کدهای استایل نوار اطلاعیه را در آن بریزید.

.notice {
    margin-bottom: 10px;
    border-radius: 3px;
    padding: 5px 10px;
    font: 11px/21px tahoma;
    color: #FFF;
}
.notice:before {
    content: "";
    background: url('close.png') no-repeat;
    height: 16px;
    width: 16px;
    float: right;
    margin: 3px 0px 0px 8px;
}
.notice a {
    padding: 0px 5px;
    color: #fff;
	font-size:10px;
}
.notice.orange{
	background:#FF9147;
}
.notice.blue{
	background:#5C90D2;
}
.notice.red{
	background:#DD1B49;
}
.notice.black{
	background:#555;
}

سپس فایل close.png در کنار فایل استایل بات همین نام کپی کنید.

دانلود فایل close.png

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

<div class="notice orange">
<span>چند روزی بود تیکت های مشتریان رویت نمی شد که امروز این مشکل حل شد.</span>
<a target="_blank" href="http://vebeet.com">اطلاعات بیشتر...</a>
</div>
<div class="notice blue">
<span>چند روزی بود تیکت های مشتریان رویت نمی شد که امروز این مشکل حل شد.</span>
<a target="_blank" href="http://vebeet.com">اطلاعات بیشتر...</a>
</div>
<div class="notice red">
<span>چند روزی بود تیکت های مشتریان رویت نمی شد که امروز این مشکل حل شد.</span>
<a target="_blank" href="http://vebeet.com">اطلاعات بیشتر...</a>
</div>
<div class="notice black">
<span>چند روزی بود تیکت های مشتریان رویت نمی شد که امروز این مشکل حل شد.</span>
<a target="_blank" href="http://vebeet.com">اطلاعات بیشتر...</a>
</div>

طبق کدهای که گذاشته شده رنگ های باکس های اطلاعیه ها  از اسم کلاس ها واضح است.
برای مشاهده نسخه نهایی فایل زیر رو دانلود و مشاهده نمایید.

دانلود نسخه نهایی

همچنین برای این کار افزونه نوار اطلاعیه در وردپرس ساخته شده توسط میهن وردپرس را نیز ببینید .

کار تمام شد و شما موفق شدید.
سلامت و پیروز باشید.

به این مطلب امتیاز دهید

امتیاز کلی : 4.3 / 5. تعداد آرا : 3

اولین نفر باید که به این مطلب امتیاز میدهید

وبیت این پست توسط نگارش شده است.

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

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 2 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود
  • نیما 21 آبان 1395 پاسخ

    دوستان اگر مشکلی در نمایش تصویر داشتن
    کدهای زیر رو به همین صورت تغییر بدید
    .notice:before {
    content: open-quote;
    background: url(wp-content/themes/نام پوشه تم شما /close.png) no-repeat;
    height: 16px;
    width: 16px;
    float: right;
    margin: 3px 0px 0px 8px;
    }

    • محمد پورداداشمدیر سایت[ در پاسخ به نیما ] 22 آبان 1395 پاسخ

      ممنون بابت راهنما

همکاران وبیت