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

10 comments:

  1. wah keren nih tutorialnya ,thanks ya gan :)

    ReplyDelete
  2. keren gan,, cuma saya udh pake jenis lain :D

    ReplyDelete
    Replies
    1. makasih gan, barangkali ingin mencba hal lainnya :D

      Delete
  3. saya baru tau nih ... makasih udah berbagi ..

    ReplyDelete
  4. mantep nih, keren juga. makasih sob, saya pake tutorialnya

    ReplyDelete
  5. wah mantap tuh kk izin coba yah tutornya

    ReplyDelete

Peraturan Dalam Berkomentar :
[+] Marilah Kita Budayakan Berkomentar Sesudah Membaca Artikel.
[+] Dilarang Menghina, Promosi Atau Iklan, Menyelipkan Link Aktif Dan Non Aktif
[+] Dilarang Berkomentar Yang Mengandung Unsur Porno, Spam, Sara, Politik, Profokasi.
[+] Budayakan Berkomentar Dengan Sopan, Bijak, dan Sesuai Artikel (Dilarang Berkomentar Diluar Topic).
[+] Jika Kalian ingin bertanya di luar topic anda bisa kunjungi link tersebut
http://zatykhan.blogspot.com/p/blog-page.html