Cara Menciptakan Halaman Error Page 404 Keren Di Blog
Secara terang error 404 merupakan instruksi pada status HTTP yang mana setiap ada pengunjung suatu halaman website, maka koneksi data dari Komputer mereka akan meminta data dari Server memakai Hypertext Transfer Protocol (Kepanjangan HTTP). Sebelum data dikirim ke komputer, server akan mengirim beberapa HTTP Header. Header HTTP terdiri dari status kecil perihal sambungan atau alamat yang Anda minta. Jika ternyata halaman yang diminta tidak ada, kosong, atau path folder server tidak terdiri dari alamat yang Anda minta, maka akan kembali muncul instruksi status 404 yang berarti halaman tidak tersedia atau tidak Ditemukan.
Untuk kita para blogger, instruksi HTTP 404 ini sangat penting dan mesti Anda pasang di blog, hal ini bertujuan semoga pengunjung tidak kabur atau segera pergi meninggalkan blog Anda, karna ketika pengunjung menemukan instruksi page error ini, kita sanggup mengakalinya dengan memasang tombol kembali kehalaman utama, dengan begini visitor Anda tidak berkurang meskipun situs Anda mempunyai halaman error 404. Selain itu halaman page error yang menarik serta keren akan menciptakan pengunjung susah untuk pergi, dan maunya berlama-lama meskipun halaman kosong. Nah kali ini aku akan memperlihatkan tutorial cara menciptakan halaman page error 404 yang keren serta menarik di blogger. Cara pemasangannya pun sangat mudah, untuk lebih jelasnya silahkan simak ulasannya berikut ini.
Cara Memasang Halaman Error 404 di Blog
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Jika template blog Anda sudah mempunyai instruksi halaman page error sendiri sebelumnya maka silahkan Anda hapus terlebih dahulu.
4. Setelah itu cari kode ]]></b:skin> atau </style>
5. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style>
/* Page 404 Error by Lk21.news */ @import url(https://fonts.googleapis.com/css?family=opensans:500);body{background:#75d9f9;color:#fff;font-family:'Open Sans',sans-serif;max-height:700px}.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}}h2{font-size:50px;text-align:center;margin:12px 0 0 0;text-transform:uppercase;line-height:40px;}h3{margin:40px 0 8px;text-align:center;font-size:30px;font-weight:500;line-height:1.4;text-shadow:#627267}#buttonerror{clear:both;position:absolute;background-color:rgba(255,255,255,.05);color:#ec7e65;position:absolute;left:0;right:0;bottom:9%;margin:auto;max-width:400px;padding:20px;z-index:99999;border-radius:10px;border:5px solid #fff;transition:all .5s}#buttonerror a{color:#fff;font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:1px}#buttonerror:hover{background-color:rgba(255,255,255,1)}#buttonerror a:hover,#buttonerror:hover a{color:#ec7e65}.error-container{text-align:center;font-size:180px;font-family:Catamaran,sans-serif;font-weight:800;margin:20px 15px}.error-container>span{display:inline-block;line-height:.7;position:relative;color:#ffb485}.error-container>span{display:inline-block;position:relative;vertical-align:middle}.error-container>span:nth-of-type(1){color:#d1f2a5;animation:colordancing 4s infinite}.error-container>span:nth-of-type(3){color:#f56991;animation:colordancing2 4s infinite}.error-container>span:nth-of-type(2){width:120px;height:120px;border-radius:999px}.error-container>span:nth-of-type(2):after,.error-container>span:nth-of-type(2):before{border-radius:0;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:999px;box-shadow:inset 30px 0 0 rgba(209,242,165,.4),inset 0 30px 0 rgba(239,250,180,.4),inset -30px 0 0 rgba(255,196,140,.4),inset 0 -30px 0 rgba(245,105,145,.4);animation:shadowsdancing 4s infinite}.error-container>span:nth-of-type(2):before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.screen-reader-text{position:absolute;top:-9999em;left:-9999em}@keyframes shadowsdancing{0%{box-shadow:inset 30px 0 0 rgba(209,242,165,.4),inset 0 30px 0 rgba(239,250,180,.4),inset -30px 0 0 rgba(255,196,140,.4),inset 0 -30px 0 rgba(245,105,145,.4)}25%{box-shadow:inset 30px 0 0 rgba(245,105,145,.4),inset 0 30px 0 rgba(209,242,165,.4),inset -30px 0 0 rgba(239,250,180,.4),inset 0 -30px 0 rgba(255,196,140,.4)}50%{box-shadow:inset 30px 0 0 rgba(255,196,140,.4),inset 0 30px 0 rgba(245,105,145,.4),inset -30px 0 0 rgba(209,242,165,.4),inset 0 -30px 0 rgba(239,250,180,.4)}75%{box-shadow:inset 30px 0 0 rgba(239,250,180,.4),inset 0 30px 0 rgba(255,196,140,.4),inset -30px 0 0 rgba(245,105,145,.4),inset 0 -30px 0 rgba(209,242,165,.4)}100%{box-shadow:inset 30px 0 0 rgba(209,242,165,.4),inset 0 30px 0 rgba(239,250,180,.4),inset -30px 0 0 rgba(255,196,140,.4),inset 0 -30px 0 rgba(245,105,145,.4)}}@keyframes colordancing{0%{color:#d1f2a5}25%{color:#f56991}50%{color:#ffc48c}75%{color:#effab4}100%{color:#d1f2a5}}@keyframes colordancing2{0%{color:#ffc48c}25%{color:#effab4}50%{color:#d1f2a5}75%{color:#f56991}100%{color:#ffc48c}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}6. Setelah itu Copy Kode berikut ini dan Paste dibawah Kode <body>
<b:if cond='data:blog.pageType == "error_page"'> <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> <section class='error-container'> <span>4</span> <span><span class='screen-reader-text'>0</span></span> <span>4</span> </section> <h2>Laman Tidak di Temukan</h2> <h3 class='quote'>"Kami mohon maaf atas ketidaknyamanan ini"</h3> <div style='font-size:10em; color:#049372'> <center> <i class='fa fa-eye-slash float shadow'/></center> </div> <div id='buttonerror'> <a expr:href='data:blog.homepageUrl'>Back To Homepage</a></div> </b:if> Silahkan Anda ganti kata yang tindai warna kuning dengan kata yang Anda inginkan, dan silahkan kreasikan sesuai selera Anda.7. Terakhir Simpan atau Save templatenya
8. Untuk mengecek apakah instruksi diatas terpasang dengan benar atau tidak, Anda sanggup mengeceknya dengan memakai url error situs Anda.
Nah itulah langkah singkat menciptakan halaman error 404 di blogger, yang mana dengan begini pengunjung Anda tidak akan kabur dengan mudahnya, selain itu instruksi page error 404 diatas mempunyai tampilan yang anggun dengan pemberian animasi langit, awan, serta awesome yang manarik. Sekian dulu dari artikel kali ini kalau ada yang ingin Anda tanyakan atau ingin tidak paham silahkan komentar dibawah ini terima kasih.
