√ Cara Memasang Halaman Error 404 dengan Search Form

Cara Memasang Halaman Error 404 dengan Search Form

8/14/2018

Salah satu syarat navigasi blog yang baik adalah dengan memberikan tujuan dan pilihan yang jelas ketika pengunjung berada pada suatu halaman di blog Anda. Begitu pula dengan halaman error 404.

Halaman Error 404 adalah halaman yang akan dilihat pengunjung saat mencoba untuk membuka halaman yang tidak ada di blog Anda, bisa karena halaman telah dihapus, link rusak, atau pengunjung yang salah mengetikkan alamat url.

Ada tiga alasan yang menurut saya, sehingga saya merasa lebih baik jika menggunakan halaman error 404 custom sendiri dari pada menggunakan halaman error 404 yang disediakan blogspot.

Informasi yang disampaikan kurang informatif karena hanya bertuliskan "Sorry, the page you were looking for in this blog does not exist." , sehingga kesannya terasa begitu membosankan dan tidaklah menarik.
Halaman ini muncul dibagian main body saja (tempat munculnya halaman posting / static page) dan tetap memunculkan header, sidebar dan footer. Hal ini bisa menjadi kendala bagi Anda yang sudah menjadi publisher Adsense dan sudah menempatkan iklan di luar main body. Sehingga ketika error page 404 muncul, maka iklan pun akan tetap muncul dan hal ini merupakan salah satu hal yang tidak dianjurkan bagi pengiklan untuk menampilkan iklan di laman tersebut.
Dengan Halaman Error 404 custom, kita bisa memberikan informasi yang lebih jelas, memberikan pilihan pencarian ataupun memberikan arah bagi pengunjung untuk menuju halaman home page. Dengan begitu, maka setiap pengunjung yang datang (baik dari search engine ataupun refferal, bisa tetap masuk dan berkunjung ke blog kita).

Nah, oleh karena itu, kali ini Namina akan memberikan informasi bagaimana Cara Memasang Halaman Error 404 dengan Search Form yang bisa Anda modifikasi kembali sehingga lebih informatif dan tetap membuat nyaman pengunjung ketika mendapati halaman yang hilang tersebut.

Cara Memasang Halaman Error 404 dengan Search Form

Login ke Blogger lalu masuk ke Tema > Edit HTML > Cari kode </head> atau </head> lalu letakkan kode berikut diatasnya.

<b:if cond='data:view.isError'>
<style type='text/css'>
/* Error 404 */
body{background:#fff;line-height:1.4em}
#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:9% 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:190px;margin:25px auto}
#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 h3{text-transform:uppercase;color:#ed5858;font-size:50px;margin:0 auto 20px;font-weight:700;letter-spacing:10px}
#error-inner h2{color:#2d2d2d;font-weight:700;line-height:1.4em;font-size:30px}
#error-inner p{line-height:1.7em;font-size:18px;color:#111;padding:0;margin:15px auto 0 auto}
#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}
#search-404 .icons{width:26px;height:26px;fill:#aaa;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 10px 12px rgba(0,0,0,.05);border:1px solid rgba(0,0,0,0.05);padding:0 48px 0 20px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:#fafafa;transition:all .6s}
#search404 input[type=search]:hover{border-color:rgba(0,0,0,0.08)}
#search404 input[type=search]:focus{background:#fff;border-color:#74b9ff}
#search404 .src-btn404{background:transparent;border:none;padding:0 16px;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:600px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}}
</style>
</b:if>

Langkah selanjutnya, Cari kode <body> kemudian letakkan kode ini dibawahnya.

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

Cari kode </body> atau </body> lalu letakkan kode berikut di atas kode tadi.

</b:if>
<b:if cond='data:view.isError'>
   <div class='error-wrapper' id='error-wrapper'>
      <div id='error-page'>
         <div id='error-inner'>
            <h3>Error</h3>
            <div class='box-404'>
               <div>404</div>
            </div>
            <h2>Page Not Found</h2>
            <p>It looks like you are lost! Try searching here :<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>

Terakhir Simpan tema dan hasilnya akan terlihat jika Anda menemukan link yang error di blog Anda atau cukup tes dengan url seperti ini.