Feliz dia ,venho partilhár um outro exemplo,modelo de pagina não encontrada.
Error 404 ,já antes trouxe uma outra partilha no qual pode visualizár online:ENTRE AQUI!
Como a imagem acima mostra é desta forma este novo modelo modifiquei algumas coisas,
como imagem hover ,cores,posição dos cabeçalhos e botões com hover.
Para instalar ,aplicár ao seu blog/template siga os passos aqui:ENTRE AQUI!!!
Aqui deixo o código abaixo, é só copiar e colar:::
Mas antes de tudo faça 1 cópia seu template/tema...
<style>
@import url('http://fonts.googleapis.com/css?family=Montez');
@import url(http://fonts.googleapis.com/css?family=Leckerli+One);
#pagina-error {
width:400px;
height: 300px;
text-align:center;
margin:20px auto;
margin-top:0px;
}
#pagina-error h1 {
font: normal normal 60px Montez;
color:#faa;
text-transform:uppercase;
-webkit-text-stroke:1px :#faa;
text-shadow:0px 1px 0 #faa,0px 2px 1px #faa,0px 3px 0 #000,0px 4px 0 #000,0px 5px 0 #000,0px 6px 0 #000,0px 7px 0 #000,0px 8px 1px #000,0px 9px 0 #000,0px 10px 0 #faa,0px 11px 0 #faa,0px 12px 1px #faa,0px 13px 0 #faa,0px 14px 0#faa,0px 15px 0 #faa;
letter-spacing:-0.02em;
}
#pagina-error h3 {
font: normal normal 60px Montez;
color:#faa;
-webkit-text-stroke:1px :#faa;
text-shadow:0px 1px 0 #faa,0px 2px 1px #faa,0px 3px 0 #000,0px 4px 0 #000,0px 5px 0 #000,0px 6px 0 #000,0px 7px 0 #000,0px 8px 1px #000,0px 9px 0 #000,0px 10px 0 #faa,0px 11px 0 #faa,0px 12px 1px #faa,0px 13px 0 #faa,0px 14px 0#faa,0px 15px 0 #faa;
letter-spacing:-0.02em;
}
#pagina-error p {
height: 2em;
background: #fcfcfc;
border-radius: .3em;
font-family: 'Leckerli One', cursive;
font-size:18px;
color:#000;
text-shadow:0px 1px 0 #faa,0px 2px 1px #faa,0px 3px 0 #faa;
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
margin-top:10px;
border:1px solid #000;
padding-top:10px;
}
#pagina-error a {
background: #fcfcfc;
border-radius: 6px;
font: normal normal 16px 'Leckerli One', cursive;
text-align:center;
color:#000;
text-shadow:0px 1px 0 #faa,0px 2px 1px #faa,0px 3px 0 #B0AA00;
margin-bottom:-50px;
border:1px solid #000;
border-bottom:2px solid #000;
padding: .6em 1em;
display: inline-block;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .2em;
position: relative;
overflow: hidden;
}
#pagina-error a:hover {
background: #666;
border-radius: 6px;
color:#fcfcfc;
text-shadow:0px 1px 0 #faa,0px 2px 1px #faa,0px 3px 0 #B0AA00;
border:1px solid #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .2em;
position: relative;
overflow: hidden;
}
#bad_image {
margin-top:-100px;
width:100px;
height:100px;
transition: background-image 1s ease-in-out;
background-image:url("http://i65.tinypic.com/2l8ucur.png");
}
#bad_image:hover {
background-image:url("http://i66.tinypic.com/2bo56w.png");
}
.status-msg-border { border: 0 none; }
.status-msg-bg { background-color: transparent; }
.status-msg-wrap a{padding:none;text-decoration:inherit}
</style>
<div id='pagina-error'>
<p>Oops...Desculpe página inválida...!</p>
<h1>404</h1>
<h3>ERROR</h3>
<div id="bad_image" class="shadow"></div>
<p>Escolha uma das opções abaixo...!</p>
<a href='#'>Back!</a>
<a href='#'>Home!</a>
</div>
Agora abaixo fica a nota de onde deve personalizár sua vontade gosto...
- <p>Oops...Desculpe página inválida...!</p> troque s palavras
- <h1>404</h1> troque s palavra
- <h3>ERROR</h3> troque s palavra
- <p>Escolha uma das opções abaixo...!</p> troque s palavras
- <a href='#'>Back!</a> troque s palavra e link#
- <a href='#'>Home!</a> troque s palavra e link #
- background-image:url("http://i65.tinypic.com/2l8ucur.png"); troque s imagem
- background-image:url("http://i66.tinypic.com/2bo56w.png");troque s imagem
Mostra SmilesOculta Smiles