Cara Membuat Halaman tidak ditemukan atau 404 Not Found di Blog - Kali ini saya akan membahas tentang bagaimana Cara Membuat Halaman tidak ditemukan atau 404 Not Found di Blog. maksudnya adalah jika kita mencari pencarian di suatu blog dan jika tidak ditemukan maka akan ada peringatan 404 Not Found, dan halaman itu bisa kita desain sesuai selera kita sendiri. Halaman 404 Not Found ini berfungsi untuk menampilkan suatu halaman yang tidak ada hasil pencariannya. berikut ini langkah-langkah pembuatannya :
1. Masuk Ke Akun Blog Anda
2. Lalu Cari Kode <head>
3. Letakan Kode Dibawah Ini Dibawah Kode <head>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Page Not Found ~ <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
</b:if>
4. Lalu masukkan kode CSS berikut diatas kode ]]></b:skin> atau </style>
4. Lalu masukkan kode CSS berikut diatas kode ]]></b:skin> atau </style>
/*Desain Halaman 404 Error Not Found ----------------------------------------------- */ #error-page { background-color:#e9e9e9; position:fixed !important; position:absolute; text-align:center; top:0; right:0; bottom:0; left:0; z-index:99999; } #error-inner { margin:11% auto; } #error-inner .box-404 { width:200px; height:200px; background:#21afa4; color:#fff; font-size:80px; line-height:200px; border-radius:10px; margin:0 auto 50px; position:relative; } #error-inner .box-404::after { content:" "; width:0; height:0; bottom:-8px; border-color:#21afa4 transparent transparent; border-style:solid; border-width:9px 9px 0; position:absolute; left:47%; } #error-inner h1 { text-transform:uppercase; } #search-box{position:relative;width:350px;margin:10px auto} #cse-search-box{height:30px;border-radius:2px;background-color:#fff;overflow:hidden;border:1px solid #bbb} #search-text{font-size:12px;color:#ddd;border-width:0;background:transparent} #search-box input[type="text"]{width:85%;padding:5px 20px 12px 0;color:#666;outline:none} #search-button{position:absolute;top:0;right:0;height:32px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgryLX5Ol_TguDJjEIEy46iqygqGcZrSxIGFgBnxwiUNpX-sHA-FIiG1RDkeT7DiSEu14vZoffo46nV9eaP754eo-5qSelEWu0B2Yf0NdYciegzMhi8i1HWxucIhhugUDFtRgZZ5ncs2YI/s200/search-c.png) no-repeat;cursor:pointer} #error-inner p { line-height:0.7em; font-size:15px; }
5. Masukan Kembali Kode Dibawah Ini Diatas </body>
<b:if cond='data:blog.pageType == "error_page"'> <div id='error-page'> <div id='error-inner'> <div class='box-404'>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 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'/> </form> </div> </div> </div> </b:if>
dan jika Selesai silahkan anda simpan dan coba lihat hasilnya. Demikian tips dan trik yang dapat saya sampaikan semoga bermanfaat bagi kalian semua.
Post A Comment:
0 comments so far,add yours