How to put a 404 error page on Blogger With Search Bar

How to put a 404 error page on Blogger With Search Bar

404 error page on Blogger With Search Bar

The 404 'Not Found' Error page is a page generated by the server to inform you that the link you visited on a blog page cannot be found. Usually you will experience an error 404 when the link has been changed to the publication date or deleted, or it could be when you click a blog address link with a typo in it.

Blogger also has provided 404 error pages by default to display pages that were not found but these are so simple

For those who want to change the default appearance provided by Blogger, here I will provide a display options from the 404 Error Page that you can easily install. Here are the steps.

First, open Blogger >> Click menu >> then click edit HTML >> Then find and add the code below before</head>
<b:if cond='data:view.isError'>
<style>
/* Error 404 By BITGK (bitgk.blogspot.com) */
body{background:#fff;line-height:1.4em;overflow:hidden}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}
@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#error-page{background:#fff;margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}
#error-inner{margin:12% auto 35px;padding:0;list-style:none!important}
#error-inner .box-404{display:inline-block;position:relative;font-weight:bold;width:200px;height:200px;background:#e84118;color:#fff;font-size:70px;line-height:200px;margin:25px auto}
#error-inner .box-404 .zigg{display:inline-block;position:relative;animation:rotating .6s linear}
#error-inner .box-404::after{content:'';width:0;height:0;position:absolute;top:0;right:0;border-width:30px;border-style:solid;border-color:#fff #fff transparent transparent;display:block}
#error-inner .box-404::before{content:'';width:0;height:0;position:absolute;top:0;left:0;border-width:30px;border-style:solid;border-color:#fff transparent transparent #fff;display:block}
#error-inner .box-404 div::after{content:'';width:0;height:0;position:absolute;bottom:0;left:0;border-width:30px;border-style:solid;border-color:transparent transparent #fff #fff;display:block}
#error-inner .box-404 div::before{content:'';width:0;height:0;position:absolute;bottom:0;right:0;border-width:30px;border-style:solid;border-color:transparent #fff #fff transparent;display:block}
#error-inner h2{color:#2d2d2d;font-weight:700;line-height:1.4em;font-size:30px;animation:charge .5s linear}
#error-inner p{line-height:1.7em;font-size:16px;color:#111;padding:0;margin:15px auto 0 auto;max-width:640px;animation:charge .5s linear}
#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}
#search-404 .icons{width:26px;height:26px;fill:#4285f4;vertical-align:middle}
#search-404 .icon-Forward{width:20px;height:20px}
#search-404 p{font-size:90%;color:#999;padding:20px 20px 0;text-align:right}
#search404 input[type=search]{width:100%;border-radius:99em;height:48px;box-shadow:0 1px 6px 0 rgba(32,33,36,0);border:1px solid #dfe1e5;padding:0 48px 0 24px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:#fff;transition:all .3s}
#search404 input[type=search]:focus{background:#fff;box-shadow:0 1px 6px 0 rgba(32,33,36,0.28)}
#search404 .src-btn404{background:transparent;border:none;padding:0 20px;outline:none;height:48px;line-height:48px;font-weight:700;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}
@media screen and (max-width:640px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}}
</style>
</b:if>
The next step, look for the code <body> >> then put this below code under it. >> 
<b:if cond='!data:view.isError'>
Then add the below code before </body>
</b:if>
<b:if cond='data:view.isError'>
   <div class='error-wrapper' id='error-wrapper'>
      <div id='error-page'>
         <div id='error-inner'>
            <div class='box-404'>
               <div><span class='zigg'>404</span></div>
            </div>
            <h2>Page Not Found</h2>
            <p>The page you were trying to visit has disappeared or moved to another dimension. Perhaps searching will help.<br/></p>
         </div>
         <div id='search-404'>
            <form action='/search' id='search404'>
               <input name='cof' type='hidden' value='FORID:10'/>
               <input name='ie' type='hidden' value='ISO-8859-1'/>
               <input class='src-form404' name='q' placeholder='Search here...' required='required' type='search'/>
               <button class='src-btn404' title='Search' type='submit'>
                  <svg class='icons icon-Search' viewBox='0 0 24 24'>
                     <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/>
                  </svg>
               </button>
            </form>
            <p>
               Or, back to 
               <a expr:href='data:blog.homepageUrl'>
                  homepage 
                  <svg class='icons icon-Forward' viewBox='0 0 24 24'>
                     <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/>
                  </svg>
               </a>
            </p>
         </div>
      </div>
   </div>
</b:if>
The next step is to click the button Save theme and see the results.

Location: India

Comments

Post a Comment

We Love Hearing from You!
Thank you for reading our post! Your thoughts and opinions are important to us. Please leave a comment below to share your feedback, ask questions, or start a discussion. We look forward to engaging with you!

Note: Comments are moderated to ensure a respectful and positive environment.

Popular posts from this blog

Implementing Auto-Logout in PHP: Enhancing Security for Your Web App

Image
When building a web application, security is always a top concern. One effective way to protect your users is by implementing an auto-logout feature. This ensures that users are automatically logged out after a period of inactivity, reducing the risk of unauthorized access. In this post, we’ll walk through the theory of how to set up this feature in a PHP session-based login system. Overview We’re creating a secure login system where users are logged out after a defined period of inactivity. This involves session management, detecting user activity, and implementing a countdown timer. Step 1: Session Management First, we need to manage user sessions. When a user logs in, we start a session to keep track of their activity across different pages. Here’s what you need to do: Initialize Sessions : Use session_start() to initiate a session or resume the current one. Store Session Data: Store user-specific data, like the username, in session variables to make it accessible throughout the s...
Latest from us

A Simple and Professional Login Form with Gradient Background

Image
Looking to add a clean and modern login form to your website? This example is just what you need. It’s straightforward, responsive, and has a nice gradient background that makes it stand out without being overwhelming. What’s Great About This Login Form? It’s Centered and Clean: The form sits right in the center of the screen, making it easy for users to focus and log in without distractions. Works on All Devices: Whether your users are on a desktop, tablet, or smartphone, this form looks great and functions smoothly. What’s Inside the Form? Username Field: Users can enter their username or email. Password Field: The password is securely hidden as they type. Login Button: A simple button that’s easy to click, with a slight hover effect for a polished feel. How It Works: HTML Structure: The HTML is basic but effective, featuring a form with username and password fields inside neatly styled containers. CSS Styling: The styling is where the magic happens. The background gradient cr...
Latest from us

How to Create a YouTube Subscribe Website Widget

Image
In this tutorial, you'll learn how to create a YouTube subscribe button widget for your website using the official documentation from Google. This widget allows your visitors to subscribe to your YouTube channel directly from your website, which can help increase your subscriber count and engagement. Prerequisites Before you begin, make sure you have the following: A Google account with a YouTube channel. Basic knowledge of HTML, CSS, and JavaScript. Access to edit your website's code. Steps to Create the YouTube Subscribe Widget: Visit the YouTube Subscribe Button Documentation:     Go to the YouTube Subscribe Button Documentation provided by Google. Configure Your Subscribe Button: Enter your channel's URL or ID in the channel parameter field. You can find your channel ID in your YouTube account settings under " Advanced Settings. " Choose your button layout (default or full). The full layout includes both the channel icon and subscriber count. Select the butto...
Latest from us