Convert 404 Page With Beautiful Search Box In Blogger

404 error in blogger,not found

I think you all know all about 404 page or Page Not Found errors. Blogger is not dynamic as wordpress and can’t compete with wordpress. But here in this post I will tell you how you can convert 404 page with beautiful search box in blogger? It is just as a custom redirection of 404 page.

         If any user will click on your broken link or will enter any wrong URLs they will simply redirect on beautiful custom search box. From here user can navigate to your home page easily. Moreover the design of this custom search box is very cute it will give a great touch to fancy design to your blog. ok be with us to know all process.

How We Can Convert 404 Page With Beautiful Search Box In Blogger?

Step01

Login Blogger website with your username and password.

Step02

Go to your blogger dashboard.

Step 03

Click on Setting in the left side bar.

convert 404

Step 04

Now click on Search Preferences section.

convert 404

Step 05

After click on Search Preference, move to right side and now click on edit in “Error and Redirections “section (Custom Page Not Found)

blogger setting

Step 06

Copy the below code and paste it in edit box.

 

<style>
#search-button-links1 {
position: relative;
top: 0;
right: 0;
height: 60px;
width: 580px;
font-size: 18px;
color: #000;
text-align: center;
text-decoration:none;
line-height: 42px;
border-width: 0;
background-color: #5caddf;
margin:5px;
cursor: pointer;
}
#search-box1 {
position: relative;
width: 100%;
margin: 0;
}
#search-form1 {
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text1 {
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type=”text”] {
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button1 {
position: absolute;
top: 0;
right: 0;
height: 42px;

width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id=’search-box1′>
<form action=’/search’ id=’search-form1′ method=’get’ target=’_top’>
<input id=’search-tex1t’ name=’q’ placeholder=’ Search Here ‘ type=’text’/>
<button id=’search-button1′ type=’submit’><span>Search</span></button>
</form>
</div>
<p style=”color:#e33633; font-family:verdana, sans serif; font-size:16px; padding:24px; text-decoration:none”>This Page has been removed for safety purposes | Visit <a href=”http://yourname.blogspot.com“>99mediasector</a>

What Next?

Now it’s your turn. After applying the above code you just need to change highlight text according to you. The above code is just a chunk of code for CSS and below is 2 divs which will help to declare the search box area

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.