Hello sobat IcloudZer kali ini admin akan memberikan informasi mengenai bagaiamana caranya membuat Halaman Error 404 Tampilan keren dan pastinya responsif di blogger, admin membagikan artikel ini karena tampilan dari halaman Error 404 kali ini benar-benar keren
Info: Oke jika kamunya sudah penasaran yuk langsung aja kita bahas bersama sama okay
Halaman Error
Halaman Error diblogger atau lebih dikenal dengan Halaman Error 404, yang mana halaman Erroe 404 berfungsi untuk menampilkan suatu informasi Error ketika pengguna salah dalam memasuki suatu halaman post diblogger
Info: Dalam kata lain jika halaman yang pengguna kunjungi tidak ditemukan maka Halaman Error 404 ini akan muncul
Halaman Error Default
Sebenarnya sih pada setiap template itu telah disediakan halaman Error 404, jadi untuk tampilan halaman Error 404 pada setiap template itu berbeda beda ya sobat
Info: So jika kamu ingin memasang halaman Error 404 Costum diblogger, kamu bisa menghapus kode HTML default dari Halaman Error 404nya okay
Cara Pembuatan
Baiklah sobat saatnya sekarang admin akan menjelaskan bagaiamana caranya membuat halaman Error 404, perhatikan setiap langkah yang admin berikan untuk memahaminya dengan benar okay
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian letakkan diatas kode </head>
<style type='text/css'>
#outer-wrapper {display:none;}
#rah-error404{background:#f80000}#rah-error-text a{color:#fefefe}
#rah-error404 {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;}
#rah-error-text {top:30%;position:relative;font-size:20px;color:#eee;}
#rah-error-text a{background:#fff; padding: 10px; border-radius: 5px;}
#rah-error-text a:hover{color:#eee;}
#rah-error-text p {color:#eee;margin:50px 0 0 0;}
#rah-error-text span {position:relative;color:#fff;font-size:450%;padding:0 20px;border-radius:5px;font-weight:700;letter-spacing:3px;transition:all .5s}
#rah-error-text span:hover {color:#fff;-webkit-animation:jelly .5s;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s;}
@-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){
#rah-error-text span {font-size:200%;}
#rah-error-text a:hover {color:#fff;}}
</style>Sebagai informasi: Kode CSS diatas berfungsi untuk membuat tampilan dari halaman Error 404nya okay
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML berikut ini kemudian letakkan tepat dibawah kode </body>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='rah-error404'>
<div id='rah-error-text'>
<span>(404) Page Not Found</span>
<p><a class='back' href='/'><i class='fa fa-home'/> HOME</a>
</p>
<br/>
<div id='mscontent'/>
</div>
</div>
</b:if>
<div class='clear'/>Sebagai informasi: Kode HTML Diatas berfungsi untuk menampilkan halaman Error 404 nya
Kode Javascript
Langkah selanjutnya adalah menyalin lagi kode javascript dibawah ini, kemudian kamu bisa meletakkan nya diatas atau sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
// Don't remove for Using this fitur
$(document).ready(function(){$('#mscontent').attr('style','display: inline-block !important;visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 13px!important; color: #fefefe!important').html('Created with <i style="color:#fefefe;-webkit-animation: icloudiceRing 5s 0s ease-in-out infinite; -webkit-transform-origin: 50% 4px; -moz-animation: icloudiceRing 6s 0s ease-in-out infinite; -moz-transform-origin: 50% 4px; animation: icloudiceRing 6s 0s ease-in-out infinite; transform-origin: 50% 4px;" class="fa fa-heart"></i> by <a href="https://icloudice.com" style="visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 13px!important; color: #333!important;font-weight: 500!important;">Icloudice</a>');setInterval(function(){if(!$('#mscontent:visible').length)window.location.href='https://icloudice.com'},3000)});
// Code not running if you remove the code
//]]>
</script>Sebagai informasi: Kode javascript diatas untuk menyetabilkan performa halaman Error 404nya okay
Contoh Tampilan
Nah biar pada nggak penasaran, admin juga memberikan contoh tampilan dari halaman Error 404nya, contoh tampilan kamu bisa mengklik tombol dibawah okay
Info: Bagaiamana sobat IcloudZer dengan tampilan dari halaman Error 404nya keren bukan
Penjelasan Lanjutan
Okay sobat jika kamu sudah mengikuti langkah langkah diatas, maksudnya menyalin dan meletakkan kode dari Halaman Error 404nya, kemudian ketika kamu jalankan tidak tampil kamu bisa melakukan hal hal dibawah ini
- Hapus kode HTML default dari Error 404
- Jika tidak tampil juga kamu bisa menghapus seluruh kode default dari halaman Error 404, mulai dari CSS, HTML, dan sebagainya
- Untuk melihat tampilan Error nya kamu bisa menggunakan link seperti berikut ini
https://blogkamu.com/p/icloudiceInfo: Kamu bisa mengubah saja alamat blog kamu tersebut