Create 404 error page in Blogger with simple flash game - Membuat halaman error 404

Menampilkan game flash sederhana di halaman Error 404 Blogger.

Banyak hal dapat kita lakukan "di halaman dengan alamat tak jelas" atau "halaman error 404" yang juga disebut sebagai "404 error page". Halaman yang akan dijumpai di blogger ketika sebuah alamat tak bisa ditemukan karena beberapa sebab, seperti misalnya:

1. Seseorang menuliskan alamat (URL) secara tak benar.
contoh:
- http://gubhugreyot.blogspot.com/2010/08/juery-lightbox.html harusnya:
- http://gubhugreyot.blogspot.com/2010/08/create-juery-lightbox.html
2. Judul posting yang telah di hapus. Alamat sebuah posting sekalipun telah di hapus akan tetap tersimpan dalam mesin pencari google, sehingga ketika posting dihapus alamat ini akan tetap ada sedangkan postingnya takkan pernah ditemukan lagi.
Contoh silahkan buka link berikut:
- http://gubhugreyot.blogspot.com/2012/04/best-solution-when-reply-comment-button_12.html

Membuat halaman error 404 (halaman tak ditemukan) menjadi sebuah bagian yang menarik dari sebuah blog bisa membuat seorang pengunjung menjadi semakin tertarik untuk membuka lebih banyak lagi posting. Anda sebaiknya menampilkan kata-kata yang bersahabat dan membuat pengunjung merasa nyaman sekalipun halaman yang di cari tak ditemukan. menampilkan sebuah file flash dalam halaman error 404 adalah sebuah improvisasi yang bisa lebih dikembangkan lagi. Dalam posting ini telah kita sediakan kode css berikut xHTML untuk membuat halaman error 404 yang didalamnya disertakan game sederhana dalam bentuk file flash. Anda dapat memilih menggunakan kode css dan xHTML-2 atau hanya menggunakan xHTML-1. Jika anda gunakan xHTML-1, maka anda tak perlu lagi menggunakan kode css. Semua sudah tersimpan dalam javascript yang didalamnya berisi file game flash serta kode css. D E M O

Cara membuat halaman error 404 dengan game flash-1:

1. Lakukan login ke Blogger.
2. Setelah halaman dasboard terbuka, bagi yang masih menggunakan "Old Blogger Interface silahkan upgrade terlebih dahulu ke "New Blogger Interface".

   Blogger is getting a new look in April. Upgrade Now.

3. Settings/Setelan.
4. Search Preference/Preferensi Penelusuran.
5. Errors and redirections » Custom Page Not Found ? atau : Kesalahan dan pengalihan » Pesan Ubahsuaian untuk Laman Tidak Ditemukan ? Silahkan klik "Edit".
6. Simpan xHTML-1 dalam box yang tersedia.

   xHTML-1 :

   <center>
   Cihui... Rupanya anda tersesat! Kecian,dech... Hu ... makanya besok lagi klo mo bepergian bawa peta,dong!  Nich...,maen game  duluan n n'tar klo dah cape klik link-nya. Teman2 udah nundu, mbul!!<br/><a href="http://gubhugreyot.blogspot.com" title="Tuh ... liat ... tuh ... jalannya. Hih... ,dasar!">gubhugreyot : demos & tutorials</a>
   <script src="http://gubhugreyotprojects.googlecode.com/svn/widgets/flash-blogger-404-error-page.js" type="text/javascript"></script>
   </center>

7. Save Changes/Simpan Perubahan.
8. Buka salah satu posting dengan sedikit merubah URL-nya agar halaman error 404 terlihat (lihat contoh dua kasus di atas!).

Cara membuat halaman error 404 dengan game flash-2:

Untuk yang kedua, cara yang dipergunakan hampir sama, hanya anda harus menambahkan kode css di atas kode ]]></b:skin>

1. Lakukan proses seperti di atas (dg xHTML-1) dan simpan xHTML-2.
2. Setelah xHTML-2 tersimpan, lanjutkan dengan klik "Template".
3. Klik "Edit HTML".
4. Klik "Proceed/Lanjutkan".
5. Cari kode ]]></b:skin>.
6. Letakkan kode CSS di atas ]]></b:skin>.
7. Klik "Save Template/Simpan Template".
8. Buka sebuah alamat posting seperti cara yang dipergunakan pada xHTML-1.

xHTML-2 :

<center>
Cihui... Rupanya anda tersesat! Kecian,dech... Hu ... makanya besok lagi klo mo bepergian bawa peta,dong!  Nich..., maen game duluan n n'tar klo udah cape klik link-nya. Teman2 udah nundu, mbul!!<br/><a href="http://gubhugreyot.blogspot.com" title="Tuh ... liat ... tuh ... jalannya. Hih... ,dasar!">gubhugreyot : demos & tutorials</a>
<div class="GRflashgame1">
<div class="GRflashgame2">
<embed src="http://gubhugreyotprojects.googlecode.com/svn/flash/gubhugreyot-flash-cat-game.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="400" style="margin:-40px 0 0 -30px;"></embed>
</div>
</div>
</center>

Kode CSS :

.status-msg-wrap{
      position:fixed;
      z-index:9999;
      top:0; /* by: gubhugreyot */
      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-bg{
      background:transparent;
}
.status-msg-wrap:after{
      position:absolute;
      right:40px;
      top:92%; /* by: http://gubhugreyot.blogspot.com, april, 2012 */
      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;
}
.GRflashgame1{
      margin:30px auto;
      width:450px;
      height:330px;
      border:10px solid #999;
      border-radius:15px;
      overflow:hidden;
      box-shadow:-3px -3px 3px #444,6px 6px 6px #222,0 0 20px #000;
}
.GRflashgame2{
      border:5px solid transparent;
      border-radius:6px;
      width:440px;
      height:320px;
      overflow:hidden;
}

Catatan/Keterangan :

1. Arahkan cursor ke gambar untuk melihat tutorial dalam gambar.
2. Ganti teks "Cihui... Rupanya anda tersesat! Kecian,dech ... dst" dengan teks lain yang membuat pengunjunglebih enjoy.
3. Ganti URL : "http://gubhugreyot.blogspot.com" dengan URL blog anda.
4. Ganti title "Tuh ... liat ... tuh ... jalannya. Hih... ,dasar!" dengan teks lain yang lebih tepat.
5. Untuk mengganti file flash, silahkan ganti : "http://gubhugreyotprojects.googlecode.com/svn/flash/gubhugreyot-flash-cat-game.swf"
6. width="500" height="400" style="...." bisa dideuaikan dengan file flash yang baru.
7. Jika anda ingin membuat halaman error 404 yang berbeda, dimana yang ditampilkan bukan file flash melainkan sebuah image, silahkan buka tutorialnya melalui link di bawah ini: Create 404 Error Page in Blogger with CSS3

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu PON, April, 14, 2012

» Happy Blogging - gubhugreyot «