Type something and hit enter

author photo
By
Membuat atau bahkan melakukan modifikasi khusus pada halaman error 404 di blog memiliki keunggulan dan manfaatnya tersendiri. Selain sebagai estetika dan seni tampilan halaman error 404 yang didesain dengan unik dan responsif akan memberikan kesan yang bagus terhadap pengunjung, mana kala di suatu waktu menemukan halaman error 404 di blog kita.
Biasanya halaman error 404 terjadi akibat terjadi broken link di dalam blog. Hal ini bisa disebabkan karena link url telah dihapus admin atau bahkan telah diubah linknya untuk keperluan SEO namun lupa untuk mengalihkan link yang sudah mati menuju link aslinya yang valid. 

Oleh karenanya daripada membuat halaman error 404 kosong tak bermakna kita bisa membuat halaman error 404 yang lebih dinamis dengan desain yang keren dan responsif di semua perangkat, juga menambahkan kolom search artikel agar pengunjung tidak langsung meninggalkan blog yang berakhir pada meningkatnya bounch rate blog kita.

Sebagaimana diketahui bahwa bounch rate dapat memengaruhi kualitas sebuah blog di mata mesin pencari. Ini terjadi diakibatkan dari tindakan pengunjung yang mengunjungi artikel blog kita melalui mesin pencari namun tidak membaca artikel lainnya. Salah satu masalahnya adalah halaman error 404 jika tidak ditangani serius maka blog kita pun akan terancam mengalami kenaikan bounch rate yang berakibat pada menurunnya nilai blog di mata mesin pencari.

Sehingganya dalam tutorial kali ini, saya akan mengulas mengenai cara membuat halaman error 404 yang sekaligus menyediakan kolom search artikel di blog sehingga pengunjung yang menemukan halaman error 404 bisa lebih lanjut mencari topik artikel yang diinginkannya melalui kolom search.

Nah, berikut tutorial cara pasang halaman error 404 responsive dengan fitur tambahan kolom search artikel blog.

Langkah 1
Login ke blogger lalu pergi ke Tema > Edit HTML

Langkah 2
Carilah kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; lalu letakan kode berikut ini di atas kode tersebut.

 <b:if cond='data:view.isError'>  
 <style type='text/css'>  
 /* Error 404 */  
 body{background:#fff;font-family:-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,&quot;Oxygen-Sans&quot;,&quot;Ubuntu&quot;,&quot;Cantarell&quot;,&quot;Helvetica Neue&quot;,sans-serif;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 {position:relative;font-weight:bold;width:200px;height:200px;background:linear-gradient(45deg, #ae033f, #f78938);color:#fff;font-size:80px;line-height:190px;margin:0 auto 25px;}  
 #error-inner .box-404::after {content:&quot;&quot;; 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:&quot;&quot;; 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:&quot;&quot;; 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:&quot;&quot;; 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.4em;font-size:18px;color:#2d2d2d;padding:0}  
 #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:50px;height:48px;-webkit-box-shadow:0 15px 32px rgba(0,0,0,.1);box-shadow:0 15px 32px rgba(0,0,0,.1);border:1px solid #e5e5e5;padding:0 48px 0 20px;line-height:48px;font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;background-color:#f9f9f9}  
 #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 3
Cari lagi kode <body> lalu letakan kode berikut ini di atasnya

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

Langkah 4
Pada langkah terakhir sebelum menyimpan tema, carilah kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu lakukan cara yang sama, letakan kode di bawah ini di atas salah satu kode tersebut.

 </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 5
Simpan tema

Untuk melihat hasilnya atau mengetes bagaimana nantinya tampilan halaman error 404 di blog. Kita bisa menggunakan link mati atau URL yang tidak tersedia di blog misalnya seperti ini: blogkamu.blogspot.com/error-404.html

Demikian tutorial blogging mengenai cara membuat halaman error 404 responsive dengan fitur kolom search artikel.

Semoga bermanfaat...

0 komentar

Mohon tidak berkomentar dengan link aktif, termasuk berpromosi jasa dan lain-lain. Karena akan langsung dihapus