Cara Membuat Halaman Error 404 dengan Search Form

Cara Membuat Halaman Error 404 dengan Search Form

Snippet Tips Blogger

12.10

iNDZGN - Halaman Error 404 adalah halaman yang dilihat oleh visitor saat mencoba membuka halaman yang tidak ada di blog kita. Hal itu bisa dikarenakan karena halaman telah dihapus, link rusak, ataupun visitor yang salah mengetikkan alamat URL.

Ada beberapa alasan yang lebih baik menggunakan Halaman Error 404 custom sendiri daripada menggunakan yang sudah disediakan oleh Blogspot. Kenapa?

1. Informasi yang disampaikan kurang informatif, karena hanya bertuliskan "Sorry, the page you were looking for in this blog does not exist." sehingga kesannya terlihat membosankan dan kurang menarik.
2. Halaman tersebut hanya muncul di bagian body saja (muncul di halaman posting/static page)  dan tetap memunculkan header, sidebar, dan footer. Ini bisa menjadi kendala bagi publisher Adsense yang sudah menempatkan iklannya di luar main body. Kenapa? karena ketika halaman error 404 muncul, maka iklanpun juga akan tetap muncul dan ini merupakan salah satu hal yang tidak dianjurkan bagi pengiklan untuk menampilkan iklan di halaman tersebut.
3. Dengan adanya Halaman Error 404 yang kita custom sendiri, bisa memberikan informasi yang lebih jelas bagi visitor dalam memberikan pencarian atau arah bagi visitor untuk menuju ke Home Page/ Halaman Utama. Oleh karena itu, setiap visitor yang datang bisa tetap masuk dan berkunjung ke blog kita.

Oleh karena itu, pada artikel kali ini Indzgn akan memberikan informasi mengenai Cara Membuat Halaman Error 404 dengan Search Form. Dan tentunya bisa kamu modifikasi kembali agar lebih informatif dan menarik serta membuat visitor nyaman saat mendapati Halaman Error 404 tersebut.

Cara Membuat Halaman Error 404 dengan Search Form

Login ke akun Blogger kamu, kemudian masuk ke Tema>Edit HTML>cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; lalu letakan kode berikut di atasnya.

<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>

Selanjutnya, cari kode <body> kemudian letakan kode ini di bawahnya.

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

Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu letakan kode ini di atasnya.

</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>

Langkah terakhir, simpan tema dan lihat hasilnya.

• Result

Jika kamu menemukan link error atau bisa dengan cara tes menggunakan URL seperti ini.

https://www.BLOGKAMU.com/404

Demikian informasi yang Indzgn berikan untuk kamu mengenai Cara Membuat Halaman Error 404 dengan Search Form. Semoga bermanfaat. Jangan lupa kunjungi artikel artikel lainnya di blog Indzgn.

12.10