Membuat Halaman Error 404 Bergaya Untuk Blogger / Blog

Saya berikan Anda pengenalan kecil tentang "Halaman Error 404 Custom" dalam posting terakhir saya dan dalam posting ini saya memberikan gaya 2 desain untuk Error 404 Halaman Tidak Ditemukan. Sebenarnya Halaman Ini Dirancang oleh Paul Santosh membuat hanya changes.Check kecil keluar gambar di bawah.

Style 1

Pergi ke blogger.com>> Preferensi Pencarian Pengaturan dan sekarang klik Edit untuk Page pengaturan Kustom Tidak Ditemukan dan kemudian paste di bawah kode

            

 <h1><a href='/'>404 Not Found</a></h1>
<h2>Whoops! It appears you hit a bad link. My bad! Please click the back arrow on your browser to return to the previous page or <a href='/'>click here to go to homepage</a></h2>
<style type='text/css'>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.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, #header, #footer, nav, .blog-feeds {
    display: none;
    }
</style>

Style 2

 Pergi ke blogger.com>> Preferensi Pencarian Pengaturan dan sekarang klik Edit untuk Page pengaturan Kustom Tidak Ditemukan dan kemudian paste di bawah kode

            

<h1>404 - Page not found!</h1>
<h2>You are looking for the Page isn't here.</h2>
<h3>let's try our site search</h3><BR><BR>
<div id="md-searchbox">
<form id="md-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /></form></div>
<style type='text/css'>
#md-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9_reEOX9EmMhpucMEqNXSShBq1epvGzhQNS5A1z72vruey-FhoVTRmL7V65fn7Dqwz9UPVvj6P4AZQwWswohIAA1a1cthJ41oaE4z2V2Wmf-CYcfKm1WQNyAI2wNiHpAOjjDz3v11iIe/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#md-searchform{display: block;padding: 10px 12px;margin:0;}
form#md-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#md-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
* { margin: 0; padding: 0; }
    body { background: #666; margin: 70px; }
    h1,h2,h3,h4 { margin: 0 0 3px 0; }
        h1 { color: #FFF; font: bold 52px Helvetica, Arial, Sans-Serif;
           text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
           -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
        }
        h1:hover {
           position: relative; top: -3px; left: -3px;
           text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
        }
       h2 { color: white; font: bold 34px Helvetica, Arial, Sans-Serif;
        text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;
        -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
       h2:hover {
           text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;
       }
    h3 { color: white; font: bold 42px Helvetica, Arial, Sans-Serif;
        text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
        -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
       h3:hover {
           position: relative; top: -3px; left: -3px;
           text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
       }
       h4 { color: white; font: bold 24px Helvetica, Arial, Sans-Serif;
        text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;
        -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
       h4:hover {
           text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;
       }
    #content { width: 100%; }
#sidebar-wrapper, #blog-pager, #header, #footer, nav, .blog-feeds {
    display: none;
    }
</style>

 Terakhir disimpan .
Semoga Bermanfaat :)

Tweet

Subscribe to receive free email updates: