Halaman Error 404 Untuk Blogspot

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 !

DEMO

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJCpZq05zp7OaALvDbaVVuinnrfk6cK2IrrtVDT02jlKTuFrGP7-6OIWq7KZb7YBQgrP8_OvRsew3F9TSnebGlJX-jw89QffqpfsMrxaGvs_npxQlr8sc1fV1-0Mhd17MPh-p9U6v_6pI/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 :
faisal-fachrureza.blogspot.com/2014/02/mendesain-halaman-404-error-not-found.html

Halaman Error 404 Untuk Blogspot

1 Comments

Contact Form