Cara Membuat Halaman Error 404 di Blog ala Kang Rian - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 6/04/2014 11:38:00 AM Cara Membuat Halaman Error 404 di Blog ala Kang Rian Cara Membuat Halaman Error 404 di Blog ala Kang Rian

Cara Membuat Halaman Error 404 di Blog ala Kang Rian

Oleh. Kang Rian  •  71  •      Edit
Cara Membuat Halaman Error 404 di Blog ala Kang Rian
Cara Membuat Halaman Error 404 di Blog ala Kang Rian
Sent Pin it!
404 Adalah Kode Halaman Error yang biasa muncul pada setiap halaman web/blog ketika seorang visitor (pengunjung) mengunjungi url yang terhapus / salah dalam pengetikan. Nah, kali ini saya ingin berbagi tutorial "Bagaimana Cara Membuat Halaman Error 404 di Blog ala Kang Rian" untuk di pasang pada blog sobat.

Untuk sobat yang penasaran bagaimana tampilan halaman 404 yang saya maksud, silahkan lihat Demo / lihat screenshot halaman 404 error di bawah ini :



Keunggulan

  • Responsive
  • Smooth
  • Support CSS3
  • Simple & Fast

Cara Pemasangan

Langkah 1 - Login Blogger, buka menu Template → Edit HTML lalu simpan kode di bawah ini tepat setelah kode <body> :
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Langkah 2 - Simpan kode di bawah ini tepat di atas kode </body> :
</b:if><b:if cond='data:blog.pageType == &quot;error_page&quot;'><link rel='stylesheet' type='text/css' href='https://googledrive.com/host/0B7H_GQEvKCj1cUVkYy1jbXpqZW8/404-error.css'/><link href='http://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/><div id='error-page'><!-- Halaman Error --><!-- #404 --><div id='error-halaman'><div class='comingcontainer'><div class='checkbacksoon'><p><span class='go3d'>4</span><span class='go3d'>0</span><span class='go3d'>4</span><span class='go3d'>!</span></p><p class='error-bro'> Mohon maaf, Halaman yang Anda cari tidak ditemukan!<br/> Kemungkinan halaman telah dihapus, atau Anda salah menuliskan URL.<br/>Silahkan kembali ke<a class='tombol' href='/' style='box-shadow:none;color:#444;'>Halaman Pertama</a></p></div></div></div><!-- #404 --></div></b:if>

Terakhir - Simpan Template!

Untuk mencoba-nya tinggal tuliskan http://nama-blog-sobat.blogspot.com/404 ( ganti nama-blog-sobat dengan alamat blog sobat )

Selesai, Semoga Bermanfaat!

Postingan Sebelumnya :

Sent Pin it!

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

   

71 komentar

  1. Adhy Suryadi6/04/2014 12:44 PM

    Keren kang efek 3 dimensinya jadi tambah berkarakter :)

    BalasHapus
    Balasan
    1. Rian Nurherdian6/04/2014 1:14 PM

      terima kasih mas adhy, hehe ternyata mas adhy suka typography juga :D .

      Hapus
    2. Beben Koben6/04/2014 6:14 PM

      gue jg berkarakter kan!!!

      Hapus
    3. Rian Nurherdian6/04/2014 6:37 PM

      gue jugaa. :p

      Hapus
  2. Si Ryan6/04/2014 4:44 PM

    keduax :thumbup

    Wah mantap kang tampilan 404 not foundnya, izin praktekin dulu ke tkp kang :ngacir terimakasih mantap banget :shakehand :genit

    BalasHapus
    Balasan
    1. Rian Nurherdian6/04/2014 4:57 PM

      Woke kang, semoga berhasil ! :thumbup

      Hapus
    2. Si Ryan6/06/2014 12:28 PM

      beuh makin mantap aja blog kang rian, emoticonnya juga mantap :ngakak
      kasih cendol 2 liter :cendol

      Hapus
  3. Firman Ardyansyah6/04/2014 7:06 PM

    Ini engga pake JS kan ya ? :thumbup

    BalasHapus
  4. Muhammad Adam Hussein6/04/2014 7:24 PM

    Wah keren juga nih, dengan script cssnya sangat membantu dalam menyediakan halaman yang tidak ditemukan.

    Makasih mas. ^.^

    BalasHapus
    Balasan
    1. Rian Nurherdian6/05/2014 8:56 AM

      sama-sama mas Muhammad, semoga bermanfaat.

      Hapus
  5. Cihan Namaku6/04/2014 8:22 PM

    oh ya kang dari kemarin masalah saya di error 404 ini.. title tagnya kok gak mau nongol ya kang... tolong dong diintip hee...

    BalasHapus
    Balasan
    1. Rian Nurherdian6/05/2014 9:00 AM

      Coba tambahkan kode di bawah ini gan sebelum tag [tag]</head>[/tag], khusus untuk tag kondisional blogger pada halaman 404 :

      [code]<b:if cond='data:blog.pageType == &quot;error_page&quot;'> <!-- 404 -->
      <title>404 - Halaman tidak ditemukan!</title>
      </b:if>[/code]

      Semoga berhasil . :thumbup

      Hapus
    2. Cihan Namaku6/05/2014 3:36 PM

      saya pake itu jg sob ttp aja gal nyangkut, tau tuh salahnya dmn

      Hapus
  6. Making Drawn6/04/2014 8:29 PM

    wah cukup menarik mas....selalu ada ide yang menarik disini...:)

    BalasHapus
    Balasan
    1. Rian Nurherdian6/05/2014 9:01 AM

      terima kasih mas, jangan sungkan nongkrong dimari. :D

      Hapus
  7. FIAN MT6/05/2014 8:06 AM

    Modifnya cuku keren mas,

    BalasHapus
  8. Markus Kono6/05/2014 5:40 PM

    keren Kang ijin praktek...

    BalasHapus
  9. Tenri Baso6/06/2014 10:16 AM

    KEREN KANG RIAN :2thumbup

    BalasHapus
  10. Faiz Alfikrona6/07/2014 8:22 AM

    KANG KOK WAKTU ITU BERHASIL SEKARANG GAK SIH? : http://kelas4ctechno.blogspot.com/404 :sorry

    BalasHapus
    Balasan
    1. Rian Nurherdian6/07/2014 1:17 PM

      Ganti file :
      [code]http://dl.dropboxusercontent.com/s/0avriui3yym1dlc/404-error.css[/code]
      Dengan :
      [code]https://googledrive.com/host/0B7H_GQEvKCj1cUVkYy1jbXpqZW8/404-error.css[/code]

      Hosting Dropbox ane over bandwith sob.. sorry! :D

      Hapus
  11. Mauliyandri Alhikmah7/04/2014 4:48 PM

    keren kang,
    sudah saya praktekan :2thumbup

    BalasHapus
  12. Teja Sukmana7/10/2014 8:39 PM

    Hatur Nuhun :shakehand Kang Rian
    Bermanfaat Banget :2thumbup

    BalasHapus
  13. Khizbulloh Huda8/18/2014 5:07 PM

    kalau ganti backgroundnya gimana kang? tolong bimbingannya :2thumbup

    BalasHapus
  14. Sigit Feriyanto11/04/2014 8:54 PM

    Infonya sangat bermanfaat gan. saya rasa artikel ini membuat saya lebih tahu dan lebih paham.
    oh iya gan perkenalkan saya seorang blogger pemula yang masih belajar tentang blog.
    makanya saya semangat cari info-info lain yang mungkin saja bermanfaat buat saya peribadi.
    Oh iya berikut ini artikel yang saya bangga-banggakan gan. dibaca ya.
    Cara Membuat Blog dengan Blogger
    Cara Memasang Animasi Burung Twitter Melayang di Blog
    Cara Memasang Widget Alexa Rank di Blog
    Cara Membuat About Me Di Blog
    Cara Membuat Buku Tamu Tersembunyi Pada Blogger

    Semoga semua yang saya tulis bermanfaat buan agan pribadi termasuk pengunjung blog ini.
    Kao mw buat buku tamu agan bisa baca di artikel Cara Membuat Buku Tamu Tersembunyi di Blog

    Ok gan. terimakasih lagi atas infonya, semoga agan rajin updatenya dan sukses selalu.
    salam kenal dari saya.

    BalasHapus
  15. Sendy Yulfizar Kuswara11/10/2014 5:19 AM

    Wah, keren uy...
    Dengan sedikit modifikasi, sudah saya terapkan di error page blog saya ini : Error Page AdiewCen.com
    Hatur nuhun pisan Kang...

    BalasHapus
  16. Jelajah Indonesia12/02/2014 2:12 AM

    kang untuk reload otomatis. tanpa harus klik halaman utama gimana ya solusinya..

    BalasHapus
  17. Hardi anto12/22/2014 8:55 PM

    mantap kang tutorialnya.. sangat bermanfaat

    BalasHapus
  18. muhammad syafiq1/03/2015 2:36 PM

    Mantap gan,sukses :2thumbup

    BalasHapus
  19. sulis tio1/24/2015 5:12 PM

    wahh ini yang saya cari gan, thanksssssssssss gans :kiss

    BalasHapus
  20. Kejora Movie1/30/2015 3:01 PM

    Ono wong kok kreatif tenan rek,,, jempol ge sampeyan mas bro.....
    kejoramovie.blogspot.com/error404

    BalasHapus
  21. Vyra Alexandra Lovely2/21/2015 7:03 AM

    langsung dipraktekkan kang..hehehe
    hatur nuhun pisan

    BalasHapus
  22. kedai acemaxs3/03/2015 9:36 AM

    Thanks infonya ka, sangat membantu :)
    http://kedaiacemaxs.com/

    BalasHapus
  23. KSP LESTARI3/14/2015 10:28 AM

    Terima kasih banyak Kang Rian berhasil saya praktekkan.. :)

    BalasHapus
  24. Bham Armstrong4/03/2015 11:47 AM

    keren gan.. izin sedoot

    BalasHapus
  25. Abimanyu Damarjati4/14/2015 8:57 PM

    Work nih kang thxu ya :kiss

    BalasHapus
  26. Khizbulloh Huda5/03/2015 2:45 PM

    kang, peringatannya gw comot buat halaman anti ctrl+u ya...

    BalasHapus
  27. Dandy Rizky5/22/2015 2:42 PM

    .Kang rian, ini saya bingung nih. saya kan sudah sukses memasang error page 404 not found ala kang rian ini. tapi kenapa dalam 2 detik, tiba-tiba redirect ke blog yang membuat template saya. Itu ngaturnya dimana kang? Mohon bantuannya. :)

    BalasHapus
    Balasan
    1. evan pasha7/19/2015 10:31 AM

      Wah Iya Kang Rian,, Masalah saya juga ini,, tiba2 redirect ke blog lain... Mohon Dibetulin ya gan...

      Hapus
    2. Fachrizal FP9/26/2015 5:03 PM

      nah saya juga seperti ini

      Hapus
  28. Anonim5/23/2015 6:06 AM

    Keren kang..ntar saya coba deh.
    mkasih sharingnya

    BalasHapus
  29. IT Stopover6/03/2015 4:14 PM

    Keren kang rian. :)

    di tunggu kunjungan baliknya ^_^

    membuat halaman error 404 dengan efek glitch -> http://itstopover.blogspot.com/2015/05/membuat-efek-glitch-untuk-halaman-error-404-di-blogger.html

    BalasHapus
  30. Akang sam7/01/2015 10:33 PM

    thanks guys for your sharing, i really like that tutorial.

    BalasHapus
  31. Akang sam7/01/2015 10:35 PM

    oia sob, ada pertanyaan ne, saya sudah menghapus artikel dr blog ku namun url nya lupa gmana tuh caranya?

    thanks b 4

    BalasHapus
  32. Adyarto adv7/03/2015 4:57 AM

    404

    BalasHapus
  33. PC IPNU IPPNU Kudus8/30/2015 7:28 PM

    thank sharingnya kang..ijin coba dulu semoga bisa berhasil...
    salam kenal dari PC IPNU IPPNU KUDUS
    http://www.ipnuippnukudus.or.id/

    BalasHapus
  34. Fachrizal FP9/26/2015 5:01 PM

    kang rian, mau tanya gimana caranya biar automatically redirect ke homepage kita? makasih saya sudah pake ini tapi pgn yg automatically redirect setelah beberapa detik hehe. Makasih sebelumnya

    BalasHapus
  35. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  36. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  37. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  38. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  39. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  40. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  41. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  42. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  43. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  44. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  45. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  46. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  47. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  48. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  49. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  50. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  51. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  52. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  53. DxD10/09/2015 11:55 PM

    ijin praktekin kang rian. joss banget ane demen :D

    kunbal ya terima kasih :)

    BalasHapus
  54. Anonim11/18/2015 3:11 PM

    yeah berhasil kang thx informasinya

    BalasHapus
  55. Angkasa Bali12/30/2015 4:14 PM

    makasi gan infonya

    BalasHapus
Utama Blogger HTML Cara Membuat Halaman Error 404 di Blog ala Kang Rian

Terpopular! Minggu ini..

×

Konversi Bersihkan