Sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi yg lagi hangat itu, cara membuat halaman error 404 untuk blogger b-) Mari kita babat kreasi master² dari negara spanyola tentang si error page :D
Pertama datang dari master @Ciudad_Blogger, please read (spain language) :P crear página de error 404 en blogger.
Hampir kelupaan nih, sobat harus dalam mode updated blogger interface dulu yah (editor baru) untuk melakukan semua hack ini ;)
Selalu backup download full template sebelum melakukan utak-atik kode ;) Expand Widget Templates kalian, temukan kode<b:include data='top' name='status-message'/>
Kalau sudah ada is good, kalau belum ada kalian harus menuliskannya dulu :P Pasti sudah ada kebanyakan bawaan default template blog mah.
Dalam mode editor anyar klik tulisan Settings ► Search preferences. Pada bagian Errors and redirections sobat pilih & klik Edit Custom Page Not Found. Isikan kode berikut didalam kotak!
<div id="error-404">
<div class="error1-404">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9EorWX1mRKLS2iAPJTdhrSshC8mbeFDm5jypCM-nOwGXZsjkRSNpbYbIDgUsNSgn1cpwtsod_vxlie6Dd26k6XDD7posuw3azv-166fV8cUXqQPO527pdV8f5Bt1-NhYDY1LxtEaLA4/s100/error.png" style="vertical-align:middle"/> OMG!</div>
<div class="error2-404">Halaman tidak ditemukan</div>
<div class="error3-404">Sepertinya ada kesalahan dengan halaman yang anda cari.<br/>Ada kemungkinan entri telah dihapus atau alamat sudah tidak ada.</div>
<div class="error4-404"><a href='http://YOUR-NAME-BLOG .blogspot.com'>Back To</a></div>
</div>
Save changes.
Klik template ► Edit HTML ► Proceed, temukan ]]></b:skin> masukin bumbu CSS brkt
#error-404 {
padding:10px;
text-align:center;
}
.error1-404 {
color: #fff;
font-size: 90px;
font-weight: bold;
text-transform: uppercase;
color: #d00;
}
.error2-404 {
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #C9C9C9, 0 3px 0 #bbb, 0 4px 0 #B9B9B9, 0 5px 0 #aaa, 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);
}
.error3-404 {
padding: 5px;
color: #333;
text-shadow: 1px 2px 3px #fff;
font-size: 20px;
padding: 10px;
}
.error4-404 {
margin-top: 20px;
padding: 10px;
display: inline-block;
text-shadow: 0 1px 1px #fff;
font: bold 13px Sans-Serif;
border: 1px solid #DDD;
background: #EEE;
}
Save template.padding:10px;
text-align:center;
}
.error1-404 {
color: #fff;
font-size: 90px;
font-weight: bold;
text-transform: uppercase;
color: #d00;
}
.error2-404 {
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #C9C9C9, 0 3px 0 #bbb, 0 4px 0 #B9B9B9, 0 5px 0 #aaa, 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);
}
.error3-404 {
padding: 5px;
color: #333;
text-shadow: 1px 2px 3px #fff;
font-size: 20px;
padding: 10px;
}
.error4-404 {
margin-top: 20px;
padding: 10px;
display: inline-block;
text-shadow: 0 1px 1px #fff;
font: bold 13px Sans-Serif;
border: 1px solid #DDD;
background: #EEE;
}
Ini yg sedikit memerlukan skill masing² dari kalian. Karena UnikID template pasti berbeda-beda adanya. Karena pada bagian ini kita akan memasukan teknik snippet, agar penampilan error page sesuai keinginan. Seperlunya saja bubuhkan variabel pada CSS ;)
Cari kode
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
UNIK ID TEMPLATE YG AKAN DIHILANGKAN
{
display:none;
}
.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden
{
}
</style>
</b:if>
UNIK ID TEMPLATE YG AKAN DIHILANGKAN biasanya sering dengan kode #sidebar/#sidebar-wrapper/#right-wrapper/... taruhlah disitu. Untuk .status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden bisa kalian pisah² tergantung mau dipasang variabel CSS apaan disana. Ingat apa yg saya tadi bilang (seperlunya)! Contoh penerapan
Lihat hasil kerja :) DEMO http://nombre-de-mi-blog.blogspot.com/error.html<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
#sidebar-wrapper, #TextList1, #nav, .feed-links{
display:none
}
#main-wrapper{width:650px}
.status-msg-wrap,.status-msg-body,.status-msg-border {
width: 625px;
border: none
}
</style>
</b:if>
Pemilik blog Emilio Cobos berkreasi dengan javascript kepunyaan google, mirip dengan postingan Koben sebelumnya, tetapi sudah dibubuhi bumbu CSS nih sob ;))
Kalau mau pakai hasil kreasinya, sobat hanya perlu melakukan
Settings ► Search preferences ► klik edit Custom Page Not Found ► masukin ini semua
<style>
.status-msg-body{position:relative!important}
.status-msg-border{display:none!important}
.contenedor h1 {
font-weight: 600;
margin: 0 10px;
font-size: 50px;
text-align: center;
}
.contenedor h1 span { color: #bbb; }
.contenedor h3 {
margin: .8em 0 .3em;
font-size:25px;
}
.contenedor ul{
list-style-type:disc;
padding: 0 0 0 40px;
margin: 1em 0;
}
.contenedor {
text-align:left;
width: 380px;
margin: 0 auto;
color:#515151;
font-weight: 600;
font-size: 16px;
box-shadow: 0 0 10px #bbb;
background: white;
padding:30px;
}
.contenedor, .contenedor input {
font-family: "Open Sans","Helvetica Neue", Helvetica, Arial, sans-serif;
}
#goog-wm .content{text-align: center}
#goog-fixurl ul {
list-style: none;
padding: 0;
margin: 0;
}
#goog-fixurl form {
margin: 0;
text-align: center;
}
#goog-wm-qt, #goog-wm-sb {
border: 1px solid #bbb;
font-size: 16px;
line-height: normal;
vertical-align: top;
color: #444;
border-radius: 2px;
}
#goog-wm-qt {
width: 220px;
height: 20px;
padding: 5px;
margin: 5px 10px 0 0;
box-shadow: inset 0 1px 1px #ccc;
}
#goog-wm-sb {
font-weight: bold;
display: inline-block;
height: 32px;
padding: 0 10px;
margin: 5px 0 0;
background-color: #f5f5f5;
}
#goog-wm-sb:hover, #goog-wm-sb:focus {
border-color: #aaa;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #f8f8f8;
}
#goog-wm-qt:focus, #goog-wm-sb:focus {
border-color: #105cb6;
outline: 0;
color: #222;
}
</style>
<div class="contenedor">
<h1>Error 404 <span>:(</span></h1>
<p>Maaf, halaman yang anda cari tidak ada.</p>
<p>Mungkin error:</p>
<script type='text/javascript'>
var GOOG_FIXURL_LANG = 'in';
var GOOG_FIXURL_SITE = 'location.host'
</script>
<script src='http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js' type='text/javascript'></script>
</div>
.status-msg-body{position:relative!important}
.status-msg-border{display:none!important}
.contenedor h1 {
font-weight: 600;
margin: 0 10px;
font-size: 50px;
text-align: center;
}
.contenedor h1 span { color: #bbb; }
.contenedor h3 {
margin: .8em 0 .3em;
font-size:25px;
}
.contenedor ul{
list-style-type:disc;
padding: 0 0 0 40px;
margin: 1em 0;
}
.contenedor {
text-align:left;
width: 380px;
margin: 0 auto;
color:#515151;
font-weight: 600;
font-size: 16px;
box-shadow: 0 0 10px #bbb;
background: white;
padding:30px;
}
.contenedor, .contenedor input {
font-family: "Open Sans","Helvetica Neue", Helvetica, Arial, sans-serif;
}
#goog-wm .content{text-align: center}
#goog-fixurl ul {
list-style: none;
padding: 0;
margin: 0;
}
#goog-fixurl form {
margin: 0;
text-align: center;
}
#goog-wm-qt, #goog-wm-sb {
border: 1px solid #bbb;
font-size: 16px;
line-height: normal;
vertical-align: top;
color: #444;
border-radius: 2px;
}
#goog-wm-qt {
width: 220px;
height: 20px;
padding: 5px;
margin: 5px 10px 0 0;
box-shadow: inset 0 1px 1px #ccc;
}
#goog-wm-sb {
font-weight: bold;
display: inline-block;
height: 32px;
padding: 0 10px;
margin: 5px 0 0;
background-color: #f5f5f5;
}
#goog-wm-sb:hover, #goog-wm-sb:focus {
border-color: #aaa;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #f8f8f8;
}
#goog-wm-qt:focus, #goog-wm-sb:focus {
border-color: #105cb6;
outline: 0;
color: #222;
}
</style>
<div class="contenedor">
<h1>Error 404 <span>:(</span></h1>
<p>Maaf, halaman yang anda cari tidak ada.</p>
<p>Mungkin error:</p>
<script type='text/javascript'>
var GOOG_FIXURL_LANG = 'in';
var GOOG_FIXURL_SITE = 'location.host'
</script>
<script src='http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js' type='text/javascript'></script>
</div>
Master @vagabundia bereksperimen dengan melakukan penanaman kode di static pages, dibubuhi sentuhan JavaScript redirect, sehingga nanti akan tertuju ke sana :-bd usar error_page para crear páginas de error 404.
Bagaimana sobatku, bingungkan!!! :)) Intinya yaaa kalian harus tetap cemungut agal bial pandai menjadi ceolang mastel blogger :D
Happy error page \m/
Tidak ada komentar:
Posting Komentar