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

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

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

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

خوب برای این کار شما نیاز به کمی دانش 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>

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

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

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

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