نمادها

شما اینجا هستید

آموزش ساخت صفحه Coming Soon

سلام برنامه در خدمت شماست با آموزش ساخت صفحه Coming Soon

آموزش ساخت صفحه Coming Soon به شما امکان را می دهد که زمان انتشار سایتتان را به کاربران نشان دهید

 

Coming soon چیست؟

از این صفحات زمانی استفاده میکنند که پروژه ای هنوز به اتمام نرسیده است و میخواهند کاربران را از زمان پایان پروژه باخبر کنند . این صفحه موقتی است و پس از پایان کار یا حذف میشود و یا انتقال میابد.

همچنین از این صفحه به عنوان لندینگ نیز میتوان یاد کرد که برای سئو کلمات کلیدی از آن استفاده میشود.

در این آموزش یاد میگیرید که یک شمارنده هوشمند تاریخ بسازید

این شمارنده به صورت معکوس و لحظه ای از زمان کم می کند تا به صفر برسد فقط کافیست شما تاریخ خود را بنویسید

برای ساخت صفحه ابتدا کد های زیر را به body خود اضافه کنید

<div class="bgimg">
  <div class="topleft">
    <p><img src="Logo.png"></p>
  </div>
  <div class="middle">
    <h1>به زودی...</h1>
    <hr>
    <p id="demo" style="font-size:30px"></p>
  </div>
  <div class="bottomleft">
    <p>لینک شما</p>
  </div>
</div>

سپس برای استایل دهی و جلوه دادن کد های زیر را  به css خود اضافه کنید

body, html {
    height: 100%;
    margin: 0;
    direction:rtl;
}

.bgimg {
    background-image:url(image_2017-04-08_17-05-46.png);
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    color: white;
    font-family: "Courier New", Courier, monospace;
    font-size: 25px;
}

.topleft {
    position: absolute;
    top: 0;
    left: 16px;
}

.topleft p img{
		width:150px;
	height:150px;
}

.bottomleft {
    position: absolute;
    bottom: 0;
    left: 16px;
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

hr {
    margin: auto;
    width: 40%;
}

و در نهایت برای اجرا شمارنده کد جاوا اسکریپت زیر را به انتهای کد های html صفحه اضافه کنید

<script>
var countDownDate = new Date("Jan 10, 2018 15:37:25").getTime();

var countdownfunction = setInterval(function() {

    var now = new Date().getTime();
    
    var distance = countDownDate - now;
    
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById("demo").innerHTML = days + "روز " +  hours + "ساعت " + minutes + "دقیقه " + seconds +  "ثانیه " ; 
    if (distance < 0) {
        clearInterval(countdownfunction);
        document.getElementById("demo").innerHTML = "پایان";
    }
}, ۱۰۰۰);
</script>

ما در کد بالا تاریخ Jan 10, 2018 15:37:25  را مشخص کرده ایم کافیست شما تاریخ خود و ساعت را وارد کنید

 

شما میتوانید آموزش تصویری را در ویدئو زیر ببینید:

 

 

 

همچنین می توانید برای مشاهده جزئیات بیشتر ویدیو آموزش را دریافت کنید

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

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

دانلود آموزش ساخت صفحه Coming Soon و سورس کد ها : نوع فایل:rar/video/code حجم فایل:35.76 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

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

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.