Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Desain Halaman 404 Error Pada Blog

page not found 404 error Membuat Desain Halaman 404 Error Pada Blog – masih erat kaitannya dengan artikel karena ini postingan berkelanjutan dari yang sebelumnya yakni pada pembahasan Memahami Konsep Redirect Halaman Blog karena pada tutorial ini akan saya bahas untuk tata cara membuat pesan pada halaman pencarian yang tidak di temukan saat search engine mengindeks. Karena biasanya jika sebuah artikel hilang dari hasil pencarian maka pada halaman tersebut hanya akan menampilkan pesan Posts filed under Search results atau No posts matching the query. Pesan seperti itu dapat kita custom dengan mudah menggunakan fasilitas blogger yang terdapat pada menu Preferensi penelusuran. Hal ini saya kaitkan dengan artikel sebelumnya karena pada tutorial ini saya membuat agar pada saat search engine gagal mengindeks maka halaman blog akan menampilkan form search untuk mengarahkan kembali lalu lintas blog dan juga mempermudah pengunjung. Berikut langkah-langkah cara Membuat Desain Halaman 404 Error Pada Blog yang nantinya akan menampilkan pesan jika terdapat halaman yang error.
Demo
Pada halaman dashboard blog masuk ke menu Preferensi penelusuran. Disitu akan di tawarkan fasilitas Kesalahan dan Pengalihan, pada fitur blogger tersebut lakukan edit pada “Pesan Khusus untuk Laman Tidak Ditemukan” form yang nantinya muncul akan kita gunakan untuk mengkustom pada halaman yang tidak ditemukan dengan menggunakan CSS, jQuery dan HTML yang dapat kita taruh didalamnya karena seluruh elemen tersebut dapat dimuat dengan baik termasuk juga teks.
Membuat Desain Halaman 404 Error Pada Blog Sekarang kita flashback ke tutorial sebelumnya yakni pada artikel yang berjudul Form Search Blogger Dengan Ajax jQuery. Disitu sudah saya jelaskan untuk membuat halaman search engine yang berbasis Google AJAX Search API, sekarang copy saja seluruh kode yang terdapat pada artikel tersebut kemudian lakukan sedikit custom lagi bisa dengan menambahkan suatu teks pesan atau bisa juga menggunakan gambar. Jika ingin menggunakan gambar, desainlah gambar yang akan digunakan menjadi sebagus mungkin.

Jika seluruh kode sudah di copy, sekarang perhatikan pada bagian HTML antara kode <div id="page"> sampai </div> yang paling bawah. Karena disini saya menggunakan gambar, jadi saya akan menyisipkan sebuah gambar yang nanti letaknya di bagian atas form search dengan memasang markup URL gambar tepat dibawah <div id="page">. Maka cara penerapannya seperti kode yang berwarna merah berikut ini, nanti anda dapat menyesuaikannya dengan menggunakan gambar lain atau bisa juga menggunakan teks pesan biasa.
<div id="page">
<a href="http://mas-andes.blogspot.com" target="_blank"><img src="https://lh5.googleusercontent.com/-QmE7yAr5XYs/UnZvUk-cOTI/AAAAAAAAGgo/TrkSqf0jjS4/h316/error-404.jpg" alt="error 404" title="Halaman Tidak Ditemukan"/></a>
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />
<input type="submit" value="Search" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search The Web</label>
</div>
<ul class="icons">
<li class="web" title="Web Search" data-searchType="web">Web</li>
<li class="images" title="Image Search" data-searchType="images">Images</li>
<li class="news" title="News Search" data-searchType="news">News</li>
<li class="videos" title="Video Search" data-searchType="video">Videos</li>
</ul>
</fieldset>
</form>
</div>
<div id="resultsDiv"></div>
Jika sudah, masukan kode seluruhnya mulai dari CSS, jQuery sampai HTML kedalam form “Pesan Khusus untuk Laman Tidak Ditemukan” pada Preferensi penelusuran menu blogger. Setelah tersimpan, maka halaman tersebut akan ditampilkan jika terjadi kesalahan pada suatu halaman yang gagal di indeks.

Berlangganan artikel via email

32 Response to "Membuat Desain Halaman 404 Error Pada Blog"

Waduh dapat pertamax lagi nich...
Demonya blm kelihatan efeknya Mas.. cuman tulisan biasa :)

Balas

hihi.. untung ada yang bilang.
maap mas tadi kehapus kodenya nih udah beres lagi :)

Balas

bagus yah mas kalau halaman errornya dikasih gambar dan tulisan, biar yang datang mengunjungi artikel kita yang error tidak kecewa jika terjadi hal-hal seperti kasus 404 error ini, makasih mas :)

Balas

Ada aja Mas Andes ini idea nya, semuanya di buat menarik
Dan penuh warna, hingga tidak membuat visitor gak kecewa
Manakal menjumpai halaman posts yang Error 404, pada blog
Tapi kalau code 808 jadi error bisa gak Mas di buat thumbsnail? hhh
Ijin di pelajari Mas terima kasih Mas Andes.

Balas

Demo nya jadi form search blog, dan search web
Kalau gambar demo nya gaka ada Mas Andes.?

Balas

supaya halaman 404 tidak menjemukan jadi harus dibuat sebagus mungkin ya mas...
yang ini harus segera diterapkan nih :haha

Balas

widihh keren sekali daripada yang lain mas Andes, untung kodenya tak mengerikan seperti yang kemaren :D

Balas

Sekarang udah keliatan.. Keren mas Andes..
Biasanya kalo halaman error dipakai demo jadi broken link mas :)
Mending ditaruh jsfiddle. Ini sih pengalaman saya :)

Balas

pada template saya sudah saya terapkan dengan cara lain sob, cuma untuk artikel dari mas andes ini saya ijin comot kode search nya mas, soalnya di menu 404 saya tidah saya pasang menu search nya

Balas

bagus membuat tampilan halaman yang di temukan, jadi lebih menarik..

Balas

langsung terapin aja deh, gk usah basa basi, wkwkwk

makasih mas andes

Balas

wah jadi makin keren mas :D

Balas

Ternyata cukup mudah ya gan cara pasangnya baru tau saya :)

Balas

Wah makin rajin eksperimen nih mas...kadang hal2 seperti ini masih minim dibahas didunia blogger padahal sangat penting sekali

Balas

Ini kok kode terus yang mengerikan hohohoho ...emang seperti apakah gerangan????

Balas

Bagus ini mas langsung tersedia lengkap kodenya untuk desain halaman 404nya.

Balas

tinggal dipraktekin aja mas :)

Balas

wah kang ucup semangat sekali nih :)

Balas

Keren mas Andes ....jadi keliat sebagai pemberitahuan gitu ya... Buat para pengunjung blog kita :)

Balas

Seratus buat mas Virlyz :)

Balas

Termasuk service buat para pelanggan ya mas... :)

Balas

Kan habis ngopi sambil ngemil sale mas..hehe :D

Balas

hihi saya udah lama pake mas, bisa di cek deh punya saya :3

Balas

Pertamax kang andes (y)

Balas

button pencariannya bagus :D .

Balas

kapan saya dibuatin template :3 ..belum di publish ya templatenya.

Balas

masih sambil perdalam ilmu miz.. hehe tapi ga lama lagi ntar saya publish.
apa mau pake template premium dulu saya ada nih lumayan, tinggalin email

Balas

Keren sekali mas tutorialnya, sangat menarik jadi ane coba dulu ya mas. Terima kasih :)

Balas

terimakasih banyak sob, mantab banget

http://www.tokoobatku.com/

Balas

Sangat bermanfaat.Terima kasih banyak Gan

Balas

http://piljatep.web.id/content/desain-kreatif-halaman-pesan-eror-404-vektor-gratis-dari-freepikcom. Link ini sekedar share sebagai rujukan desain pembuatan halaman eror 404. Mumpung gratis sumber artworknya. Semoga bermanfaat.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Desain Halaman 404 Error Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode