Saya ingin sedikit berbagi tentang tutorial cara membuat halaman yang eror 404, pesan eror pada halaman sangat mungkin sekali terjadi sekali karena beberapa sebab diantaranya karena pengunjung blog yang mengetik link kurang benar atau bahkan backlink spam yang berasal dari pencarian, kalau dulu halaman eror bisa kita beri pesan di form blog sendiri, namun karena perubahan templat atau karena yang lain halaman eror 404 menjadi blank alias tak tak ada apa-apa atau kosong mlompong.
Disini saya ingin membuat halaan yang eror menjadi menarik, tentu sobat blogger akan suka dengan tampilannya, namun sebelum kita bertindak lebih jauh pastikan untuk membackup dulu template kalian, hal ini untuk berjaga-jaga kalau nanti gagal install, namun semoga tak terjadi hal-hal ang seperti ini, untuk sobat yang ingin tah cara membackup template sobat buka halaman Cara Upload Dan Backup Tamplate Blogspot yang sudah saya bagikan tutorial ini. langsung saja kita kepada topik pembahasan, untuk langkah-langkahnya sebagai berikut:
1. Login ke Blogger.
2. Seperi biasa kita menuju ke edit template.
3. kalau kalian sudah berada di edite template cari kode<body>
kalau sudah menemukan kode diatas silahkan tempatkan kode dibawah ini tepat diatasnya.
<style type='text/css'>
.error-page{background-color:#e1e1e1;position:fixed !important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;}
.error-page .error-404 {text-align: center; transition: all 0.8s ease 0s;color: #b0130d; font-size: 150px; font-weight: bold;margin-bottom:80px;margin-top:30px}
.error-page .error-404:hover {color: #ff0000;}
.error-page .large-heading1 {color: #0000ff;font-size: 70px;margin-top:10%;margin-bottom:80px}
.error-page .large-heading2 {color: #333;font-size: 48px;}
.error-page .light-heading1 {color: #000;font-size: 20px;}
.error-page .light-heading2 {color: #000;font-size: 15px;line-height:1.8em;}
.error-page #search-form {width:20%}
</style>
4. Kalau sudah kalian terapkan kode diatas tepat diatas kode <body> sekarang tempatkan kode dibawah ini tepat dibawahnya, ingat...!!! penaruhan kode harus sesuai tutorial.
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div class='large-heading1'>OOPS!</div>
<div class='error-404'>404</div>
<div class='large-heading2'>LAMAN TIDAK DITEMUKAN</div><br/>
<div class='light-heading1'>Mungkin halaman telah dihapus. Kami mohon maaf atas ketidaknyamanan ini.</div><br/>
<div class='light-heading2'>Silahkan kembali ke <b>Halaman Utama Blog</b>, Klik <a href='/' title='Homepage'><span style='background:#f1f1f1;border:1px solid #aaa;border-radius:3px;padding:2px 5px'><b>DI SINI</b></span></a> untuk kembali ke homepage.<br/>
Atau gunakan <b>Search Box</b> di bawah ini untuk kembali mencari artikel yang Anda inginkan.<a href='http://blog.kangmiftah.com'></a>
</div>
<form action='/search' id='searchform' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here ...'/>
<button class='search-button' title='Search' type='submit'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXo3a5rAPfSLiQm3-nKeUWf0R1V7x6mTtEmA9zj7VnPI71ATjb43WOY90Ju81OAxP9RmYt0wsrMUySZQGHDJmtsyGbz6_6LoUXUKmYK4kHhPx-slw156g0060xifVtM_5FoOvyT63Ejr59/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>
</b:if>
5. Sebelum kalian simpan alangkan baiknya pesan yang sudah saya but diatas kalian ganti dengan pesan yang kalian inginkan, kalau sudah kalian terapkan kodenya seperti yang sudah saya jelas sekarang kalian simpan dan lihat hasilnya, untuk mencobanya silahkan ketik url atau link sobat contonya seperti ini :
para url diatas aku buang huruf (L) dibelakangnya. nah silahkan lihat sendiri hasilnyahttp://url-kalian.blogspot.com/2014/01/judul-arikel-kalian.htmlhilangkan satu huruf url tersebut, contohnya:
http://url-kalian.blogspot.com/2014/01/judul-arikel-kalian.htm
Kalau kalian belum berhasil silahkan koreksi dulu dengan betul-betul. kemungkinan eror cara diatas 5%, jadi kalau sobat bingung silahkan tinggalkan komentar dibawah postingan. saya sakan cek template kalian.
itulah Cara Membuat Halaman Eror 404 Untuk Blogspot semoga artikel diatas bermafaat buat sobat blogger, silahkan mencoba semoga berhasil. silahkan rapikan sendiri kode warnanya, untuk melihat kode warna RGB atau HTML silahkan buka halaman Kode warna HTML
wah ada ada saja, halaman eror kok dibuat hehe
BalasHapus:d ukan dibuat namun untuk membuat pesan eror bos... salam kenal
Hapuskeren mas halaman errornya mirip gayanya template kompi males :) kalau yg disematkan di html template seperti tips di atas ini bisa awet dan selamanya gak hilang :)
BalasHapustapi kalau yg dipastekan di dasbor blogger (search preference) itu gak berlangsung lama, karena kali blogger melakukan diupdate maka halaman error yg telah kita buat dgn susah payah akan hilang lagi [-(
jadi solusinya adalah hrs menyimpan script diatas ke notepad, dan jika sewaktu-waktu halaman 404 itu dibuang oleh blogger maka kita bisa pastekan lagi script yang baru, hehehe :d
makasih sharingnya mas :)
ok mbak makasih kunjungannya,,, saya dapat info dari teman tadi siang,,, :-) kalao OM kompi sudah ada pasti aku gak lihat tutorial ini... :-s paling teman saya di adobsi dari OM kompi [-(
Hapus;( Om template eror Om,,, gara-gara emotikon
Hapus[-( iya nanti aku lihat ya,,, entar sore
Hapusmas templatenya di share ga mas? bagus templatenya, kalau di share kirimin ke dimastrisasongko32@gmail.com yaa ^_^ :)
Hapus