Cara Membuat Halaman Error 404 Page Not Found Pada Blog

Error 404 Page Not Found

Cara Membuat Halaman Error 404 Page Not Found Pada Blog - Berjumpa lagi dengan abang yang ganteng ini  Nah pada kali ini abang mo ngebahas Cara Membuat Halaman Error nih tentunya dengan model yang keren dong.   Ditunggu sampe loadingnya selesai yaa.. Gimana keren kan?  Tertarik? jom langsung saja kita ke tutorialnya cekidott..

1. Kaya biasanya Pertama kita Masuk ke Blogger 

2. Lalu Pilih Template > Edit HTML

3. Cari kode </head> (Gunakan CTRL + F untuk memudahkan pencarian) dan Letakkan tepat diatas kode </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>     <title><data:blog.pageTitle/></title> <b:else/>     <b:if cond='data:blog.pageType == &quot;error_page&quot;'>         <title>404: Page Not Found ~ <data:blog.title/></title>     <b:else/>         <title><data:blog.pageName/> ~ <data:blog.title/></title>     </b:if> </b:if>

4. Cari kode ]]></b:skin> / </style> Lalu letakkan kode dibawah ini tepat diatasnya

/*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:&quot; &quot;; 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=&quot;text&quot;]{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/AVvXsEjxlE5DKSTPTKBha9Yl7vPXsgWUKbebaQbpsxA_2vX25EnJ2UU6sQsHuvF4QpfLwe9mkUlSYpIMIA0ud7DmHOllzCwzeYhaAgyBbaAMPK1PaWcDyPtzznpGu61FBV86NqtYuuuSXploRuY/s200/search-c.png) no-repeat;cursor:pointer} #error-inner p { line-height:0.7em; font-size:15px; }

5. Langkah terakhir, Cari kode </body> Letakkan kode dibawah ini tepat diatasnya

 <b:if cond='data:blog.pageType == &quot;error_page&quot;'>         <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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari di sini ...'/>             <button id='search-button' type='submit'/>           </form>         </div>           </div>         </div>     </b:if>

6. Klik Simpan Template dan Lihat Perubahannya! Jika ingin mengetes Tutorialnya berhasil atau tidak silahkan cek > https://URL Blog Soobat/error404 

Gimana ? keren bukan hasilnya?  Sekian, dulu artikel tentang Cara Membuat Halaman Error 404 Page Not Found Pada Blog Nantikan artikel keren lainnya! see u next post! 

Tweet