آموزش ساخت پنجره بازشونده در اولین بازدید از سایت

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

پیش نمایش


قبل از شروع کار آموزش بسیار حرفه ای زیر رو در صورت نیاز دنبال کنید :
نمایش باکس زیبا هنگام ورود به سایت 
حالا نحوه کار با این آموزش را به شما می آموزییم.
ابتدا کد اسکریپت را بدون ایجاد تغییر بعد از تگ < head > یا قبل از تگ < /head > در ویرایش قالب خود قرار دهید.

<script>function hide_ads(){dis_ads.style.display='none';}</script>

حالا این کدها را در فایل استایل وبسایت خود قرار دهید.

<style>
.ads-an {
    background: #F0F0F0;
    box-shadow: 0px 0px 2px 2px #B1B1B1;
    -o-box-shadow: 0px 0px 2px 2px #B1B1B1;
    -ms-box-shadow: 0px 0px 2px 2px #B1B1B1;
    -moz-box-shadow: 0px 0px 2px 2px #B1B1B1;
    -webkit-box-shadow: 0px 0px 2px 2px #B1B1B1;
    border: 1px dashed #B0A1A2;
    width: 600px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    left: 350px;
    bottom: 150px;
    margin: 0 auto;
    position: fixed;
}
.ads-an p {
    font: 14px tahoma;
    line-height: 28px;
    padding: 5px;
    margin: -35px 10px 10px 10px;
}
.ads-an div {
    padding: 12px;
    text-align: right;
    margin: 2px 0px 10px 0px;
    color: #1a414f;
    text-shadow: 1px 1px 1px red;
    -o-text-shadow: 1px 1px 1px red;
    -ms-text-shadow: 1px 1px 1px red;
    -moz-text-shadow: 1px 1px 1px red;
    -webkit-text-shadow: 1px 1px 1px red;
    font:bold 18px tahoma ;
    cursor:pointer;
}
</style>

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

در این کد ها

.ads-an {
    background: #F0F0F0;
    box-shadow: 0px 0px 2px 2px #B1B1B1;
    -o-box-shadow: 0px 0px 2px 2px #B1B1B1;
    -ms-box-shadow: 0px 0px 2px 2px #B1B1B1;
    -moz-box-shadow: 0px 0px 2px 2px #B1B1B1;
    -webkit-box-shadow: 0px 0px 2px 2px #B1B1B1;
    border: 1px dashed #B0A1A2;
    width: 600px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    left: 350px;
    bottom: 150px;
    margin: 0 auto;
    position: fixed;
}

در خط دوم پس زمینه قرار دارد که شما می توانید به F0F0F0F# یک کد رنگ دیگری قرار بدهید.
در خط سوم تا هفتم به جعبه شما یک افکت بسیار زیبا می دهد که برای تمامی مرورگرها تنظیم شده است.
در خط هشتم یک تکه کد هست که به جعبه شما یک کادر 1px با خط چینی به رنگ B0A1A2# می دهد.
در خط نهم این تکه کد طول جعبه را نشان می دهد که میتوانید آن را کم یا زیاد کنید.
در خط دهم تا چهاردهم گوشه های جعبه را گرد می کند که برای تمامی مرورگر ها تنظیم شده است.
در خط پانزدهم فاصله جعبه را از سمت چپ نشان می دهد.
در خط شانزدهم فاصله جعبه را از سمت پایین نشان می دهد.
در خط هفدهم فاصله بیرونی جعبه هست که از سمت بالا صفر و از سمت های دیگر اتوماتیک هست.
در خط هجدهم با این تکه کد وقتی صفحه اسکرول (بالا و پایین) میشه جعبه در وسط صفحه ثابت قرار می گیرد.
حالا در این کدها در استایل متنی که در جعبه قرار دارد شما می توانید هر چیز دیگه ای مثل لینک ، تصویر ویا غیره قرار بدهید.

.ads-an p {
	font: 14px tahoma;
	line-height: 28px;
	padding: 5px;
	margin: -35px 10px 10px 10px;
}

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

.ads-an div {
	padding: 12px;
	text-align: right;
	margin: 2px 0px 10px 0px;
	color: #1a414f;
	text-shadow: 1px 1px 1px red;
	-o-text-shadow: 1px 1px 1px red;
	-ms-text-shadow: 1px 1px 1px red;
	-moz-text-shadow: 1px 1px 1px red;
	-webkit-text-shadow: 1px 1px 1px red;
	font:bold 18px tahoma ;
	cursor:pointer;
}

در خط دوم فاصله داخلی ضربدر با جعبه هست.
در خط سوم محل قرار گرفتن ضربدر هست که ما در اینجا در سمت راست آن را گذاشتیم.
در خط چهارم فاصله خارجی ضربدر هست.
در خط پنجم رنگ ضربدر هست.
در خط ششم تا دهم به ضربدر سایه قرمز رنگ دادیم که برای تمامی مرورگرها تنظیم شده است.
در خط یازدهم بولد کردن (درشت کردن) ، اندازه فونت و نوع آن هست.
در خط دوازدهم وقتی روی ضربدر میرویم شکل آن یک دست اشاره هست.
این کد های html هست که برای ضربدر نوشته شده است.

<div><span onclick="hide_ads()">&times;</span></div>

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

این آموزش ساخت پنجره بازشونده در اولین بازدید از سایت توسط تیم یک لرن انتشار داده شده است و کپی از آن پیگرد قانونی دارد.

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

فرادرس

برچسب ها : ،