Mwkhi54l4AT71A9SPj2FMDVTdJ7sCX4vtnoXHfCo
Membuat Halaman Erorr 404 + Kolom Seacrh

Iklan 728x90

Membuat Halaman Erorr 404 + Kolom Seacrh

Error 404 adalah halaman untuk memberitahukan “Page Not Found” pada blogger. Misalnya, jika pengunjung melakukan klik pada broken link,atau
visitor memasukkan url yang salah pada blog kita. Terkadang halaman Error 404 dianggap sepele, namun halaman ini ternyata bisa mempunyai nilai lebih agar visitor tidak tersesat pada saat membuka blog kita.


Jadi bagaimana membuat halaman 404 Pada blog ?

Pertama Pergi ke setelan > Tema > Edit Html 

Dan letakan kode ini tepat di atas  <head>

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

Jika sudah save tema

 Selanjutnya silakan paste kode ini tepat di atas <body>

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

Tahap selanjutnya masukan kode ini tepat duntuk  atas</body> kode ini biasanya berada di bawa tema sobat

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

Selanjutnya > simpan tema
Bagaimana mudah bukan
Baca Juga
SHARE
Man
seorang mahasiswa semester akhir yang suka mengumbar senyum, kemesraan, dan kebucinan bersama kucing. sangat menyukai nasi goreng, kota Bandung, dan kamu.

Related Posts

Subscribe to get free updates

Posting Komentar

Iklan Tengah Post

Iklan 300x250