امروز آموزش قرار دادن نیوز بار حرفه ای در بالای سایت رو براتون آماده کردم که فوق العاده زیباست و زیبایی خاصصی به سایت می بخشه. با استفاده از این کد شما می تونید در بالای صفحات سایتتون یک کادر ایجاد کنید و اتفاقات و خبرهای اخیر سایت رو برای بازدید کننده هاتون به نمایش بگذارید. این کد با جی کوئری نوشته شده که دارای یک دکمه برای بستن کادر می باشد و یک دکمه ی باز کردن که پس از بستن ظاهر می شود با کلیک روی این دکمه مجددا کادر باز می شود و متن داخل آن مایش در میاد.
خوب بریم سراغ کد ایجاد این باکس :
ابتدا کد زیر رو داخل فایل هدر بین تگهای <head> و </head> قرار بدید :
<script type="text/javascript" src="https://bigtheme.ir/wp-content/uploads/jquery.js"></script> <script language="javascript" type="text/javascript">
$(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>
اگه می خواهید که این باکس خبر یا هر چیزه دیگه بالای سایت قرار بگیره باید کد مورد نظر رو بعد از تگ بادی <body> قرار بدید البته در بعضی قالب ها هم شاید لازم باشه بالاتر هم قرار داده بشه. حال کد زیر رو هم در مکان مناسب قرار بدید ( اگه بعد از بادی درست اجرا شد همون جا میمونه رو چن تا قالب اجرا شده قبل یا بعد از تگ بادی باید جواب بده حالا بعضی قالب ها استثنا هستن )
<div style="" class="note-bar"> <p> می باشد در این قسمت اتفاقات جالب سایت را به نمایش بگذارید ...به زودی اموزش این امکان رو براتون میزارم</p> <a href="#" id="hidebar" class="close"> <img src="https://bigtheme.ir/wp-content/uploads/icon-close.png"> </a> </div> <div style="display: none;" class="open-button"> <a href="#" id="showbar"> <img src="https://bigtheme.ir/wp-content/uploads/icon-open.png"> </a> </div>
حالا میمونه استایلی که می تونید خودتون هم شخصی سازیش کنید. استایلی رو هم که براتون آماده کردم رو داخل فایل استایل قالب بریزید.
.note-bar{
display:none; display: block;
overflow: hidden;
background: rgba(64, 131, 150, 0.9);
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;
}
.note-bar p>a{
color: #CCCCCC;
}
.close{
margin: 8px 10px 0 0;
margin-left:40px;
float: left;
}
.open-button {
padding-top: 10px;
width: 30px;
height:30px;
background: rgba(64, 131, 150, 6.5);
border: 4px solid #fff;
border-top: 0px;
position: fixed;
top: 0;
left: 30px;
display: none;
}
.open-button #showbar{
margin:0 5px;
}
خوب خسته نباشید کار تمومه با ذخیره ی تغییرات می تونید نتیجه ی کار رو ببینید.
امیدوارم مفید بوده باشه. آرزومند بهترین ها برای شما …
[button_search_c url=https://bigtheme.ir/wp-content/demo%20files/news%20bar/index.htm bottom_text=”کد نمایش نیوز بار در بالای سایت”]پیش نمایش[/button_search_c]
لینک کوتاه: https://bigtheme.ir/?p=714
منبع: بیگ تم