<>

19 December 2012

Cara Membuat tampilan 404 error



Error 404 Halaman Tidak Ditemukan atau Kesalahanyang dihasilkan oleh Blogger saat pengguna memasukkan URL yang tidak benar atau Error 404 adalah kode status HTTP yang berarti halaman Anda yang dicari di Blog Anda tidak bisa ditemukan atau Halaman tidak ada di Server.

menampilkan pesan Error halaman dalam kotak 


Only Custom Message [No Style]

If you want to show only a custom message then First Go to updated Blogger Interface
Then Go to Setting->Search Preferences
Error 404 Images

If you want Colorful Stylish  404 page do the following.
  • Go to Design->Edit HTML
  • Find </head> and copy the below code just above it.
<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%}.status-msg-border{display:none}.status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto}.status-msg-wrap a{padding:none;text-decoration:inherit}</style>
</b:if>
  • Save the Template 
Error Page Style 1 

Custom 404 error page for blogger 1

  •  Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieyj8wkcm7ath9wdU_N67lvKseyu1oJkkGTfpHAicZsNr7qo7VCrMzSv_gbmZpaJmtzCjWdaCq2z8WYt6FjajZ-fJi-Lm7W-k2_6ojr2mZFVtKWwZJ4vBqinSa6rnf4A6J2cYuuHP01e8/s1600/404+error+page+1.jpg"/>
Error Page Style 2

Blogger custom Error page
  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YGZvWytSZiZPoqco18NFZFSVuZuTGb2uSMr5z4judvlVJ0lD9EPbmGGXPZ9wXeTtQI34wS2P-3rYy9Cz3ixhNmg_kFjfNjRX2YQUx88b1AansO-pCdWMFYoMxhEUU7_2XNewfNRzheY/s1600/404+error+page+2.jpg"/>
Error Page Style 3


  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUa9vT3NtBMAYg1Oj9FoucFd2Kw1tO3Hwt-6JoTOrJNyG1-0OIv3i-F0InbTMrMJ_bRbcQCXEVxLM_Bd21iKlN7jq2CSBlRYAEOB9L2_Lx7nUqSFwIDrhGVjvPHMMFtOAYw15bWXRA08A/s1600/404+error+page+4.jpg"/>

Error Page Style 4

blogger custom 404 error page
  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi97qUAPdkcKyUW1jEWxhHhw0rg6iPKqP_GVjnganH6fOH2_WxWQ_KK81V7Kw0ywOerBeMYrrqbVbNJz3ugT4oPzcBKmzpOMoXP68x92Kt-S6GLwCBe4Bwk1XQ7RYjzUFXJ-CHvyYjiVeU/s320/404+error+page+6.jpg"/>

Error Page Style 5


  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJYHtTc60iaCTDYYXQT9R970qIBnIFUereBwWQ-gsh2drTqnvcUjWap2DiY-ZAvrMuQ1ZCRFhb9hij_f2-a809_nvBld06OCIhjNBbBGyE1RAcgrLymodQeIxNF9KFxGQIeUTgXOF1870/s1600/404+error+page+7.jpg"/>

Error Page Style 6


  • Go to Setting->Search Preferences
  • Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNd6SevcJFPCDvhtJ1YDsM7iXfIslI-zhyphenhyphenl80zmxb5UE8zNgYWLEYcJZ2qr0hIWDc4AY-juJ4_ofbmD-5JPHw8J97ndwKInnIuMkMJpQqEjmAAzUhXdfLY_1TcEESgdwxVfLtX5hfWIbc/s1600/404+error+page+3.jpg"/>

Dan klik Simpan 

No comments :

Post a Comment