اضافة صفحات الخطأ بأشكال مختلفة لمدونات البلوجر [Error 404]

درسنا اليوم هو اضافة رائعة لمدونات بلوجر وهى اضافة صفحات الخطأ بأشكال مختلفة لمدونات البلوجر [Error 404].
                                                           " ما هو Error 404 ؟ "

هو يظهر عند الإنتقال إلى رابط خاطئ في مدونتك تظهر الصفحة وما يوجد فيها بإمكانك إستخدام الاشكال فيها الشرح سوف يكون على الواجهة الجديدة 

متال كما في الصورة اعلاه

شرح التركيب

بالصور لتسهيل الشرح

_______________________________________________________________________

_________________________________________________________________________________

_________________________________________________________________________________

1_ نستعرض الاكواد اختر ما يناسب

الشكل الاول:

الكود

رمز Code:

 <center>
            <h1><a href='/'>خطأ 404 !</a></h1>
            <img src="https://lh5.googleusercontent.com/-nHXvuriSnr8/T5GZNwnY2uI/AAAAAAAAAOs/VgQ8fyBHDJk/s300/404.png"" />
            <style type='text/css'>
            main-wrapper
            #sidebar-wrapper, #blog-pager,#menupic,#sidebarleft-wrapper,#main-nav, #header, #footer, nav, .blog-feeds {
            display: none;
            }
            </style>
            <h1><a href='/'>الصفحة الرئيسية</a></h1>
  </center>

الشكل الثانى:

الكود

رمز Code:

 <h1><a href='/'>خطأ 404 !</a></h1>
     <h2> نعتذر ! فإن الصفحة التي تبحث عنها غير موجودة أو تم حذفها  يرجى التأكد من الرابط  أو <a href='/'>التوجه إلى الصفحة  الرئيسية</a></h2>
    <style type='text/css'>
    .status-msg-wrap {
        font-size: 50%;
        margin: none;
        position: static;
        width: 150%;
    }
    .status-msg-border {
        display:none
    }
    .status-msg-body {
        padding: none;
        position: static;
        text-align: inherit;
        width: 100%;
        z-index: auto;
    }
    .status-msg-wrap a {
        padding: none;
        text-decoration: inherit;
    }
    * { margin, padding: 0; }
    body {
     background: #474747 url(bg.png);
     margin: 70px;
    }
    h1 a {
     display: block; text-decoration: none;
     font: 150px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
     text-align: center;
     color: #999; text-shadow: 0px 3px 8px #2a2a2a;
     }
      h1 a:hover {
       color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
      }

    h2 {
     font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
     text-align: center;

     color: #222; text-shadow: 0px 2px 3px #555;
    }
    #sidebar-wrapper, #blog-pager,#main-nav, #header, #footer, nav, .blog-feeds {
        display: none;
        }
    </style>

الشكل الثالث للخلفية البيضاء

رمز Code:

 <center>
    <h1><a href='/'>خطأ 404 !</a></h1>
    <img src="https://lh6.googleusercontent.com/-k75IxPbVXwA/T788P-tjslI/AAAAAAAAAiY/iUREnca7ksQ/s320/Untitled-2.png"" />
    <style type='text/css'>
    main-wrapper
    #sidebar-wrapper, #blog-pager,#menupic,#sidebarleft-wrapper,#main-nav, #header, #footer, nav, .blog-feeds {
    display: none;
    }
    </style>
    <h1><a href='/'>الصفحة الرئيسية</a></h1>
    </center>

الشكل الرابع للخلفية السوادء:

رمز Code:

<center>
    <h1><a href='/'>خطأ 404 !</a></h1>
    <img src="https://lh3.googleusercontent.com/-7hruJSrS1ZE/T788MGznFPI/AAAAAAAAAiI/bCE1bQbrR7Q/s320/Untitled-3.png"" />
    <style type='text/css'>
    main-wrapper
    #sidebar-wrapper, #blog-pager,#menupic,#sidebarleft-wrapper,#main-nav, #header, #footer, nav, .blog-feeds {
    display: none;
    }
    </style>
    <h1><a href='/'>الصفحة الرئيسية</a></h1>
    </center>

وهكذا تم بحمد الله