امروز : سه شنبه ۱۶ آذر ۱۳۹۵ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

امام حسین(ع) : بخشنده‌ترین مردم کسی است که به آنکه چشم امید به او نبسته ، بخشش ‌کند.
faradars

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>

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

حتما بخوانید  افزونه Google AMP برای وردپرس

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

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

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
آموزش اضافه کردن نوار اطلاعیه در سایت
4 از 1 رای

بازدید : 171 بار دسته بندی : آموزش ، آموزش css ، آموزش html ، آموزش وبمستر دیدگاه : ۲ تاريخ : ۱۶ آبان ۱۳۹۵
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما یاهو
محمد پورداداش

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

دیدگاه کاربران انتشار یافته : ۲ در انتظار بررسی :

محمد پورداداش
نیماکاربر سایت
00
پاسخ دهید
جمعه , ۲۱ آبان ۱۳۹۵

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

محمد پورداداش
محمد پورداداشمدیر سایت
00
پاسخ دهید
شنبه , ۲۲ آبان ۱۳۹۵

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