Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Friday, 18 July 2014

MEMBUAT HALAMAN EROR 404 DI BLOG


Membuat Halaman Error 404 alias halaman yang tidak ditemukan di blog.
Mereka yang membuka url salah (karena sudah diubah/dihapus) akan dialihkan ke halaman kosong.
Hal tersebut membuat mereka merasa bingung, dan meninggalkan blog kita, trafik/kunjungan ke blog kita lama-kelamaan akan menurun.

TUTORIAL BLOG

  • Masuk ke BLOGGER
  • Masuk ke DASBOR
  • Klik MENU EDIT TEMPLATE
Masukan kode di bawah ini tepat di bawah kode <head>

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

Masukan kode CSS tepat di atas </style>
 
#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;
}
#error-inner p {
line-height:0.7em;
font-size:15px;
}

Masukan kode di bawah ini tepat di atas kode </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>
        </div>
    </b:if> 
Setelah itu klik SAVE
Demo
Readmore → MEMBUAT HALAMAN EROR 404 DI BLOG