Cara Menambahkan Custom Halaman Error 404 Pada Blog - TRIK SIMPLE

Cara Menambahkan Custom Halaman Error 404 Pada Blog - Menambahkan halaman error 404 pada blogger itu perlu ya sob, tapi jangan sampai ada sedikit pun halaman error pada blog sobat pasti akan menimbulkan efek yang kurang bagus pada search engine Google tentunya.

Error 404 adalah halaman yang biasanya tampil jikalau link yang dibuka error maupun juga bisa salah ketik, saya ingat kan lagi coba sobat cek terlebih dahulu pada blog sobat ada ngggak yang broken link ( Link Rusak ).

Baca Juga : Cara Mengecek dan Mengatasi Broken Link pada Blog

Cara Menambahkan Custom Halaman Error 404 Pada Blog


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode </head>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
/* CSS Error 404 */
#oopss{background:#222;text-align:center;margin-bottom:50px;font-weight:400;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;left:0}#error-text{top:30%;position:relative;font-size:40px;color:#eee}#error-text a{color:#eee}#error-text a:hover{color:#fff}#error-text p{color:#eee;margin:70px 0 0}#error-text i{margin-left:10px}#error-text p.hmpg{margin:40px 0 0}#error-text span{position:relative;background:#ef4824;color:#fff;font-size:300%;padding:0 20px;border-radius:5px;font-weight:bolder;transition:all .5s;cursor:pointer;margin:0 0 40px}#error-text span:hover{background:#d7401f;color:#fff;-webkit-animation:jelly .5s;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s}#error-text span:after{top:100%;left:50%;border:solid transparent;content:'';height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-top-color:#ef4824;border-width:7px;margin-left:-7px}.back:active{-webkit-transform:scale(.95);-moz-transform:scale(.95);transform:scale(.95);background:#f53b3b;color:#fff}.back:hover{background:#4c4c4c;color:#fff}.back{text-decoration:none;background:#5b5a5a;color:#fff;padding:10px 20px;font-size:20px;font-weight:700;line-height:normal;text-transform:uppercase;border-radius:3px;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all .5s ease-out}@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}@keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}@media only screen and (max-width:640px){#error-text span{font-size:200%}#error-text a:hover{color:#fff}}
</style>
</b:if>

Kemudian tambahkan kode dibawah ini tepat diatas kode </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='oopss'>
<div id='error-text'>
<span>404</span>
<p>PAGE NOT FOUND</p>
<p class='hmpg'><a expr:href='data:blog.homepageUrl' class="back">Back To Home</a></p>
</div>
</div>
</b:if>

Jika sudah klik simpan pada template sobat.

Oke sekian yang bisa saya sampaikan tentang Cara Menambahkan Custom Halaman Error 404 Pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Menambahkan Custom Halaman Error 404 Pada Blog


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Cara Menambahkan Custom Halaman Error 404 Pada Blog - Menambahkan halaman error 404 pada blogger itu perlu ya sob, tapi jangan sampai ada sedikit pun halaman error pada blog sobat pasti akan menimbulkan efek yang kurang bagus pada search engine Google tentunya.

Error 404 adalah halaman yang biasanya tampil jikalau link yang dibuka error maupun juga bisa salah ketik, saya ingat kan lagi coba sobat cek terlebih dahulu pada blog sobat ada ngggak yang broken link ( Link Rusak ).

Baca Juga : Cara Mengecek dan Mengatasi Broken Link pada Blog

Cara Menambahkan Custom Halaman Error 404 Pada Blog


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode </head>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
/* CSS Error 404 */
#oopss{background:#222;text-align:center;margin-bottom:50px;font-weight:400;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;left:0}#error-text{top:30%;position:relative;font-size:40px;color:#eee}#error-text a{color:#eee}#error-text a:hover{color:#fff}#error-text p{color:#eee;margin:70px 0 0}#error-text i{margin-left:10px}#error-text p.hmpg{margin:40px 0 0}#error-text span{position:relative;background:#ef4824;color:#fff;font-size:300%;padding:0 20px;border-radius:5px;font-weight:bolder;transition:all .5s;cursor:pointer;margin:0 0 40px}#error-text span:hover{background:#d7401f;color:#fff;-webkit-animation:jelly .5s;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s}#error-text span:after{top:100%;left:50%;border:solid transparent;content:'';height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-top-color:#ef4824;border-width:7px;margin-left:-7px}.back:active{-webkit-transform:scale(.95);-moz-transform:scale(.95);transform:scale(.95);background:#f53b3b;color:#fff}.back:hover{background:#4c4c4c;color:#fff}.back{text-decoration:none;background:#5b5a5a;color:#fff;padding:10px 20px;font-size:20px;font-weight:700;line-height:normal;text-transform:uppercase;border-radius:3px;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all .5s ease-out}@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}@keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}@media only screen and (max-width:640px){#error-text span{font-size:200%}#error-text a:hover{color:#fff}}
</style>
</b:if>

Kemudian tambahkan kode dibawah ini tepat diatas kode </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='oopss'>
<div id='error-text'>
<span>404</span>
<p>PAGE NOT FOUND</p>
<p class='hmpg'><a expr:href='data:blog.homepageUrl' class="back">Back To Home</a></p>
</div>
</div>
</b:if>

Jika sudah klik simpan pada template sobat.

Oke sekian yang bisa saya sampaikan tentang Cara Menambahkan Custom Halaman Error 404 Pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subcribe

close