Membuat Halaman 404 Error di Blogger

Sobat semua sudah tau kan bahwa Blogger sudah mempunyai tampilan antar muka baru. Selain tampilan yang baru blogger terus mengembangakan fitur-fiturnya pada antar muka baru tersebut salah satunya adalah halaman error. Halaman error terjadi bila halman tidak ada, artikel yang sudah dihapus atau penulisan alamat URL blog kita salah dalam penulisan, maka munculah halaman error.

Nah sebenarnya pesan error ini sudah banyak dipakai di web web dengan hosting sendiri. Di halaman ini pun kita bisa modifikasi sesuai kreatifitas Anda dan pesan yang disampaikan saat masuk halaman error. Tetapi kali ini saya berikan contoh saja halaman error seperti dibawah ini :



Live demo : Klik disini
Halaman error blog ini : Erorr Cobasanasini

Oke langsung kita mulai cara pembuatannya, untuk tutorial ini saya pakai antar muka baru blogger.

Pertama cek dulu kode status di template sobat , masuk ke Template -> Edit HTML -> Proceed -> beri centang kotak kecil disamping tulisan Expand Widget Templates -> cari kode dibawah ini, untuk memudahkan tekan CTRL F.

<b:include data='top' name='status-message'/>

Jika tidak ada silahkan tambahkan kode tadi tadi tepat diatas kode berikut :
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == &quot;false&quot;'>
&lt;/div&gt;&lt;/div&gt;
</b:if>

dan diatas kode :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>


Jika sudah ada kode pertama tadi sekarang lanjut ke langkah selanjutnya.

Langkah kedua masukkan kode CSS, kode CSS ini bisa ANda modifikasi lagi letakkan kode CSS berikut dibawah kode ]]></b:skin>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>

/* Error 404
--------------------- */

/* Container */
#error-404 {
padding:20px;
}
/* gaya text pertama */
.errort1-404 {
color: #fff;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
/* Gaya text kedua */
.errort2-404 {
color: #fff;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
/* Pesan text */
.errort3-404 {
padding:20px;
color:#414141;
text-shadow: 1px 2px 3px #fff;
text-align:center;
font-size:20px;
}
/* tombol bottom*/
.errort4-404 {
margin-top:20px;
padding:10px;
display:inline-block;
text-shadow:0 1px 1px #fff;
text-decoration:none;
font: bold 13px Sans-Serif;
border:1px solid #DDD;
border-radius:3px;
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}

/* Tampilan modifikasi
--------------------- */

.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #sidebar-wrapper, #footer-wrapper { /* tampilah yang dihilangkan di halaman errorr nantinya */
display: none;
}

#main, #main-wrapper {
width: 960px; /* perubahan luas pada main-wrapper */
margin-left: -25px;
}

</style>
</b:if>

Setelah selesai pengecekkan dan penambahan kode silahkan Save template.

Langkah ketiga masuk ke

1. Setting 
2. Search preference
3.Errors and redirections
4.klik Edit
5. masukan kode berikut ini :
<div id="error-404">
<div class="errort1-404"><img src="https://lh6.googleusercontent.com/-TyJrDs9bcr0/T2u4hmEMdWI/AAAAAAAACT8/e4cLGWGxh7s/s100/error.png" style="vertical-align:middle;"/> UPS!</div>
<div class="errort2-404">404 error</div>
<div class="errort3-404">
Maaf Halaman tidak ditemukan, kemungkinan artikel sudah dihapus atau memang tidak ada.
</div>
<div class="errort4-404"><a href='/'>Kembali ke halaman depan</a></div>
</div>

kemudian klik Save Changes.


Note : Sekali lagi saya beri tahu bahawa kode CSS diatas bisa ANda pakai dan ANda modifikasi sendiri, karena jika template berbeda kemungkinan juga berbeda pada selektor CSS nya.

5Coment :

  1. wahahaha..
    manstap bro...


    saya katakan dengn jujur ini nice info..

    BalasHapus
  2. Thanks infonya sob
    www.imc-syndicate.com

    BalasHapus
  3. maaf nih bang, mau tanya nih?
    gak berhubungan sama artikel nih .
    itu efek apa sih yang dipake buat kotak yang isinya kode html?

    BalasHapus
  4. @Caesar ; Makasih sob !!!

    @diitra : ?

    BalasHapus
  5. ïŗ√ąŋ ҡąđɧą∱ï : sama sama!!

    BalasHapus