Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menciptakan Halaman Error Page 404 Keren Di Blog

Browsing menjadi salah satu aktfifitas yang paling banyak digemari oleh masyarakat hampir  Cara Membuat Halaman Error Page 404 Keren di Blog
Browsing menjadi salah satu aktfifitas yang paling banyak digemari oleh masyarakat hampir diseluruh dunia, ibarat yang telah kita ketahui internet menjadi ladang ilmu serta hiburan yang cukup mengasyikan, maka tidak heran apabila banyak orang betah berlama-lama berselancar di internet. Nah untuk kita yang sering berselancar di internet niscaya kita sering menemukan kode-kode HTTP yang salah satunya ialah 404 Page Not Found'. Error 404 “Page not found” yaitu halaman error yang ditampilkan setiap kali seseorang atau pengunjung website meminta halaman yang tidak tersedia di suatu situs. Alasannya sanggup saja ada link di situs itu yang salah atau halaman tersebut mungkin telah baru-baru ini dihapus dari situs, Sehingga tidak ada halaman Web yang sanggup ditampilkan. 

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 == &quot;error_page&quot;'> <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'>&quot;Kami mohon maaf atas ketidaknyamanan ini&quot;</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.