√ Cara Membuat Halaman Error 404 Diblogger Jadi Keren
Secara default, piha Blogger sudah support atau mendukung adanya Custom Error 404 Page Not Found ini (sebagai halaman yang tidak ditemukan). Pada umumnya, halaman eror ini memiliki tampilan yang kurang menarik.
Halaman eror 404 ini pun masih bisa kita edit dengan berbagai rupa. Agar para pengunjung merasa terkesan dengan desain blog kamu.
Maka dari itu saya ingin berbagi sedikit tips menganai cara mempercantik halaman ini. Cara ini sebenarnya sudah menjadi ciri khas bagi sebuah blog atau web.
Tapi kalau blog kamu memiliki tampilan yang kurang menarik, kamu bisa coba cara yang satu ini. Cara ini menggunaka beberapa baris kode HTML yang akan di taruh ke dalam laman blog kamu. Untuk caranya kamu bisa ikutin langkah-langkah dibawah ini.
Cara Mempercantik Tampilan Halaman Error 404 Page Not Found Diblog
1. Masuk ke Daskbord blogger kamu.
2. Masuk ke menu Theme --> Edit HTML.
3. Kemudian cari kode dengan tag </head> (gunakan Ctrl + F untuk memudahkan dalam pencarian).
<b:if cond="data:view.isError"><style> /*Error Page ===============================*/ .cloud{width:350px;height:120px;background:#fff;background:linear-gradient(top,#fff 100%);background:-webkit-linear-gradient(top,#fff 100%);background:-moz-linear-gradient(top,#fff 100%);background:-ms-linear-gradient(top,#fff 100%);background:-o-linear-gradient(top,#fff 100%);border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;position:absolute;margin:120px auto 20px;z-index:-1;transition:ease 1s} .cloud:after,.cloud:before{content:'';position:absolute;background:#fff;z-index:-1} .cloud:after{width:100px;height:100px;top:-50px;left:50px;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px} .cloud:before{width:180px;height:180px;top:-90px;right:50px;border-radius:200px;-webkit-border-radius:200px;-moz-border-radius:200px} .x1{top:-50px;left:100px;-webkit-transform:scale(.3);-moz-transform:scale(.3);transform:scale(.3);opacity:.9;-webkit-animation:moveclouds 15s linear infinite;-moz-animation:moveclouds 15s linear infinite;-o-animation:moveclouds 15s linear infinite} .x1_5{top:-80px;left:250px;-webkit-transform:scale(.3);-moz-transform:scale(.3);transform:scale(.3);-webkit-animation:moveclouds 17s linear infinite;-moz-animation:moveclouds 17s linear infinite;-o-animation:moveclouds 17s linear infinite} .x2{left:250px;top:30px;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);opacity:.6;-webkit-animation:moveclouds 25s linear infinite;-moz-animation:moveclouds 25s linear infinite;-o-animation:moveclouds 25s linear infinite} .x3{left:250px;bottom:-70px;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);opacity:.8;-webkit-animation:moveclouds 25s linear infinite;-moz-animation:moveclouds 25s linear infinite;-o-animation:moveclouds 25s linear infinite} .x4{left:470px;botttom:20px;-webkit-transform:scale(.75);-moz-transform:scale(.75);transform:scale(.75);opacity:.75;-webkit-animation:moveclouds 18s linear infinite;-moz-animation:moveclouds 18s linear infinite;-o-animation:moveclouds 18s linear infinite} .x5{left:200px;top:300px;-webkit-transform:scale(.5);-moz-transform:scale(.5);transform:scale(.5);opacity:.8;-webkit-animation:moveclouds 20s linear infinite;-moz-animation:moveclouds 20s linear infinite;-o-animation:moveclouds 20s linear infinite} @-webkit-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}} @-moz-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}} @-o-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}} @import url('https://fonts.googleapis.com/css?family=Ruda:400,700'); #header, #outer-wrapper, #post-wrapper, #sidebar-wrapper, #content-wrapper, #footer-wrapper, #wrapper, .ignielToTop {display:none} body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh} body {background:#fff; color:#1d2129} #igniel404 {background:#eceeee; text-align:center; margin:auto; font-weight:700; font-size:45px; font-family:'Ruda',sans-serif; position:fixed; width:100%; height:100%; line-height:1.25em; z-index:9999;} #igniel404 #error-text {position:relative; font-size:40px; color:#666; top:50%; right:50%; transform:translate(50%,-50%);} #igniel404 #error-text a {color:#888; text-decoration:none} #igniel404 #error-text p {margin:
0!important; letter-spacing:.5px;} #igniel404 #error-text span { color: rgba(0,0,0,.9); font-size: 100px; } #igniel404 #error-text a.back { background: #212529; color: #fff; padding: 10px 20px; font-size: 20px; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); transition: all 0.5s ease-out; } #igniel404 #error-text a.back:hover { background: #424242; color: #fff; } #igniel404 #error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#333;color:#fff;border:double #eceeee;} #igniel404 #error-text #copyright {font-size:16px} #igniel404 #error-text #copyright a { color: #000000; } @media only screen and (max-width:640px){ #igniel404 #error-text {font-size:20px;} #igniel404 #error-text span {font-size:60px;} #igniel404 #error-text a.back {padding:5px 10px;font-size:15px;} } </style></b:if><b:if cond="data:view.isError">
<div id="igniel404">
<div id="clouds">
<div class="cloud x1">
<div class="cloud x1_5">
<div class="cloud x2">
<div class="cloud x3">
<div class="cloud x4">
<div class="cloud x5">
</div>
<div id="error-text">
<span>404</span>
<p>HALAMAN TIDAK DITEMUKAN!</p>
<p><a class="back" expr:title="data:blog.title" href="/">Kembali Ke Halaman Awal</a></p>
<div id="copyright">
<a expr:title="data:blog.title" href="/"><data:blog .title=""></data:blog></a> © 2017 - <script>document.write(new Date().getFullYear())</script>. All Rights Reserved
</div>
</div>
</div>
</div></div></div></div></div></div></b:if>Kamu bisa ganti tulisan ditandai tebal dan bergaris sesuai dengan teks yang ingin kamu tampilkan!
Untuk hasil atau demonya, kamu bisa klik tombol dibawah ini. Atau jika ingin lihat diblog kamu sendiri, coba tempel link ini pada blog kamu.
Ganti tulisan bergaris dengan url blog kamu sendiri!