Pasang iklan Anda di sini.
http://goo.gl/ad3AU2
> > Cara Membuat Halaman 404 Error Not Found Pada Blogger

13 Cara Membuat Halaman 404 Error Not Found Pada Blogger

Selasa, Desember 30, 2014
Cara Membuat Halaman 404 Error Not Found Pada Blogger | Cirebon-Cyber4rt - Mungkin dari kalian pernah menjumpai sebuah blog dengan Halaman 404 Error Not Found yaitu halaman blog yang tidak ada konten/isinya. Hal itu dapat membuat pengujung tidak nyaman karena sesuatu yang dicari tidak ada.

Halaman 404 error Not Found
Halaman 404 error Not Found


Nah, kali ini saya akan share bagaimana agar halaman kosong tadi menjadi lebih menarik dengan menambahkan CSS, sehingga tampilan halaman not found tadi menjadi lebih fresh dan ditambah dengan link menuju Halaman Utama atau Hompage blog sehingga pengunjung tidak akan langsung pergi. Berikut caranya :

Cara Membuat Halaman 404 Error Not Found Pada Blogger :
1). Login ke Blogger
2). Pilih menu Template kemudian pilih Edit HTML
3). Masukkan kode Meta Tag berikut tepat dibawah 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> 

4). Lalu letakkan kode CSS berikut tepat diatas kode ]]></b:skin> atau </style>

/* PAGE NOT FOUND */
#error-page {
  background-color:#000;
  position:fixed !important;
  position:absolute;
  text-align:center;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:99999;
}
#error-inner {
  margin:6% auto;
}
#error-inner .box-404 {
  width:200px;
  height:200px;
  background:#080;
  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:1.8em;
  font-size:15px;
}

5). Terakhir letakkan kode berikut tepat diatas 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> 

6). Kemudian Simpan Template.

Silakan kalian kreasikan sendiri warnanya background, ukuran font dan lainnya. Sekian postingan saya kali ini tentang Cara Membuat Halaman 404 Error Not Found Pada Blogger, semoga dapat bermanfaat.



Artikel Terkait :

13 komentar:

jual genset mengatakan...

Thanks berat buat informasinya gan...

Buret mrj mengatakan...

wah boleh nie, terima kasih mas, izin copas kodenya

Muhammad Iqbal K mengatakan...

jual genset: sama-sama gan :)

Buret mrj: ssilakan mas :)

Ainnul Yaqin mengatakan...

wahhh jujur baru tahu saya nih mas izin Praktekan dahhh hehe makasii yee

Nurliana Syaf mengatakan...

Bermanfaat sekali, gan :)

Muhammad Iqbal K mengatakan...

Ainnul Yaqin: silakan dicoba mas =))

Nurliana Syaf: terimakasih sudah berkunjung :)

Em Albar mengatakan...

wah saya sudah ada kang, jadi nyimak saja, semoga berguna bagi yang belum menerapkan kang

yanto cungkup mengatakan...

say paling sebel kalau ngebuka halaman kek gitu mas
langsung saya tutup saja browsernya.

Muhammad Iqbal K mengatakan...

Em Albar: silakan kang :D

yanto cungkup: hehe iya mas, kadang cuma ada halaman kosong dong :)

Cilembu thea mengatakan...

emang keren sih 404 mah

budi purnomo mengatakan...

pernah nemuin kayak gitu juga, nah mas iqbal sekarang udah ngasih solusinya nih :)

Jual sepatu bagus mengatakan...

mantab banget nih triknya,, sangat bermanfaat...
yuk pada mampir lihat lihat sepatu bagus,,

Genset honda mengatakan...

terima kasih atas tipsnya, mau coba dulu gan

Poskan Komentar

Contact

Nama

Email *

Pesan *