آموزش ساخت صفحه لودینگ
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

loading0

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

لطفا” تمام مراحل رو به ترتیب پیش برید تا مشکلی پیش نیاد:

مرحله اول : تصویر لودینگ

یک تصویر برای نمایش در صفحه لودینگ همانند نمونه زیر پیدا کنید و در هاست خودتون آپلود کنید (توجه داشته باشید که تصاویر می تواند ثابت هم باشد)
برای پیدا کردن چنین تصویری می توانید در سایت گوگل loading gif را جست و جو نمایید.

loading

قدم دوم : قرار دادن کد در فایل header.php

در پیشخوان وردپرس به بخش  نمایش -> ویرایش رفته و از بین لیست فایل ها فایل header.php را برای ویرایش انتخاب کنید.

تگ <body> را پیدا کرده و کد زیر را به آن اضافه کنید :

&lt;div class="loading"&gt;&lt;/div&gt;

سپس تگ </head> رو پیدا کنید و کدهای زیر را قبل از آن اضافه کنید

 
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=”text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
</script>

قدم سوم : style.css

در همان بخش ویرایشگر فایل style.css را انتخاب و کد زیر را به آن اضافه کنید :

 

 
.loading{
   position:fixed;
   left:0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url('loading.gif') center center no-repeat #fff;
}

نکته : به جای loading.gif آدرس فایل آپلود شده ی خودتان را بدهید.

البته شما می تونید این صفحه رو به دلخواه خودتون ویرایش کنید

امیر رضائی وبسایت


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

مطالب مشابه با این موضوع

یک پاسخ برای “آموزش ساخت صفحه لودینگ

بالا رفتن