خانه / دسته‌بندی نشده / آموزش قرار دادن نیوز بار حرفه ای در بالای سایت
درگاه, درگاه پرداخت, درگاه واسطه پرداخت, فری پی
آموزش ایجاد باکس خبری در ساین حرفه ای

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

آموزش قرار دادن نیوز بار حرفه ای در بالای سایتReviewed by هادی on Jul 16Rating:

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

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

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

ابتدا کد زیر رو داخل فایل هدر بین تگهای <head> و </head> قرار بدید :

 <script type="text/javascript" src="http://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="http://bigtheme.ir/wp-content/uploads/icon-close.png"> </a>
 </div> <div style="display: none;" class="open-button"> <a href="#" id="showbar"> 
 <img src="http://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=http://bigtheme.ir/wp-content/demo%20files/news%20bar/index.htm bottom_text=”کد نمایش نیوز بار در بالای سایت”]پیش نمایش[/button_search_c]

لینک کوتاه: http://bigtheme.ir/?p=714

منبع: بیگ تم

باکس دانلود

7 دیدگاه

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

  2. سلام ببخشید این باکس سر خط خبر ها که در سایت شماست همین جوری طراحی شده

  3. مطلب خوب بود
    اگه نوع دیگه ای هم داره بزارید
    مثلا پایین سایت

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

پاسخ دهید

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


تخفیفات و بروز رسانی و اطلاعات جدید سایت در کانال تلگرام ما bigtheme_ir@
Hello. Add your message here.

دنبال کردن