آموزش ایجاد باکس خبری در ساین حرفه ای

آموزش قرار دادن نیوز بار حرفه ای در بالای سایت

امروز آموزش قرار دادن نیوز بار حرفه ای در بالای سایت رو براتون آماده کردم که فوق العاده زیباست و زیبایی خاصصی به سایت می بخشه. با استفاده از این کد شما می تونید در بالای صفحات سایتتون یک کادر ایجاد کنید و اتفاقات و خبرهای اخیر سایت رو برای بازدید کننده هاتون به نمایش بگذارید. این کد با جی کوئری نوشته شده که دارای یک دکمه  برای بستن کادر می باشد و یک دکمه ی  باز کردن که پس از بستن ظاهر می شود با کلیک روی این دکمه مجددا کادر باز می شود و متن داخل آن مایش در میاد.

خوب بریم سراغ کد ایجاد این باکس :

ساخت باکس خبری حرفه ای برای سایت

ابتدا کد زیر رو داخل فایل هدر بین تگهای <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

منبع: بیگ تم

یک نظر

  1. emtdad

    آیا افزونه ای جایگزین ویژوال کمپرسور هست که با هر قالبی بشه جعبه اخبار گذاشت ؟؟

  2. هادی قربانی

    با سلام
    باید آشنایی نداشته باشید بخش html مربطو به بحش header.php میشه / استایل هم که در فاغیل style.css

  3. مهدی محمدی

    سلام.ببخشید محل قرار گیری این کد ها دقیقا در کجای قالب می باشد .مثلا تگ بادی در قالب در کجا قرار دارد و همچنین در استایل و هدر باید کجا قرار گیرد. ممنون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *