কি ভাবে 404 not found page ব্লগারে অন্যভাবে তৈরি করবেন।

<b:if cond='data:blog.pageType == &quot;error_page&quot; OR data:blog.url == &quot;https://www.smsudipbd.com/search?q=&quot;'>

<div id='notfound'>

<div class='notfound'>

<div class='notfound-404'>

<h1>4<span>0</span>4</h1>

</div>

<h2>the page you requested could not found</h2>

<form class='notfound-search' expr:action='data:blog.searchUrl' method='get'>

<input name='q' placeholder='Search...' type='text'/>

<button type='submit'><span/></button>

</form>

</div>

</div>

</b:if>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

<style type='text/css'>

.notfound {

width: 100%;line-height: 1.4;text-align: center;background: #fff;-webkit-box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.1);box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.1);margin: 0 0 15px 0;-webkit-border-radius:3px;-moz-border-radius:4px;border-radius:4px;overflow:hidden;position:relative;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 2px 0 -2px rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 2px 0 -2px rgba(0,0,0,0.2),0 0 2px 0 rgba(0,0,0,0.12);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 2px 0 -2px rgba(0,0,0,0.2), 0 0 2px 0 rgba(0,0,0,0.12);-webkit-transition:box-shadow 0.25s;-moz-transition:box-shadow 0.25s;-ms-transition:box-shadow 0.25s;-o-transition:box-shadow 0.25s;transition:box-shadow 0.25s;

}

.notfound .notfound-404 {position: relative;height: 180px

}

.notfound .notfound-404 h1 {font-family: &#39;Roboto&#39;, sans-serif;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-size: 165px;font-weight: 700;margin: 0px;color: #262626;text-transform: uppercase

}

.notfound .notfound-404 h1&gt;span {color: #ff12cf

}

.notfound h2 {font-family: &#39;Roboto&#39;, sans-serif;font-size: 22px;font-weight: 400;text-transform: uppercase;color: #151515;margin-top: 0px;margin-bottom: 25px

}

.notfound .notfound-search {position: relative;max-width: 320px;width: 100%;margin: auto;padding: 0 0 25px 0;outline: none;

}

.notfound .notfound-search&gt;input {font-family: &#39;galada&#39;, sans-serif;max-width: 100%;height: 50px;padding: 3px 65px 3px 30px;color: #151515;font-size: 16px;background: transparent;border: 2px solid #c5c5c5;border-radius: 40px;-webkit-transition: 0.2s all;transition: 0.2s all;outline: none

}

.notfound .notfound-search&gt;input:focus {border-color: #00b7ff

}

.notfound .notfound-search&gt;button {position: absolute;right:30px;top: 8px;width: 40px;height: 40px;text-align: center;border: none;background: transparent;padding: 0;cursor: pointer;outline: none

}

.notfound .notfound-search&gt;button&gt;span {width: 15px;height: 15px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%) rotate(-45deg);-ms-transform: translate(-50%, -50%) rotate(-45deg);transform: translate(-50%, -50%) rotate(-45deg);margin-left: -3px

}

.notfound .notfound-search&gt;button&gt;span:after {position: absolute;content: &#39;&#39;;width: 10px;height: 10px;left: 0px;top: 0px;border-radius: 50%;border: 4px solid #c5c5c5;-webkit-transition: 0.2s all;transition: 0.2s all

}

.notfound-search&gt;button&gt;span:before {position: absolute;content: &#39;&#39;;width: 4px;height: 10px;left: 7px;top: 17px;border-radius: 2px;background: #c5c5c5;-webkit-transition: 0.2s all;transition: 0.2s all

}

.notfound .notfound-search&gt;button:hover&gt;span:after {border-color: #4f37ac

}

.notfound .notfound-search&gt;button:hover&gt;span:before {background-color: #4f37ac

}

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

  .notfound h2 {font-size: 18px}

}

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

.notfound .notfound-404 h1 {font-size: 141px}

}

</style>

</b:if>