http://nama-blog-anda.blogspot.com/tes-halaman-error-404-blog.htmlGanti nama-blog-anda dengan sub domain blogger anda dan lihat apakah halaman error 404 anda muncul dan berfungsi atau tidak. jika yang muncul hanya halaman kosong dan sidebar blog anda berarti halaman error 404 yang anda buat tidak berjalan. dan ini percuma anda terapkan di blog anda walaupun anda telah mendesain halaman tersebut dengan tampilan sebagus mungkin. kali ini saya akan berbagi cara membuat halaman error 404 untuk blogger dengan kotak pencarian lihat demonya di bawah ini
Demo halaman yang anda lihat adalah hasil dari tag kondisional untuk halaman kesalahan/error page. Berikut ini adalah cara paling sederhana untuk membuatnya
Contoh tag conditional yang akan digunakan:
<body>
<b:if cond='data:blog.pageType != "error_page"'>
...
...
Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.
Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.
...
...
</b:if>
Dibawah ini adalah pesan error yang akan muncul ketika permintaan tidak di temukan
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<h1>Desain error 404 yang diterapkan.</h1>
</div>
</b:if>
</body>Pertama cari tag kode <body> dan penutup </body> di template anda, lalu sisipkan kode tag conditional berikut di antaranya, lihat cara seperti di bawah ini
Pastekan kode di bawah ini di bawah kode tag <body>
<b:if cond='data:blog.pageType != "error_page"'>Kemudian cari kode tag </body> dan patekan kode berikut di atasnya
</b:if>
lalu letakkan kode berikut ini di atas kode tag </body>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='DB-error-page'>
<h1>404 Halaman/Posting tidak ditemukan!</h1><br/>
<p>Mungkin Halaman/Posting yang anda tuju telah di hapus dalam blog ini, silahkan gunakan kotak penelusuran di bwah ini</p><br/>
<div class='kotak-pencarian-404'>
<div id='searchbox'>
<form action='/search' id='searchthis' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text' value='Cari disini...'/>
<input class='button-cari' type='submit' value='Cari'/>
</div>
</form>
</div>
</div><br/>
<a href='/'>Kembali ke Homepage</a>
</div>
</b:if>Maka jika benar, semua akan tampak demikian:
<body>
<b:if cond='data:blog.pageType != "error_page"'>
...
...
Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.
Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.
...
...
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-db'>
<div id='error-db-suit'>
<div class='box-404-db'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
</div>
</div>
</b:if>
</body>Selanjutnya, ubah tag tittle menjadi seperti berikut
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Laman Tidak Ditemukan - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
</b:if>Setelah semua yang di atas selesai, kini tambahkan css berikut ke template anda dan simpan.
/* error page */
#error-db {background-color:#e9e9e9;position:fixed !important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;}
#error-db-suit {margin:11% auto;}
#error-db-suit .box-404-db {width:200px;height:200px;background:#1966C1;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative;}
#error-db-suit .box-404-db::after {content:" ";width:0;height:0;bottom:-8px;border-color:#1966C1 transparent transparent;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%;}
#error-db-suit h1 {text-transform:uppercase;}
#error-db-suit p {line-height:0.7em;font-size:15px;}
Silahkan anda ganti tulisan diantara tag <h1> dan <p> dengan tulisan yang anda ingin.
Semoga berguna dan berhasil.....
20 komentar
thanks tutorialnya bro
BalasHapussama* sob, smoga brguna..
HapusMantap Gan Tutorialnya
BalasHapusKunBalnya Ya gan
http://www.oreshack.net
semga berguna gan, oke d tunggu...
HapusMakasih gam ,
BalasHapussama sama gan
HapusWah mantap Def :)
BalasHapusKunjungi balik yah :) www.fajriandaviar.blogspot.com
Tmbh kinclong
Hapussip saya coba dulu mas :)
BalasHapusSmoga sukses sob
HapusBerhasil gan, trims banget tutorialnya..
BalasHapusDitunggu juga kunbalnya hehehe :D
http://ourteamnara.blogspot.com/
Tnggu saja gan, tank udh berkunjung :)
Hapussudah saya kirim lagi mas daffin.
BalasHapusterima kasih tipsnya min :) aijp bener :-d
BalasHapussama sama sob :)
Hapusthx gan, ditunggu kunbalnya di blog newbie yg dibawah ini :-d
BalasHapushttp://clickandskip.blogspot.com
oh ya, buat tambah gambar gimana ya? punya saya g ada gambar 404 error nya :'(
Hapusdi tunggu aja sob :).
Hapusuntuk menmbah gambar bisa di tambahkan seperti ini
<img alt='error' src='link gambar'/>
tambahkan di dalam markup html error page jangan lupa ganti src='link gambar' dengan link upload gambar anda sob semoga sukses
udah di edit sedemikian rupa :p
Hapusbuat seperti ini <div id='error-page'>
Hapus<div id='error-inner'>
<div class='box-404'>404</div>
<img src='link-gambar' alt='error'/>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a href='http://clickandskip.blogspot.com/'>Click and Skip</a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get'>
<input id='search-text' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Cari di sini ...'/>
<button id='search-button' type='submit'></button>
</form>
</div>
</div>
</div>
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>