امروز آموزش قرار دادن نیوز بار حرفه ای در بالای سایت رو براتون آماده کردم که فوق العاده زیباست و زیبایی خاصصی به سایت می بخشه. با استفاده از این کد شما می تونید در بالای صفحات سایتتون یک کادر ایجاد کنید و اتفاقات و خبرهای اخیر سایت رو برای بازدید کننده هاتون به نمایش بگذارید. این کد با جی کوئری نوشته شده که دارای یک دکمه برای بستن کادر می باشد و یک دکمه ی باز کردن که پس از بستن ظاهر می شود با کلیک روی این دکمه مجددا کادر باز می شود و متن داخل آن مایش در میاد.
خوب بریم سراغ کد ایجاد این باکس :
ابتدا کد زیر رو داخل فایل هدر بین تگهای <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
منبع: بیگ تم
بله داریم اما ویژوال کامپوسر برگه ساز حرفه ای وردپرس هست که با اکثر قالب ها هم سازگار لینک های زیر رو ببینید
ویژوال کامپوسر برگه ساز حرفه ای وردپرس
آموزش طراحی قالب وردپرس با ویژوال کامپوسر
آیا افزونه ای جایگزین ویژوال کمپرسور هست که با هر قالبی بشه جعبه اخبار گذاشت ؟؟
مطلب خوب بود
اگه نوع دیگه ای هم داره بزارید
مثلا پایین سایت
سلام
بله
سلام ببخشید این باکس سر خط خبر ها که در سایت شماست همین جوری طراحی شده
با سلام
باید آشنایی نداشته باشید بخش html مربطو به بحش header.php میشه / استایل هم که در فاغیل style.css
سلام.ببخشید محل قرار گیری این کد ها دقیقا در کجای قالب می باشد .مثلا تگ بادی در قالب در کجا قرار دارد و همچنین در استایل و هدر باید کجا قرار گیرد. ممنون