Kustomisasi Page Not Found 404 Blogger

Kustomisasi Page Not Found 404 Blogger

Bola Hero Gawai

Kustomisasi Page Not Found 404 Blogger

Kustomisasi Page Not Found
Postingan ini sebenarnya usaha saya untuk mencoba menjawab pertanyaan dari +Akiaki Lungguh tentang kustomisasi error 404 pada Blogger. Semoga betul apa yang saya utarakan hehehe...

Setelah saya telusuri ternyata cara membuat halaman error 404 pada blogger melalui Setelan pada Dashboard tidak bisa dilakukan pada setiap blog. Ada blog yang harus dilakukan lewat edit HTML untuk membuat kustomisasi halaman error 404 ini. Alasannya saya belum tahu pasti namun jika ternyata kustomisasi halaman error 404 ini tidak bisa Anda lakukan lewat Dashboard maka Anda harus lakukan lewat edit HTML.

Untuk itu saya memodifikasi sedikit script dari Akiaki Lungguh agar bisa sesuai dengan blog saya. Tampilannya hanya menampilkan halaman Page Not Found dengan menghilangkan elemen-elemen blog lainnya seperti menu, sidebar, dan lain-lain.


Jika ada yang tertarik untuk mencobanya, silahkan copy kode di bawah ini dan simpan di atas kode </body>.


<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.header-wrapper,.sidebar-wrapper,.sidebar2-wrapper,.sidebar3-wrapper,.sidebar4-wrapper,.sidebar5-wrapper,.sidebar6-wrapper,.breadcrumbs,#blog-pager,.post-footer, #comments,.hosting,#undertitle-wrapper,#top-menu,.creditwrap{display:none}
.main-wrapper{width:100%}
.outer-wrapper{width:100%}
#error-404 {text-align: center; transition: all 0.8s ease 0s;color: #b0130d; font-size: 150px; font-weight: bold;}
#error-404:hover {color: #333;}
.large-heading1 {font-size: 70px;margin-top:10%;}
.large-heading2 {font-size: 48px;}
.light-heading1 {font-size: 20px;font-weight: 400;}
.light-heading2 {font-weight: 400;} 
</style>
<div class='large-heading1' style='text-align: center;'>OOPS!</div>
<div id='error-404'>404</div>
<div class='large-heading2' style='text-align: center;'>LAMAN TIDAK DITEMUKAN</div><br/>
<div class='light-heading1' style='text-align: center;'>Kami mohon maaf atas ketidaknyamanan ini</div><br/>
<div class='light-heading2' style='text-align: center;'>Silahkan kembali ke Halaman Utama <a href='/' title='Homepage'><b>Kompi Ajaib</b></a> dan gunakan <b>Search Box</b> untuk kembali mencari artikel yang Anda inginkan.<br/> atau laporkan jika ada kesalahan melalui <a href='#' title='Contact'><b>Contact</b></a>
</div></b:if>

Kode yang di-marking adalah elemen-elemen yang kita hilangkan seperti menu, sidebar, dan lain-lain, silahkan sesuaikan dengan blog masing-masing. Dan untuk kode # silahkan ganti dengan url kontak Anda.

Namun jika Anda ingin mencobanya melalui Dashboard blog silahkan hapus kode yang berwarna hijau. Silahkan Anda masuk ke Dashboard >> Settings/Setelah >> Search Preferences >> kemudian klik "edit" pada Custom Page Not Found.

Untuk mencoba penerapannya pada blog Anda silahkan ketikan url salah blog Anda seperti http://www.BLOG-ANDA.com/404errorpage.

Untuk kustomisasi Page Not Found 404 Blogger ini sendiri sudah banyak artikel yang membahasnya, silahkan saja Anda Googling, salah satunya artikel dari mas +Imron fhatoni  dengan efek animasinya yang keren.

Referensi: http://penghunidumay.blogspot.com/2013/08/cara-membuat-laman-error-404-not-found.html

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×