Dreams Come True (v.1)

Postado por 4luada, 6 de abril de 2012, às 17:31

0 Comentários

Atualização (08/06/2013): quarta reforma deste design. Pode-se observar uma notável diferença com o design original. Bordas arredondadas, um fundo com listras, fontes do Google Fonts (não funciona no IE - mas sinceramente, quem usa IE? Se você usa, não sabe o que está perdendo, pois os outros navegadores são muito mais rápidos e muito melhores em tudo). As mudanças se resumem a isso. Parece pouco, mas visualmente essas coisas fazem uma grande diferença, não é? Novamente deixo disponível duas imagens principais, uma com as personagens (sábia e professora) e outra sem. Para quem tiver curiosidade, eis a seguir as versões anteriores:

O design tem o tema "Dreams Come True", que simboliza o meu desejo de tornar a minha Sábia uma Professora! Havia figuras de Sábia e Professora com as cores dos cabelos azuir, a cor do cabelo da minha personagem. Acabei tirando elas porque estava pessoal demais. Entretanto, acabou ficando um negócio vazio demais. Mas não tenho mais idéias do quê colocar ali. Não consegui fazer nada que prestasse, então fica assim mesmo.

Desta vez (terceira reforma), não usei tabela, apenas DIVs e muito CSS. O CSS ficou muito mais incrementado, mas o código HTML ficou muito mais limpo. Mas ele funciona nos navegadores mais usados (testei em Chrome, IE, Firefox e Safari) atualizados.

Ao contrário dos outros layouts dos quais fiz remake, este aqui não refiz as figuras. Ou melhor, A figura. É só uma. Ela foi feita no Photoshop. Foi o segundo layout que fiz no photoshop. A figura foi a primeira coisa que fiz do layout. Foi uma péssima idéia. O ideal é já ter todo o layout já rascunhado de alguma maneira antes de começar criando figuras... Mas, como a própria criação deste site não estava prevista, não teve jeito. O pior é que criar um site a partir da figura é meio complicado... Mesmo já tendo as cores-bases para a página, é difícil fazer o resto combinar... O posicionamento, menus... Mas estou bastante satisfeita com o resultado. Não saiu tão horrível.

PS: fiz uma segunda figura como segunda opção. Ela reflete mais o sonho da minha sábia. Você pode conferir a seguir:

Este layout conta com um menu principal, com as seções do site, cada um com um sub-menu com links para sub-páginas. No final ficou algo bem estilo blog mesmo. xD Simples até demais pro meu gosto.

Para a versão em HTML, é possível retirar a sidebar. Para isso, basta deletar toda DIV "sidebar" e retirar a classe "wside" da DIV "content".

Informações

Tema: Juno
Série: Ragnarök Online
Recursos: HTML (divs), CSS

O uso é livre e gratuito. Não faço nem questão que me avise que vai usar o layout. Permito que mude o código e as figuras como desejar. MAS! As únicas coisas que peço é que tenha a decência de hospedar TUDO vocês mesmos, inclusive as imagens, e que não retirem os créditos, MESMO que tenham mudado alguma coisa.

Para se utilizar este layout, é necessário saber HTML básico, no mínimo, e se quiser fazer modificações no estilo, saber CSS básico. Mas apenas modifique o CSS se souber o que estiver fazendo, senão, evite mexer muito nele. Isso é importante, pois neste layout eu quase não deixei comentários.

Para que tudo funcione corretamente, você terá de hospedar tudo, inclusive as imagens, a folha de estilo e o javascript. Se usar servidor diferente para as imagens, não esqueça de modificar o endereço da imagem na folha de estilo.

Download HTML Design

Aceitando os termos de uso e satisfazendo as recomendações, faça o download desse design (link externo):

dreamscometrue-v1.4.rar (4shared)

(Requer Winzip, Winrar ou outro descompactador semelhante).

Para que tudo funcione corretamente, você terá de hospedar tudo, inclusive a imagem e a folha de estilo. Se usar servidor diferente para a imagem, não esqueça de modificar o endereço da imagem na folha de estilo.

Download Blogger Template

Copie o código abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Uncial+Antiqua' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=UnifrakturCook:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Germania+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lustria' rel='stylesheet' type='text/css'>

<style type="text/css">
@charset "utf-8";
body { background-image:url('bg.gif'); }
#header { background-image:url('top2.jpg'); }
#main { background-image:url('sidebar-bg.gif'); }

body {
 margin:50px 0;
 color:#333;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 text-align:justify;
}

body > div {
 width:800px;
 margin:0 auto;
 
}

a {
 color:#4A68AB;
}
a:hover {
 color:#365070;
}
img:not(.nb) {
 border:1px solid #485266;
}

* {
 transition: color 1s, background 1s, box-shadow 1s;
 -moz-transition: color 1s, background 1s, box-shadow 1s; /* Firefox 4 */
 -webkit-transition:color 1s, background 1s, box-shadow 1s; /* Safari and Chrome */
 -o-transition:color 1s, background 1s, box-shadow 1s; /* Opera */
}

h1 > a {
 color:inherit;
 text-decoration:none;
}
h1 > a:hover {
 color:#4FBFFF;
}

#header {
 position:relative;
 height:300px;
 border:5px solid #7987A7;
 border-bottom:none;
 border-radius:5px 5px 0 0;
 box-shadow:0 0 10px 1px #fff inset;
 background-repeat:no-repeat;
}
#header h1 {
 position:absolute;
 right:10px;
 bottom:42px;
 margin:0;
 color:#596A91;
 font-family: 'UnifrakturCook', cursive;
 font-size:54px;
 font-weight:700;
 text-shadow:1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff,
             2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,
       3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff,
       0 0 3px #fff, 0 5px 5px #333;
}
#header-links {
 text-align:right;
}
#header-links a {
 margin:0 7px;
 padding:5px 15px;
 border-radius:0 0 3px 3px;
 background:#7987A7;
 color:#FFF;
 font-family: 'Germania One', cursive;
 text-decoration:none;
}
#header-links a:hover { color:#3F4E71; }

#menu {
 height:40px;
 border:5px solid #7987A7;
 border-radius:0 0 5px 5px;
 background:#7987A7;
}
#menu a {
 float:left;
 display:block;
 margin:3px;
 padding:7px 12px 5px;
 border-radius:5px;
 color:#FFF;
 font-family: 'Germania One', cursive;
 font-size:18px;
 text-decoration:none;
 text-transform:uppercase;
}
#menu a:hover {
 color:#3F4E71;
 box-shadow:0 0 5px #4A5878 inset, 0 1px 0 #8693B2;
}

#main {
 margin-bottom:20px;
 border:5px solid #7987A7;
 border-radius:5px;
 margin-top:15px;
 background-color:#FFF;
 background-repeat:repeat-y;
 background-position:right;
}

#sidebar {
 float:right;
 width:190px;
 margin-right:10px;
 background:#7987A7;
}
#sidebar section {
 margin:10px;
 border:3px solid #566483;
 border-radius:5px;
 background:#C7C9CD;
}
#sidebar h1 {
 margin:0;
 padding:0 0 2px;
 background:#566483;
 color:#FFF;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:18px;
 font-weight:400;
 text-align:center;
 text-shadow:0 0 1px #fff;
}
#sidebar section > a {
 display:block;
 padding:5px;
 text-decoration:none;
}
#sidebar section > a:hover {
 background:#A3A5AA;
}
#sidebar section > a:last-child {
 border-radius:0 0 2px 2px;
}
#sidebar p {
 margin:0;
 padding:2px 5px;
 font-size:11px;
}

#content {
 float:left;
 width:560px;
 padding:15px;
}
#content :last-child {
 margin-bottom:0;
}
#content h1 {/*Titulo Post*/
 margin:0 0 0 15px;
 padding-top:20px;
 color:#677490;
 font-family: 'Uncial Antiqua', cursive;
 font-size:30px;
}
#content h1:first-of-type {
 padding-top:0;
}
#content h2 {/*Subtitulo Post*/
 margin:0 0 15px 40px;
 color:#475474;
 font-family: 'Uncial Antiqua', cursive;
 font-size:12px;
 font-weight:400;
}
#content h3 {/*Titulo Sub-página*/
 margin:5px 0 0 15px;
 color:#677490;
 font-family: 'Uncial Antiqua', cursive;
 font-size:20px;
}
#content h4 {/*Titulos secundários Post*/
 margin-left:10px;
}
#content h5 {/*Box Title*/
 margin:0 0 10px 0;
 padding:10px;
 border-bottom:2px dashed #7987A7;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:16px;
}
#content h5 > a { text-decoration:none; }
.post-footer {
 display:block;
 padding:0 5px 5px;
 border-bottom:1px dotted #7987A7;
 color:#7987A7;
 font-size:10px;
 font-weight:bold;
 text-align:right;
}
.blogger-labels {
 float:left;
 margin-top:-0px;
}

#footer {
 clear:both;
 background:#7987A7;
 padding:15px 0 10px;
 color:#FFF;
 font-family: 'Germania One', cursive;
 text-align:center;
}
#footer a {
 color:#C0D3F9;
}
#footer a:hover {
 color:#465471;
}

.box {
 margin:10px 10px 20px;
 border:2px solid #7987A7;
 border-radius:5px;
 background:#EEE;
}
.box p {
 padding-bottom:10px;
 margin:0 10px;
 font-size:12px;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".post-text").each(function(){
  $(this).children(".post-footer").prepend($(this).children(".blogger-labels").detach());
 });
});
</script>


  <!------------- TITULO DA PAGINA ------------->
  <title><$BlogTitle$></title>
    <!------------- TITULO DA PAGINA ------------->

</head>

<body>
<div id="header">
<div id="header-links">
    
    <!------------ INICIO LINKS TOPO ------------->
    <!--   Esses links ficam no topo da imagem  -->
    <!-- principal. Eles podem ser removidos,se -->
    <!-- quiser,sem que o layout sofra mudanças -->
    <!-------------------------------------------->
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
    <!-------------- Fim LINKS TOPO -------------->
    
</div>
    
    <!-------------- INICIO TITULO --------------->
    <!--   O titulo principal da pagina fica    -->
    <!--        dentro da uma tag <h1>.         -->
    <!-------------------------------------------->
    <h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1>
    <!---------------- Fim TITULO ---------------->
    
</div>
<div id="menu">

   <!--------------- INICIO MENU ---------------->
    <!--  Este é o menu principal horizontal.   -->
    <!-------------------------------------------->
   <a href="">Categoria</a>
    <a href="">Categoria</a>
    <a href="">Categoria</a>
    <a href="">Categoria</a>
    <!----------------- Fim MENU ----------------->

</div>
<div id="main">
<div id="sidebar">
    
    <!-------------- INICIO SIDEBAR -------------->
    <!--  Este é o menu seccundário, na barra   -->
    <!--  lateral. Cada "caixa" fica dentro de  -->
    <!-- tags <section>. O título de cada caixa -->
    <!--  é opctional, e ficam dentro de tags   -->
    <!--  <h1> enquanto que textos ou imagens   -->
    <!-- devem ser colocados dentro de tags <p> -->
    <!-------------------------------------------->
    <section>
      <h1>Menu</h1>
      <a href="<$BlogURL$>">Home</a>
      <a href="">Link</a>
      <a href="">Link</a>
    </section>
    
    <section>
      <h1>Recentes</h1>
      <BloggerPreviousItems>
        <a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
      </BloggerPreviousItems>
    </section>

    <section>
      <h1>Galeria</h1>
      <p align="center"><img src="dreamscometrue.jpg" width="140" /></p>
      <p align="center"><a href="">(Ver mais)</a></p>
    </section>
    
    <section>
      <h1>Sobre Mim</h1>
      <p><b>Apelido:</b> 4luada</p>
      <p><b>Idade:</b> 24 anos</p>
      <p><b>Ocupação:</b> estudante</p>
      <p><b>Signo:</b> Libra</p>
      <p><b>Blog:</b> <a href="">4luada.blogspot.com</a></p>
    </section>
    
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper convallis sollicitudin.</p>
    </section>

    <MainOrArchivePage>
    <section>
      <h1><$I18NArchives$></h1>
      <BloggerArchives>
        <a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
      </BloggerArchives>
      <ArchivePage>
        <a href="<$BlogURL$>"><$I18NCurrentPosts$></a>
      </ArchivePage>
    </section>
    </MainOrArchivePage>
    <!--------------- Fim SIDEBAR ---------------->
      
</div>
<div id="content">


  <!-- Início Tags do Blogger  - Não mexer daqui pra frente -->
    <Blogger>
    
    <a name="<$BlogItemNumber$>"></a>
    <!-- Post Title -->
    <BlogItemTitle>
      <h1><a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemTitle$></a></h1>
      <h2>Por <$I18NPostedByAuthorNickname$> - <$BlogItemDateTime$></h2>
    </BlogItemTitle>
    
    <div class="post-text">
        <!-- Post Body -->
        <p><$BlogItemBody$></p>
        <!-- Post Footer -->
        <div class="post-footer">
          <BlogItemCommentsEnabled>
            <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$I18NNumComments$></a>
          </BlogItemCommentsEnabled>
        </div>
    </div>
    
    <!-- Post Comment -->
    <ItemPage>
      <BlogItemCommentsEnabled>
        <a name="comments"></a>
        <h3 style="margin-top:30px"><$I18NNumComments$></h3>
        
        <div id="comments-block">
          <$CommentPager$>
          <BlogItemComments>
          
            <div class="box">
             <!-- comment title -->
              <h5 class="comment-data" id="<$BlogCommentAnchorName$>">
                <a name="<$BlogCommentAnchorName$>"></a>
                <$I18NAtCommentTimeWithPermalink$>,
                <$I18NCommentAuthorSaid$>
                <span style="float:right"><$BlogCommentDeleteIcon$></span>
              </h5>
              <!-- comment body -->
              <div class="comment-body">
                <p><$BlogCommentBody$></p>
              </div>
            </div>
            
          </BlogItemComments>
          <$CommentPager$>
        </div>
        
        <p class="comment-timestamp" style="margin:0; padding:0;">
          <$BlogItemCreate$>
        </p>
      </BlogItemCommentsEnabled>
      
      <div class="post-footer">
       <a href="<$BlogURL$>">Voltar à Página Inicial</a>
      </div>      
      </ItemPage>
      
   </Blogger>

</div>
<div id="footer">
  Design by <a href="http://4luada.blogspot.com.br/">4luada</a>. Ragnarök Online © <a href="http://levelupgames.uol.com.br/ragnarok/">Level Up! Games</a>.
</div>
</div>
</body>
</html>

Cole na caixa Editar HTML do modelo. Em seguida, faça download das imagens:

dreamscometrue-v1.4-imgs.rar

(Requer Winzip, Winrar ou outro descompactador semelhante)

Hospede cada uma das imagens no servidor de sua preferência (eu recomendoPhotobucket e ImageShack). Copie os endereços das imagens que o servidor fornece. No código, há uma indicação onde você deve colar os endereços das imagens, logo no início da estilização.

Você pode ver como se instala um template neste post.

Marcadores: Design, Ragnarok Online, Templates Blogger, Web Layouts

4luada's Place

place of my happy thoughts

Marcadores

Arquivos

Minhas Páginas

Contador

Dreams Come True (v.1)

Postado por 4luada, 6 de abril de 2012, às 17:31

0 Comentários

Informações

Download HTML Design

Download Blogger Template

0 Comentários

Postar um comentário