با اخیرا یک نوار اطلاع رسانی جالب بنام Hellobar.com پیدا کردم و تصمیم گرفتم ازش استفاده کنم.
کاری را که انجام می داد دوست داشتم ولی زیاد برام جالب نبود ماهانه ۵$ برای پلاگینی بدم که تو یک عصر جمعه می تونستم اون را بنویسم آن هم با محدودیت ۲۵ کلیک ماهانه روی لینک .بنابراین تصمیم گرفتم یک راه جایگزین برای hellobar.com بنویسم و اینجا قرار بدم تا هر کسی خواست بتواند از اون استفاده کند.
یک نمونه از آن را می توانید در این سایت بینید : http://www.jobdeals.com/about
این نوار زیبا می تواند وسیله خوبی برای تبلیغ یک کالا ، ایبوکی که نوشته اید و یا افزایش هواداران تان در شبکه های اجتماعی مختلف باشد.
فایل های گرافیکی مورد نیاز را می توانید از پایین ذخیره کنید :
Up Arrow
Up Arrow Hover
Down Arrow
مطمئن شوید که کتابخانه jQuery را در بخش <head> صفحه اضافه کرده اید ، البته اگر از قبل نبود .
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
اجازه دهید با کدهای جاوااسکریپت شروع کنیم .کدهای زیر را جایی در بدنه <head> قرار دهید :
<script type="text/javascript">
var stub_showing = false;
function woahbar_show() {
if(stub_showing) {
$('.woahbar-stub').slideUp('fast', function() {
$('.woahbar').show('bounce', { times:3, distance:15 }, 100);
$('body').animate({"marginTop": "2.4em"}, 250);
});
}
else {
$('.woahbar').show('bounce', { times:3, distance:15 }, 100);
$('body').animate({"marginTop": "2.4em"}, 250);
}
}
function woahbar_hide() {
$('.woahbar').slideUp('fast', function() {
$('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100);
stub_showing = true;
});
if( $(window).width() > 1024 ) {
$('body').animate({"marginTop": "0px"}, 250); // if width greater than 1024 pull up the body
}
}
$().ready(function() {
window.setTimeout(function() {
woahbar_show();
}, ۵۰۰۰);
});
</script>حالا کدهای HTML زیر را بعد از تگقرار دهید :
<div class="woahbar" style="display:none">
<span>
Welcome to Jobdeals! Need some help from a local service pro? <a class="woahbar-link" href="/request-services/">Request a Service FREE</a>
</span>
<a class="close-notify" onclick="woahbar_hide();"><img class="woahbar-up-arrow" src="woahbar-up-arrow.png"></a>
</div>
<div class="woahbar-stub" style="display:none">
<a class="show-notify" onclick="woahbar_show();"><img class="woahbar-down-arrow" src="woahbar-down-arrow.png"></a>
</div>اضافه کنم که این نوار در مرورگرهای مدرن تست شده است . به خوبی کار می کند (Chrome, FF, Safari, ioS/Android, IE, و …)
حالا فقط استایل های دوست داشتنی مانده اند که باید در بخش <head> اضافه کنید :
.woahbar
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 19px;
z-index: 100;
padding: 5px 0 5px 0;
text-align: center;
font-size: 110%;
color: #fff;
background-color: #EB593C; /* << set custom bar color here */
box-shadow: 0px 0px 5px #888888;
-moz-box-shadow:0px 0px 5px #888888;
-webkit-box-shadow:0px 0px 5px #888888;
border-bottom: 3px solid #fff;
font-family: Georgia,Times New Roman,Times,serif;
}
.woahbar-stub
{
position: fixed;
top: -10px;
left: 0px;
width: 100%;
height: 19px;
z-index: 200;
padding: 7px 0 5px 0;
text-align: center;
}
.woahbar span
{
float: left;
width: 95%;
text-align: center;
padding-top: 2px;
}
.woahbar-link
{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39);
box-shadow: 1px 1px 3px rgba(0,0,0,0.28);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.28);
-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.28);
color: white;
padding: 2px 8px 1px 8px;
}
.woahbar-down-arrow:hover {
background-color: #ff7f62; /* << set custom hover bar color here */
}
.woahbar-up-arrow:hover {
background: url(woahbar-up-arrow-hover.png);
}
.woahbar-link:hover
{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #5c5c5c; /* Old browsers */
background: -moz-linear-gradient(top, #5c5c5c 0%, #696969 12%, #777777 25%, #575757 39%, #3c3c3c 50%, #111111 51%, #111111 60%, #3b3b3b 76%, #2c2c2c 91%, #232323 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c5c5c), color-stop(12%,#696969), color-stop(25%,#777777), color-stop(39%,#575757), color-stop(50%,#3c3c3c), color-stop(51%,#111111), color-stop(60%,#111111), color-stop(76%,#3b3b3b), color-stop(91%,#2c2c2c), color-stop(100%,#232323)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5c5c5c 0%,#696969 12%,#777777 25%,#575757 39%,#3c3c3c 50%,#111111 51%,#111111 60%,#3b3b3b 76%,#2c2c2c 91%,#232323 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5c5c5c 0%,#696969 12%,#777777 25%,#575757 39%,#3c3c3c 50%,#111111 51%,#111111 60%,#3b3b3b 76%,#2c2c2c 91%,#232323 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5c5c5c 0%,#696969 12%,#777777 25%,#575757 39%,#3c3c3c 50%,#111111 51%,#111111 60%,#3b3b3b 76%,#2c2c2c 91%,#232323 100%); /* IE10+ */
background: linear-gradient(top, #5c5c5c 0%,#696969 12%,#777777 25%,#575757 39);
box-shadow: 1px 1px 3px rgba(0,0,0,0.28);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.28);
-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.28);
color: white;
padding: 2px 8px 1px 8px;
text-decoration: none;
}
.close-notify
{
float: right;
margin-right: 22px;
color: #fff;
width: 17px;
height: 19px;
text-decoration: none;
background-color: #EB593C; /* << set custom bar color here */
cursor:pointer;
}
.show-notify
{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.35);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.35);
float: right;
margin-right: 10px;
color: #fff;
width: 35px;
height: 33px;
text-decoration: none;
background-color: #EB593C; /* << set custom bar color here */
cursor:pointer;
}شما به راحتی می توانید رنگ این نوار را در ۴ جا که از کد زیر استفاده شده است ، تغییر دهید :
/* << set custom bar color here */
امیدوارم ازش استفاده کنید و مفید باشه
ممنون
عالی بود
از اون نوشته‌هایی است که وب فارسی واقعاً بهش نیاز داره.
ممنون و موفق باشید.
خیلی ممنون علی (:
برای من مفید بود
ممنونم حسین جان
سلام
ممنون از نوشه خوبتون.
یه سوال داشتم: اگه بخوایم همین کارو انجام بدیم ولی بجای قرار گیری نوار در بالای پنجره کاری کنیم که پایین پنجره بچسبه باید چه کرد؟
سلام دوست عزیز
ممنون .برای این کار باید چند جا رو ویرایش کنید .اول در بخش جاوااسکریپت در خط های ۸ و ۱۳ و ۲۴ عبارت marginTop رو به marginBottom تغییر بدید.
بعد در بخش css در خط ۴ عبارت top رو به bottom تغییر بدید.در خط ۱۷ عبارت border-bottom رو به border-top تغییر بدید.در خط ۲۴ هم top رو به bottom تغییر داده و مقدار -۱۰ رو هم به ۱۰ تغییر بدید.در خط ۲۹ هم جای ۵ و ۷ رو عوض کنید.
برای بهتر شدن می تونید سمت عکس های فلش رو هم تغییر بدید.
در کل فکر نکنم ایده خوبی باشه. هم دو فایل پر حجم به درخواست های دانلود صفحه اضافه میشه و هم از یک سایت خارجی درخواست اطلاعات میکنه که سرعت رو بیشتر میاره پایین. ویدگت های معادل های برای وردپرس با همین کاربرد هست.
نه زیادم پر حجم نیست اگه minimal هم بشن خیلی سایزشون کمتر میشه . جی کوئری هم که تو اکثر طرح ها از قبل هست .خوب شما می تونین همه فایل ها رو بزارید رو هاست خودتون تا از سایت خارجی نخونه .ضمن اینکه ممنون میشم اگه پلاگین مشابهی برای وردپرس هست معرفی کنید ،شاید سیستم کسی وردپرس نبود و خواست از این استفاده کنه . اگر هم پلاگینش باشه باز استفاده از این توصیه می شه چون استفاده از پلاگین درسته کنترل بیشتری میده ولی خودش حجم بیشتری از منابع سرور رو می گیره