Halaman Error 404 Untuk Blogspot

Halaman Error 404 Untuk Blogspot

Halaman Error 404 Untuk Blogspot

error 404 

Jika sebelumnya telah ada postingan mengenai halaman 404 ala kang ryan disini, kali ini masih sama tentang halaman error 404 tetapi dengan style yang berbeda, ayo disimak ya !




Jika sudah di dashboard klik template dilanjutkan dengan edit HTML
Temukan kode <head> kemudian pastekan kode berikut dibawahnya


<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>404: Page Not Found ~ <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>
</b:if>

Lalu masukkan kode dibawah ini diatas kode ]]></b:skin> atau </style>


/*Desain Halaman 404 Error Not Found
----------------------------------------------- */
#error-page {
background-color:#e9e9e9;
position:fixed !important;
position:absolute;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999;
}
#error-inner {
margin:11% auto;
}
#error-inner .box-404 {
width:200px;
height:200px;
background:#21afa4;
color:#fff;
font-size:80px;
line-height:200px;
border-radius:10px;
margin:0 auto 50px;
position:relative;
}
#error-inner .box-404::after {
content:&quot; &quot;;
width:0;
height:0;
bottom:-8px;
border-color:#21afa4 transparent transparent;
border-style:solid;
border-width:9px 9px 0;
position:absolute;
left:47%;
}
#error-inner h1 {
text-transform:uppercase;
}
#search-box{position:relative;width:350px;margin:10px auto}
#cse-search-box{height:30px;border-radius:2px;background-color:#fff;overflow:hidden;border:1px solid #bbb}
#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent}
#search-box input[type=&quot;text&quot;]{width:85%;padding:5px 20px 12px 0;color:#666;outline:none}
#search-button{position:absolute;top:0;right:0;height:32px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png) no-repeat;cursor:pointer}
#error-inner p {
line-height:0.7em;
font-size:15px;
}

Letakkan kode berikut diatas tag </body>


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <div id='error-page'>
          <div id='error-inner'>
            <div class='box-404'>404</div>
           <h1>Halaman tidak ditemukan</h1>
            <p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
            <p>Kembali ke <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
            <div id='search-box'>
          <form action='/search' id='cse-search-box' method='get'>
            <input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari di sini ...'/>
            <button id='search-button' type='submit'/>
          </form>
        </div>
          </div>
        </div>
    </b:if>

Jika selesai simpan template.

Script dalam tulisan ini bersumber dari :
_http://faisal-fachrureza.blogspot.com/2014/02/mendesain-halaman-404-error-not-found.html_

Share this:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

2 Comments Add Comment

Ijin share : http://piljatep.web.id/content/desain-kreatif-halaman-pesan-eror-404-vektor-gratis-dari-freepikcom. Ini adalah link untuk melihat variasi desain halaman eror 404. Ini file vector bukan css html, tapi mungkin bisa jadi rujukan inspirasi. Semoga bermanfaat.

Balas

Terima Kasih gan, sudah menambah referensi, sukses untuk agan

Balas
Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×