Selasa, 23 Oktober 2012

membuat halaman 404 error

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 Setting -> Search preference -> Errors and redirections -> klik Edit -> masukan kode berikut ini :

<div id="error-404">
<div class="errort1-404"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMsqoPyUHy4Qh2u_AfjkppVPPkAAXGfHjckuVdcEtm6fzatS_JuV7xwHYJaJvQmgxYlzsywfHQQKeCj0fFHOuunTTdesvZEiR8ONjJhzzLocBll0phA-mCIVI1pEEKvzaAKbVYOvckGG0/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.









sumber :  http://www.sodiycxacun.web.id

Tidak ada komentar:

Posting Komentar