ورود با اکانت گوگل
یا
آقای متریال

برای جستجو کلمه مورد نظر خود را وارد کنید

قالب صفحه ارور ۴۰۴ متریال دیزاین + آموزش استفاده !

emmet


اطلاعات نویسنده
emmet

emmet

  • Exclusive Author
  • Iran (Islamic Republic of)
نمونه کارها
پشتیبانی
برای دیدن اطلاعات تماس تهیه کننده این محصول باید محصول رو خریداری کرده باشید

به نام خدا قالب صفحه ارور ۴۰۴

شاید تا به حال به این فکر بوده اید که صفحات خارجی وبسایت خود را مانند صفحات ۴۰۴ (ناموجود یا حذف شده) برگه های جدا و پیوندهای خارجی از قالبی با طراحی خاص استفاده کنید.

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

این قالب بسیار ساده است و فقط از سه بخش HTML ، CSS و جاوا اسکریپت تشکیل شده که ما فقط با بخش HTML  برای تغییر دکمه ها و لینک دادن به دکمه ها استفاده می کنیم.البته برای شخصی سازی بیشتر می توانید فایل CSS رو هم ویرایش کنید ولی ما در این پست فقط بخش HTML رو معرفی و ویرایش می کنیم.

این نسخه از قالب صفحه ۴۰۴ متریال دیزاین ، نسخه ویرایش شده و اختصاصی هست اما رایگانه و همه میتونن استفاده کنند و لذت ببرند.

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

توضیحات کوتاه در مورد نسخه ها: قالب صفحه ارور ۴۰۴

  • نسخه نیمه فارسی:در واقع تنها متنی که فارسی شده بصورت تصویر واکنش گرا (رسپانسیو) هست و بزودی نسخه فارسی شده با تمامی امکانات قرار می گیره.
  • نسخه انگلیسی:تمامی متن های انگلیسی هست و اگر بخواید متن فارسی تایپ کنید با فونت Arial نمایش داده می شه.اما فونت پیش فرض برای زبان انگلیسی فونت متریال دیزاین Roboto هست.
  • نسخه کاملا فارسی:در دست ساخت هست.قراره با فونت B Yekan برای فارسی زبانان منتشر بشه و دارای تمامی قابلیت ها هست.

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

تغییرات پس از ویرایش:

  • ریپل افکت برای گزینه های بیشتر اعمال شده
  • نسخه فارسی با عکس واکنش گرا (رسپانسیو)
  • وسط چین شدن دکمه ها در نسخه نیمه فارسی

 

آموزش تغییر آیتم های منو و لینک دادن به آنها:

بخش سه نقطه در Toolbar:

وارد کد HTML قالب شوید و کد زیر رو در اون پیدا کنید:

این بخش برای دکمه سه نقطه در سمت راست Toolbar قالب هست.

<li><a href="#">Follow this blog</a></li>
<li><a href="#">Remove U-AD</a></li>

برای تغییر نام آیتم ها بخش آبی شده را تغییر بدید و برای تغییر لینک آیتم ها لینک خودتون را با پیشوند HTTP یا HTTPS در بخش قرمز وارد کنید.

اگر از HTTP یا HTTPS استفاده نکنید نتیجه کار مطلوب نخواهد بود.

پس از تغییر مانند نمونه زیر خواهد شد:

<li><a href="https://telegram.me/mrmaterial_ir">Telegram Channel</a></li>
<li><a href="http://mrmaterial.ir">Home</a></li>

بخش نویگیشن دراور در Toolbar:

در همون فایل HTML قالب کد زیر رو پیدا کنید:

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

        <li><a class=" waves-effect waves-dark" href="#">About</a></li>
        <li><a class=" waves-effect waves-dark" href="#">RSS</a></li>
        <li><a class=" waves-effect waves-dark" href="#">Sitemap</a></li>
        <li><a class=" waves-effect waves-dark" href="#">Tools</a></li>
        <li><a class=" waves-effect waves-dark" href="#">Webfont Icons</a></li>

برای تغییر نام آیتم ها بخش آبی شده را تغییر بدید و برای تغییر لینک آیتم ها لینک خودتون را با پیشوند HTTP یا HTTPS در بخش قرمز وارد کنید.

اگر از HTTP یا HTTPS استفاده نکنید نتیجه کار مطلوب نخواهد بود.

پس از تغییر مانند نمونه زیر خواهد شد:

        <li><a class=" waves-effect waves-dark" href="http://palette.mrmaterial.ir/">Color Palette</a></li>
        <li><a class=" waves-effect waves-dark" href="http://doc.mrmaterial.ir/">DOC</a></li>
        <li><a class=" waves-effect waves-dark" href="http://mrmaterial.ir/">Home</a></li>
        <li><a class=" waves-effect waves-dark" href="http://mrmaterial.ir/gellery">Gallery</a></li>
        <li><a class=" waves-effect waves-dark" href="http://mrmaterial.ir/%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87/">About</a></li>

دکمه متریال پایینی:

در همون فایل HTML قالب کد زیر رو پیدا کنید: قالب صفحه ارور ۴۰۴

این بخش برای دکمه متریال در پایین قالب هست.

<a href="#" class="btn waves-effect waves-dark">Version History</a>

برای تغییر نام دکمه بخش آبی شده را تغییر بدید و برای تغییر لینک دکمه لینک خودتون را با پیشوند HTTP یا HTTPS در بخش قرمز وارد کنید.

اگر از HTTP یا HTTPS استفاده نکنید نتیجه کار مطلوب نخواهد بود.

پس از تغییر مانند نمونه زیر خواهد شد:

<a href="http://mrmaterial.ir/" class="btn waves-effect waves-dark">Home</a>

دکمه های زیر کارت Error 404 :

در همون فایل HTML قالب کد زیر رو پیدا کنید:

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

              <a class="waves-effect waves-green" href="#">Go back</a>
              <a class="waves-effect waves-green" href="#">Go to homepage</a>
              <a class="waves-effect waves-green" href="#">View sitemap</a>

برای تغییر نام دکمه بخش آبی شده را تغییر بدید و برای تغییر لینک دکمه لینک خودتون را با پیشوند HTTP یا HTTPS در بخش قرمز وارد کنید.

اگر از HTTP یا HTTPS استفاده نکنید نتیجه کار مطلوب نخواهد بود. قالب صفحه ارور ۴۰۴

پس از تغییر مانند نمونه زیر خواهد شد:

              <a class="waves-effect waves-green" href="http://mrmaterial.ir/">Go back</a>
              <a class="waves-effect waves-green" href="http://mrmaterial.ir/">Go to homepage</a>
              <a class="waves-effect waves-green" href="http://mrmaterial.ir/">View Posts</a>

آموزش تغییر متن ها:

بخش کپی رایت:

در همون فایل HTML قالب کد زیر رو پیدا کنید:

این بخش برای متن کپی رایت وبسایت هست.

<div class="container">
            Copyright © ۲۰۱۶-۲۰۱۷٫ All Rights Reserved. Blog version:
            </div>

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

پس از تغییر مانند نمونه زیر خواهد شد:

<div class="container">
           تمامی حقوق برای وبسایت آقای متریال محفوظ است. ۲۰۱۷-۲۰۱۶
            </div>

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

در همون فایل HTML قالب کد زیر رو پیدا کنید:

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

 <h5 class="white-text">The paper is being built</h5>
                <p class="grey-text text-lighten-4">To know the history version, click the button below</p>

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

پس از تغییر مانند نمونه زیر خواهد شد:

 <h5 class="white-text">من متن بالایی هستم</h5>
                <p class="grey-text text-lighten-4">برای دانستن تاریخچه نسخه روی دکمه کلیک کنید.</p>

بخش عنوان صفحه متن صفحه:

در همون فایل HTML قالب کد زیر رو پیدا کنید:

این بخش برای Title وبسایت هست.

<a href="#" class="brand-logo left truncate waves-effect waves-light">Blog Title</a>

برای تغییر نام دکمه بخش آبی شده را تغییر بدید و برای تغییر لینک دکمه لینک خودتون را با پیشوند HTTP یا HTTPS در بخش قرمز وارد کنید.

اگر از HTTP یا HTTPS استفاده نکنید نتیجه کار مطلوب نخواهد بود.

پس از تغییر مانند نمونه زیر خواهد شد:

<a href="http://mrmaterial.ir/" class="brand-logo left truncate waves-effect waves-light">Blog Title</a>

اگر هرگونه مشکلی در نصب اجرا و ویرایش قالب داشتید در بخش نظرات اعلام کنید!

آموزش نصب برروی هاست:

۱-ابتدا فایل رو از بخش دانلود دانلود کنید (بصورت فایل .zip)

 

۲-فایل رو در هاست آپلود کنید (توصیه میشه در فولدر ۴۰۴ که خودمون می سازیم آپلود بشه.) و بعد از حالت فشرده خارجش کنید.

 

۳-وارد کد پیش فرض صفحه ۴۰۴ قالب خودتون بشید و تمام کد ها رو حذف کنید و کد زیر رو در اون کپی کنید.

بجای بخش قرمز (URL) آدرس فایل index.html رو در هاست خودتون وارد کنید و فایل ۴۰۴ رو ذخیره کنید.

<?php

   header( 'Location: URL' ) ;

?>

۴-تمام!کار تمام است و حالا شما یک صفحه ۴۰۴ متریال دیزاین دارید. قالب صفحه ارور ۴۰۴

 

See the Pen Material Design 404 Page (IMG) by Emmet (@Emmet) on CodePen.25327

 

See the Pen Material Design 404 Page by Emmet (@Emmet) on CodePen.25327

 

قالب صفحه ارور ۴۰۴ قالب صفحه ارور ۴۰۴

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

  1. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: مهدی شهریور ۱۵, ۱۳۹۵

    ممنون عالی بود

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: Emmet Sanders شهریور ۱۶, ۱۳۹۵

      نظر لطفتونه دوست عزیز.

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

مطالب مرتبط

مطالب تصادفی

لوگوی دوستان

هایپر تمپ | HyperTemp