سلام.
چند وقت پیش پلاگینی رو در سایت قرار داده بودم که به کمک اون میتونستید یک تابلو اعلانات زیبا رو در بالای سایتتون به نمایش در بیارید.
و امروز هم آموزش ساختش رو با کمک css و جی کوئری براتون آماده کردم، پس همراه ما باشید…
اولین قدم کار اینه که به header.php قالبتون برید و قطعه کد زیر رو، درست پایین تگ <body> قرار بدید.
این کد چارچوب اصلی تابلو اعلانات ماست، به عبارت دیگه پی کار برنامست و با وجودش طرح کلی، متن و تصویر دکمه های باز و بسته رو شکل میده.
<!-- notification bar -->
<div class="note-bar">
<p>سلام این یک متن آزمایشی است، در اینجا می توانید اطلاعیه ها و اخبار سایت خود را قرار بدهید.</p>
<a href="#" id="hidebar" class="close">
<img src="<?php bloginfo('template_directory'); ?>/icon-close.png">
</a>
</div>
<!-- Button to open notification bar -->
<div class="open-button">
<a href="#" id="showbar">
<img src="<?php bloginfo('template_directory'); ?>/icon-open.png" >
</a>
</div>
بعد از پی ریزی، نوبت به قالب بندی و زیبا سازی می رسه، پس به style.css قالبتون مراجعه کنید و کد پایین رو در آخر کدهای موجود قرار بدید.
/*------- Notification Bar-----*/
.note-bar{
display:none;
overflow: hidden;
background: rgba(255, 88, 61, 0.4);
height: 38px;
border-bottom: 4px solid #fff;
padding-right:30px;
}
.note-bar p {
color: #FFFFFF;
float: right;
font-size: 12px;
line-height: 36px;
margin: 0 0 0 10px;
padding: 0;
text-shadow: none;
}
.close{
margin: 8px 10px 0 0;
margin-left:40px;
float: left;
}
.open-button {
padding-top: 10px;
width: 30px;
height:30px;
background: rgba(255, 88, 61, 0.4);
border: 4px solid #fff;
border-top: 0px;
position: fixed;
top: 0;
left: 30px;
display: none;
}
.open-button #showbar{
margin:0 5px;
}خوب، کارهای مربوط به قالب بندی تابلو اعلانات تموم شده ،البته الان هیچ چیز قابل مشاهده نیست، به همین خاطر باید به سراغ جی کوئری بریم.
جی کوئری در واقع کتابخونه ای از توابع پیش ساخته ی جاوا اسکریپته و کاربردهای مختلفی رو داره. مثلا در بحث های مربوط به آی جکس و…
در اینجا هم ما به کمک جی کوئری میتونیم یک حالت انیمیشن زیبا رو به برناممون بدیم.
پس به دوباره به header قالبمون بر می گردیم و با گذاشتن کد زیر در اونجا، کتابخونه جی کوئری رو در قالبمون قرارمی دیم. (این کد رو میتونید در بالای </head> قرار بدید)
– نکته : اگه در قالب فعلیتون کتابخونه جی کوئری وجود داره دیگه نیازی به قرار دادن این کد ندارید.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
حالا میتونیم کار با جی کوئری رو آغاز کنیم:
ابتدا کد زیر رو که فرم کلی فراخوانی توابع جی کوئری هست رو مینویسیم.
<script type="text/javascript">
$(document).ready(function(){
محل قرار گیری کدها
});
</script>سپس کد زیر رو در زیر رو در جای مشخص شده قرار بدید.
این کد با فراخوانی تابع slideDown و پاس دادن کلاسnote-bar بهش، با یک سرعت قابل تنظیم، محتویات این کلاس رو به صورت انیمیشن پایین رونده در بالای سایت به نمایش در میاره.
$(".note-bar").slideDown(300);در ادامه هم کد زیر رو بهش اضافه میکنیم تا وقتی بر روی آیکون ضربدر کلیک کردیم، باکس فعلی بسته شه و محتویات کلاس open-button به نمایش در بیاد.
$("#hidebar").click(function(){
$(".note-bar").slideUp(300, function(){
$(".open-button").slideDown(300);
});
return false;
});در آخر هم با اضافه کردن کد زیر کار رو به اتمام میرسونیم (عملکرد این کد هم شبیه کد بالاست)
$("#showbar").click(function(){
$(".open-button").slideUp(300, function(){
$(".note-bar").slideDown(300);
});
return false;
});کد زیر هم نتیجه ی کامل شده ی کدهای بالاست:
<script>
$(document).ready(function(){
$(".note-bar").slideDown(300);
$("#hidebar").click(function(){
$(".note-bar").slideUp(300, function(){
$(".open-button").slideDown(300);
});
return false;
});
$("#showbar").click(function(){
$(".open-button").slideUp(300, function(){
$(".note-bar").slideDown(300);
});
return false;
});
});
</script>
امیدوارم که توضیحات مفید بوده باشه…
تا درودی دیگر، بدرود…
منبع اصلی : gazpo.com
سلام من ازاینجا به بعدشو نفهمیدم که کدشو باید کجا بذاریم:
حالا میتونیم کار با جی کوئری رو آغاز کنیم:
ممنون میشم راهنمایی کنید
توسط abolfazl
سلام،
میتونید کدهای اسکریپت رو در header یا footer به کار ببرید.
البته به دلایل سئو و افزایش سرعت بارگذاری، پیشنهاد میشه که کدهای جاوااسکریپت در فوتر قرار داده بشن.
موفق باشید.
توسط علی میرزائی
سلام آقای میرزایی٬ وقتتون بخیر. میخواستم بپرسم چطور میتونم گزینه لایک مطالب دقیقا مثل سایتتون داشته باشم؟
ممنون
توسط سعید
سلام، ممنون.
من از افزونه ی i like this استفاده کردم.
پیشتر این افزونه در سایت معرفی شده، به لینک زیر مراجعه کنید:
http://tiny.alimir.ir/qتوسط علی میرزائی
با سلام
من کد هایی را که فرمودید در سایتم قرار دادم ولی فقط به صورت یک خط متن ساده نمایش داده میشه اشکال از کجاست؟ کد های style را هم قرار داد ام
توسط kosar
اینطوری گفتنش سخته! باید یه اسکرین شات یا دموی آنلاین ببینم تا بتونم نظر بدم.
توسط علی میرزائی
شرمنده
یه مشکل دیگه وجود داره
اونم اینکه من فقط با کروم میتونم حالت افکت دار این نوتیفیکیشن رو ببینم
در فایرفاکس و اینترنت اکسپلورر ساده و بدون قالب میاد
دلیلش چیه؟
توسط سعید
جسارتا یه سوال دیگه
چطور میتونم فونت پیامو عوض کنم
مثلا یکان بذارم؟
توسط سعید
اگه فرضا فونت بی یکان در قالبتون آپ باشه، و در Body به عنوان فونت پیش فرض انتخابش کنید، برای اون هم جواب میده.
اما اگه تنها این فونت رو برای تابلو میخواید میتونید در note-bar p با دستور font-family این فونت رو براش انتخاب کنید.
توسط علی میرزائی
ممنونم
مشکل حل شد
توسط سعید
ممنونم از جواب دهیتون
این عکس ها رو دقیقا کجا باید آپلود کنم
در ضمن مشکلش حل شد فقط عکسها لود نمیشن
من تو پوشه ی آپلود هاست آپلود کردم و آدرس کامل اونو به جای آدرس قبلی جایگزین کردم بازم عکسو نشون نمیده
باید تو پوشه ی دیگه ای آپلود کنم؟
میشه دقیقا توضیح بدید؟
توسط سعید
خواهش میشود، کاری نکردم که!
هیچ فرقی نمیکنه که تصویر رو کجا آپلود کنی، مهم آدرس دهیه.
فرضا میتونی این عکس رو در پوشه images قالبت آپ کنی و سپس به این صورت بهش آدرس بدی:
< img src="لینک تصویر" >
توسط علی میرزائی
متوجه نشدم
من اون کد نتیجه رو دقیقا بعد از کد
گذاشتم تو فایل هدر ولی هیچی نشون داده نمیشه جز متن نوتیفیکیشن
خواهش میکنم اگه همه جزئیات بالا هست بازم راهنماییم کنید
توضیحات رو کامل خوندم ولی چیزی دستگیرم نشد
ممنون میشم
توسط سعید
الان سایتت رو دیدم، فک نکنم مشکل از کدهای جی کوئری باشه!!!
یه قسمتی که اصلا آیکون ها در سایتت بارگذاری نشدن! ابتدا تصویر اون آیکون ها رو از دمو خارج کن و پس از بارگذاری در سایت، تو اون کد اولی که معرفی کردم به جای آدرس قبلی آدرس جدید رو جایگزین کن.
در ادامه هم فک کنم یه مقدار کدهای سی اس اس با قالبت سازگاری ندارن!!!
شما اون کار اول رو انجام بده، سپس یه یوزر درست کن و به ایمیلم بفرست تا بررسیش کنم.
توسط علی میرزائی
سلام
بنده همه راههایی که گفتید قدم به قدم رفتم
فقط اون قسمت آخر که گفتید”کد زیر هم نتیجه ی کامل شده ی کدهای بالاست”نمیدونم این کدها رو دقیقا باید کجا و تو کدوم فایل قالب بذارم
ممنون میشم راهنمایی کنید
باتشکر
توسط سعید
سلام،
در خطوط بالا کدها رو توضیح داده بودم و در خط آخر هم همه ی کدها رو کنار هم قرار دادم، در کل چیز متفاوتی نبوده!
محل قرارگیریش هم تو متن توضیح داده شده، لطفا مجددا به متن اصلی مراجعه کنید.
توسط علی میرزائی
دیدگاهی برای بیان ندارم به جز تشکر ویژه که کارم رو راه انداخت.
در صورت تمایل به همکاری در هر زمینه میتونید با میلم ارتباط برقرار کنید.
بازدید روزانه سایت بنده 12 هزار نفر با IP یکتا.
توسط سهیل
خیلی ممنون علی آقا .
کارتون حرف نداره .
فقط یه چیز دیگه میمونه ! اگه میشه آموزش حذف تولبار (ناوبار) مدیریت از صفحه ی اول سایت رو بگید .
همون کادر مشکی که وقتی به پنل مدیریت وارد میشیم در صفحه ی اول سایت بالای سایت ظاهر میشه .
ماله من وقتی وارد میشم در صفحه ی اول سایت به اندازه ی اون کادر جا خالی میشه اما کادری نشون نمیده . بنابراین میخوام حذف کنم .
اگه میشه در یک پست توضیحش بدین .
خیلی ممنون از سایت فوق العادتون 🙂
توسط marjan
خواهش میکنم، لطف دارید.
باشه، فردا یه سر بزنید، ایشالا آموزشش آمادست 😉
توسط علی میرزائی
سلام .
من میخوام که وقتی کاربری میاد داخل سایت ، اول اون کلید رو ببینه که وقتی روش کلیک میکنه اون پیغام نشون داده بشه .
یعنی به صورت پیش فرض میخوام اول اون کلید برای باز شدن پیغام رو نشون بده .
ولی در حال حاضر اول پیغام نشون میده سپس با کلیک روی × پیغام بسته میشه .
منتظرم لطفا 🙂
توسط marjan
سلام.
خیلی راحته، کافیه تو دستور زیر (اولین کد جاوا اسکریپتی که توضیحش رو دادم) به جای note-bar از open-button استفاده کنید.
$(".note-bar").slideDown(300);یعنی کد بالا رو به صورت زیر تغییر بدید.
$(".open-button").slideDown(300);* توجه: این تغییر رو تنها باید در دستور اولی انجام بدید و به بقیه دستورهای مشابه کاری نداشته باشید.
توسط علی میرزائی
سلام.یک اسکریپت بزودی برخواهیم گشت رو فارسی سازی کردم.
لینکش:
http://nanodl.netgig.ir/wp-content/uploads/2013/03/alissa-coming-soon.zipگفتم که اگه دوست داشتید بزارید تو سایتتون
توسط محمدحسین
ممنون از لطفتون و زحمتی که کشیدید… 🙂
مدتیه تو فکر احداث بخش پست مهمان هستم، در اون صورت میتونید خودتون با توضیحات دلخواه این افزونه رو در سایت ما منتشر کنید.
اینطوری به نظرم بهتر خواهد بود 😉
توسط علی میرزائی
سلام.ممنون
توسط محمد حسین
بنر سایت شما یک ماه در سایت ما قرار گرفت
توسط محمدحسین
ممنونم، لینک شما هم در برگه تبادل لینک ما قرار گرفت.
پیروز باشید.
توسط علی میرزائی
دوست عزیز اشکال دوم هم برطرف شد
توسط محمد حسین
خوب پس خدا رو شکر 🙂
توسط علی میرزائی
اشکال اول رو درست کردم ولی دومیه هنوز پابرجاست
توسط محمد حسین
بله منضورم بک گراند هست
هرچقدر کد رو تغییر میدم تابلو تغییر نمی کنه
من میخوام رنگ بکگراند این باشه:244992
که میزان رنگش به اینصورته:
red:36
green:73
blue:146
به این ترتیب کد باید به اینصورت باشه:
background: rgba(36,73,146, 8);
درسته؟
ولی بک گراند تغییر نمیکنه؟
راستی یک اشکال دیگر:
مرورگر فایرفاکس اون عکس کناری رو نشون نمی ده و مرورگر کروم هم که نشون میده میگه عکسی موجود نیست و عکس پیش فرض خرابی لینک رو میزاره
توسط محمد حسین
سلام چطور میتونم رنگ پس زمینه تابلو رو عوض کنم؟
هرچی فایل سی اس اس رو ادیت میکنم فقط رنگ متن داخل تابلو عوض میشه
توسط محمدحسین
سلام،
اگه منظورتون رنگ صورتی بگ گرانده که کاری نداره، کافیه تو کدهای سی اس اس در بخش note-bar کد رنگ background رو به رنگی که می خواید تغییر بدید.
توسط علی میرزائی
باتشکر از آموزش شما
جالب وکاربردی بود.
توسط محمدصادق عليخاني
خواهش میکنم، قابلی نداشت.
توسط علی میرزائی