Create 404 Error Page in Blogger with css3

Klik gambar di bawah ini untuk melihat dalam ukuran lebih normal!

Sesuatu yang jarang terlihat, apalagi tersentuh pasti acap terlupakan. Jika itu menyangkut blog, salah satu diantaranya tentulah halaman error 404 (tak di temukan) atau yang lebih dikenal dengan "404 Error Page" atau "page not Found". Halaman Error 404 muncul ketika sebuah URL tak dapat ditemukan akibat perubahan permalink. Ini banyak terjadi karena posting yang telah dihapus. Hal yang sama juga bisa terjadi akibat pencarian dengan penulisan URL yang tidak tepat. Untuk membuat halaman error 404 yang lebih bersahabat, blogger telah menyediakan sebuah fitur yang dapat anda akses melalui halaman dasbor.

D E M O :

Demo Error 404

Kode CSS :

.status-msg-wrap{
      position:fixed;
      z-index:9999;
      top:0;
      left:0;
      width:100%;
      height:100%;
      padding:0;
      margin:0;
      background: #7d7e7d;
      background: -o-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -moz-linear-gradient(-45deg, #7d7e7d 1%, #6d6d6d 17%, #303030 17%, #6d6d6d 21%, #444444 28%, #6d6d6d 28%, #2b2b2b 30%, #6d6d6d 31%, #333333 35%, #828282 35%, #828282 91%, #333333 91%, #828282 92%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#7d7e7d), color-stop(17%,#6d6d6d), color-stop(17%,#303030), color-stop(21%,#6d6d6d), color-stop(28%,#444444), color-stop(28%,#6d6d6d), color-stop(30%,#2b2b2b), color-stop(31%,#6d6d6d), color-stop(35%,#333333), color-stop(35%,#828282), color-stop(91%,#828282), color-stop(91%,#333333), color-stop(92%,#828282));
      background: -webkit-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -ms-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#828282',GradientType=1);}
.status-msg-body{
      font-size:24px;
      color:#eee;
      text-shadow:2px 2px 2px #000;
      margin:0 auto;
      padding:40px 100px;
      height:550px;
      width:800px;
}
.status-msg-body a{
      color:#FC0;
      text-decoration:none;
}
.status-msg-body a:hover{
      color:#6FF;
      text-decoration:none;
}
.status-msg-body img{
      display:block;
      margin:20px auto;
      text-align:center;
      opacity:0.7;
      filter:alpha(opacity=70);
      width:80%;
      height:400px;
      border-top-left-radius:45%;
      border-top-right-radius:45%;
      border-bottom-right-radius:90%;
      border-bottom-left-radius:90%;
      border:10px solid rgba(255,255,255,0.6);
      box-shadow:-2px -2px 2px #333,5px 5px 5px #000;
}
.status-msg-bg{
      background:transparent;
}
.status-msg-wrap:after{
      position:absolute;
      right:40px;
      top:92%;
      font-size:12px;
      font-family:arial;
      transform:rotate(-45deg);
      -o-transform:rotate(-45deg);
      -moz-transform:rotate(-45deg);
      -webkit-transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
      color:#000;
      content:"gubhugreyot";
      text-shadow:0 0 0 #fff;
}

Cara membuat halaman Error 404 :

1. Simpan kode css di atas ]]></b:skin>
2. Login ke Blogger.
3. Dasbor (Dasboard).
4. Bagi yang masih menggunakan Antar Muka Blogger Lama (Old Blogger Interface) lakukan Upgrade (Tingkatkan Versi Sekarang.) dan gunakan New Blogger Interface (Try the updated Blogger interface).
5. Setelah upgrade selesai, klik "Settings/Setelan".
6. Klik "Search preferences/Preferensi Penelusuran".
7. Klik "Edit" pada "Kesalahan dan Pengalihan | Pesan Ubahsuaian untuk Laman Tidak Ditemukan" atau "Errors and redirections | Custom Page Not Found".
8. Copy dan pastekan xHTML di bawah dalam box yang tersedia (setelah klik Edit).
9. Klik "Simpan perubahan (Save Changes)".
10. untuk menyimpan kode CSS lanjutkan Klik "Template".
11. Klik "Edit HTML".
12. Klik "Proceed"
13. Cari kode ]]></b:skin>
14. Letakkan kode CSS di atas ]]></b:skin>.
15. Klik Save Template".
16. Selesai!

xHTML :

Cihui... Rupanya anda tersesat! Kecian, deh... Hu ... makanya besok lagi klo mo bepergian bawa peta, dong! <a href="http://gubhugreyot.blogspot.com" title="Tuh ... liat ... si sono tuh jalannya. Hih... , dasar!">gubhugreyot : demos & tutorials</a>
<img src="https://lh6.googleusercontent.com/-bVNeoiocOiE/T24fY4ic83I/AAAAAAAAAgc/7_uZ-DFjdqI/s400/gubhugreyot_penelopecruz.jpg" />

Catatan/Keterangan :

1. Ganti "Cihui... Rupanya anda tersesat! ... etc dengan kata yang lebih kejam ...! He .. he ... mangsudnya .. kebih bersahabat!"
2. Ganti http://gubhugreyot.blogspot.com dengan URL blog anda.
3. Ganti demos & tutorials dengan teks lain sesuai dengan materi posting.

Cara mencoba :

1. Pilih salah satu posting dan copy URL posting tersebut.
2. Rubah URL agar tidak sama/berubah dari alamat sesungguhnya.
   contoh
   http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/tagcloud-cumulus-gaya-baru-flash.html
   menjadi :
   http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/palsu-tagcloud-cumulus-gaya-baru-flash.html
3. Lakukan pencarian menggunakan alamat (URL) paslsu tersebut.