برای استعلام یا ارسال سفارش اینجا کلیک کنید.

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

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

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

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

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

هاست و دامنه ندارید!؟ سفارش دهید
من محمد پورداداش متولد سال ۱۳۶۷ در خدمت شما هستم. طراحی گرافیک و وب مهترین مسئولیت من بوده و است. سعی خواهم کرد بهتر از همیشه در خدمت شما باشم. خوب بودن به حرف نیست به رفتار نیک و عمل پسندیده است.
در کانال ما عضو شوید و از آخرین اخبار ، محصولات و تخفیف با خبر شوید... کانال تلگرام وبیت

محصولات پیشنهادی به شما

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده اید و با آن موافق هستید.

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

نیما گفته :کاربر سایت
1395-08-21 20:38پاسخ دهید

دوستان اگر مشکلی در نمایش تصویر داشتن
کدهای زیر رو به همین صورت تغییر بدید
.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;
}

محمد پورداداش گفته :مدیر سایت
1395-08-22 10:48پاسخ دهید

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

آخرین نمونه کار ها مشاهده همه

آخرین طرح های اختصاصی اجرا شده