Cara Membuat Halaman 404 Keren di Blog

Hallo selamat datang di Imam DevBlogs. Pada Artikel yang anda baca kali ini berjudul Cara Membuat Halaman 404 Keren di Blog, telah dipersiapkan dengan baik agar Anda dapat membaca dan menerima informasi yang terdapat pada artikel ini. mudah-mudahan konten Artikel Tutorial, yang kami tulis ini dapat Anda pahami. Oke, selamat membaca.

Cara Membuat dan Mempercantik Tampilan Halaman Error 404 Page Not Found Keren di Blogspot Menggunakan Pure CSS dan Icon SVG Halaman eror 404 atau biasa di sebut dengan ERROR 404 PAGE NOT FOUND oleh kalangan blogger adalah sebuah halaman yang berisi informasi atau pemberitahuan kepada user atau pengunjung bahwa halaman yang ingin mereka akses tidak tersedia.

Halaman error 404 page not found ini juga sering terjadi di berbagai halaman web atau blog. Saya yakin kamu juga pasti pernah melihat tampilan halaman seperti ini, kan? Alasan halaman error 404 page not found biasa terjadi dan muncul karena beberapa sebab yang berbedabeda.

Halaman error 404 page not found ini biasanya di sebabkan karena halaman website yang akan di akses sudah tidak tersedia dan itu juga ada beberapa jenis.

Halaman telah dihapus dan dipindahkan ke halaman lain dan mungkin tidak dapat digunakan karena perubahan permalink atau domain. Mengubah permalink atau domain adalah salah satu alasan paling umum.

404 halaman tidak ditemukan error tahukah Anda bahwa tampilan atau desain halaman Anda dapat dirancang dan dapat kita buat sendiri sesuai keinginan? Pada dasarnya, jika Anda menggunakan template eksternal gratis dan berbayar (pengembang selain template blogger default), Anda memiliki tampilan dan nuansa unik untuk halaman kesalahan 404 Not Found ini.

Namun, terkadang kami secara pribadi tidak menyukai atau tidak setuju dengan desain tampilan khusus untuk halaman 404 Not Found ini. Mungkin karena tampilan atau desain yang ketinggalan jaman, tidak menarik atau tidak responsif.

Pada artikel ini, kita akan  membuat  desain khusus yang akan mengubah tampilan halaman kesalahan 404 tidak ditemukan di  blogspot. Tidak ditemukan desain halaman dengan halaman kesalahan 

404. Gunakan ikon CSS dan SVG untuk membuat ikon Anda lebih menarik dan elegan (agar tidak memengaruhi pemuatan blog Anda).

Sebelum melanjutkan tutorial di bawah ini, pastikan bahwa semua kode CSS, HTML, dan JavaScript kustom sebelumnya (jika ada) telah dihapus dari template. Karena jika tidak,  hasilnya jelas kontradiktif dan kontradiktif.

Cara Membuat Halaman 404 Keren di Blog
Gambar oleh: imamdeveloper.my.id

Cara Membuat dan Mempercantik Tampilan Halaman Error 404 Page Not Found (Custom) Keren di Blogger dengan CSS 

1. Masuk ke dashboard blogger kamu 

2. Masuk ke menu Theme ➤ Edit HTML 

3. Kemudian cari tag penutup </head> 

lalu tambahkan CSS error 404 page not found custom dibawah ini sebelum atau diatas tag penutup </head> 

<style> 

 :root{ 

 --button-bg: #652f8f; 

 --button-bg: #652f8f; 

 --button-bg2: #652f8f; 

 --button-color: #ffffff; 

 --hover-button-bg: #652f8f; 

 --hover-button-color: #ffffff; 

 --mobile-color: #652f8f; 

 --mobile-bg: #ffffff; 

 --button-bg2: #652f8f; 

 } 

 .error404 #main-wrapper{width:100%} 

 .error404 #sidebar-wrapper{display:none} 

 .errorWrap{color:#

44;text-align:center;padding:60px 0;width:50%;margin:0 auto;} 

 .errorWrap h3{font-size:160px;line-height:1em;margin:0 0 20px} 

 .errorWrap h4{font-size:25px;margin:0 0 20px} 

 .errorWrap p{margin:0 0 10px} 

 .errorWrap a{display:inline-block;height:32px;background-color:var(--button-bg);font-size:15px;color:var(--button-color);font-weight:700;line-height:32px;padding:0 20px;margin:15px 0 0;border-radius:2px} 

 .errorWrap a:hover{background-color:var(--hover-button-bg);color:var(--hover-button-color)} 

 .wheel{animation:wheel-rotate 6s ease infinite;transform-origin:center;transform-box:fill-box} 

 @keyframes wheel-rotate{50%{transform:rotate(360deg);animation-timing-function:cubic-bezier(0.55,0.085,0.68,0.53)}100%{transform:rotate(960deg)}} 

 .clock-hand-1{animation:clock-rotate 3s linear infinite;transform-origin:bottom;transform-box:fill-box} 

 .clock-hand-2{animation:clock-rotate 6s linear infinite;transform-origin:bottom;transform-box:fill-box} 

 @keyframes clock-rotate{100%{transform:rotate(360deg)}} 

 #box-top{animation:box-top-anim 2s linear infinite;transform-origin:right top;transform-box:fill-box} 

 @keyframes box-top-anim{50%{transform:rotate(-5deg)}} 

 #umbrella{animation:umbrella-anim 6s linear infinite;transform-origin:center;transform-box:fill-box} 

 @keyframes umbrella-anim{25%{transform:translateY(10px) rotate(5deg)}75%{transform:rotate(-5deg)}} 

 #cup{animation:cup-rotate 3s cubic-bezier(0.455,0.03,0.515,0.955) infinite;transform-origin:top left;transform-box:fill-box} 

 @keyframes cup-rotate{50%{transform:rotate(-5deg)}} 

 #pillow{animation:pillow-anim 3s linear infinite;transform-origin:center;transform-box:fill-box} 

 @keyframes pillow-anim{25%{transform:rotate(10deg) translateY(5px)}75%{transform:rotate(-10deg)}} 

 #stripe{animation:stripe-anim 3s linear infinite;transform-origin:center;transform-box:fill-box} 

 @keyframes stripe-anim{25%{transform:translate(10px,0) rotate(-10deg)}75%{transform:translateX(10px)}} 

 #bike{animation:bike-anim 6s ease infinite} 

 @keyframes bike-anim{0%{transform:translateX(-1300px)}50%{transform:translateX(0);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715)}100%{transform:translateX(1300px)}} 

 #rucksack{animation:ruck-anim 3s linear infinite;transform-origin:top;transform-box:fill-box} 

 @keyframes ruck-anim{50%{transform:rotate(5deg)}} 

 .error_page .circle{animation:circle-anim ease infinite;transform-origin:center;transform-box:fill-box;perspective:0} 

 .error_page .circle.c1{animation-duration:2s} 

 .error_page .circle.c2{animation-duration:3s} 

 .error_page .circle.c3{animation-duration:1s} 

 .error_page .circle.c4{animation-duration:1s} 

 .error_page .circle.c5{animation-duration:2s} 

 .error_page .circle.c6{animation-duration:3s} 

 @keyframes circle-anim{50%{transform:scale(.2) rotateX(360deg) rotateY(360deg)}} 

 .four,#ou{animation:four-anim cubic-bezier(0.39,0.575,0.565,1) infinite} 

 .four.a{transform-origin:bottom left;animation-duration:3s;transform-box:fill-box} 

 .four.b{transform-origin:bottom right;animation-duration:3s;transform-box:fill-box} 

 #ou{animation-duration:6s;transform-origin:center;transform-box:fill-box} 

 .cls-1{fill:#ffc541} 

 .cls-8.wheel,.cls-2{fill:var(--button-bg2)} 

 .cls-3{fill:var(--button-bg)} 

 .cls-4{fill:#f78d5e} 

 .cls-5{fill:#fa976c} 

 .cls-6,.cls-7,.cls-8{fill:#b65c32} 

 .cls-10,.cls-6{opacity:0.6} 

 .cls-7{opacity:0.4} 

 .cls-9{fill:#f4b73b} 

 .cls-11{fill:#f9c358} 

 .cls-12{fill:#9b462c} 

 .cls-13{fill:#aa512e} 

 .cls-14{fill:#7d6aa5} 

 @media screen and (max-width: 380px) { 

 .errorWrap h3{font-size:130px} 

 } 

 </style> 

4. Jangan lupa tambahkan juga HTML 

dibawah ini sebelum tag penutup </body> atau setelah tag <body> juga boleh 

 <svg viewBox='0 0 1920 1080' xmlns='http://www.w3.org/2000/svg'> 

 <title>404</title> 

 </svg>

Nah, itu dia tutorial cara membuat atau mempercantik desain tampilan halaman error 404 page not found di blogger menggunakan CSS dan ikon SVG. Bagaimana menurut anda? Ini keren seperti yang terlihat di blog lain, bukan? Kami ingin membantu dan membantu mereka yang membutuhkan. Jika Anda mendapatkan kesalahan saat menginstal kode di atas, tanyakan  di bagian komentar.


Demikianlah Artikel Cara Membuat Halaman 404 Keren di Blog

Sekian artikel Cara Membuat Halaman 404 Keren di Blog kali ini, semoga bermanfaat untuk semuanya. Oke, sampai jumpa di artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Halaman 404 Keren di Blog dengan alamat link https://www.imamdeveloper.my.id/2021/11/cara-membuat-halaman-error-di-blog.html
Next Post Previous Post
TIDAK ADA KOMENTAR
POSTING KOMENTAR
comment url
close
Subscribe