Winter Is All Around

Postado por 4luada, 10 de abril de 2012, às 01:44

0 Comentários

Atualização (22/05): atualizei o layout de forma que não seja necessário usar o Photoshop para mudar o título do layout, além de ter feito um template para blog a partir do design.

O layout originalmente é de 2011, mas em 2012 recebeu uma leve reforma. Apenas uma mudança no título para deixar o layout mais público, de forma a permitir que outras pessoas possam utilizá-lo, e uma pequena formatação, principalmente nos títulos. Durante essa reforma, seria possível deixar o layout "esticável", como o do verão, mas preferi dexar assim mesmo para evitar a fadiga. Na verdade, o layout já é largo o bastante de modo que em telas widescreen, o conteúdo não fica tão no canto.

Este foi o começo de uma série de layouts com tema das estações do ano. Na verdade, só não cheguei a fazer o de outono, mas por enquanto, não pretendo fazê-lo.

Me recordo que minha intenção inicial era evitar usar uma figura de RO a todo o custo. Como podem ver, tive muito sucesso nisso. NOT! O problema é que descobri o website desse maravilhoso desenhista, que não só tem um lindo estilo SD, como também seus desenhos são bastante usados oficialmente. Lá encontrei esse lindo desenho de Royal Guard, e como as cores combinaram, ficou esse desenho. Mesmo que ele não combine muito com o tema de inverno (a barriga dela de fora deve estar congelando).

Este layout possui mais dois títulos personalizados para uso geral.

Informações

Tema: Inverno
Série: Ragnarök Online
Recursos: HTML (div), CSS, Javascript

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):

Download: WinterIsAllAround.rar

(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=Roboto+Slab&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

<script>
/************************************************************************/
/*                                                                      */
/*    FREE TEMPLATE CREATED BY 4LUADA: http://4luada.blogspot.com.br    */
/*  TEMPLATE GRATUITO CRIADO POR 4LUADA: http://4luada.blogspot.com.br  */
/*          Please, do NOT remove the credits (ANY of them)             */
/*           Favor não retirar os créditos (NENHUM deles!)              */
/*                                                                      */
/*       4luada não se responsabiliza pelo conteúdo de sites que        */
/*          usam seus designs, templates ou gráficos diversos.          */
/*                                                                      */
/************************************************************************/


/************************************************************************/
/*                        Winter is all Around                          */
/************************************************************************/
/*                                                                      */
/*                           TERMOS DE USO                              */
/*                                                                      */
/*  O uso é livre e gratuito. Não precisa nem avisar que vai usar o     */
/*  layout. E permito que mude o código e as figuras como quiser. Só    */
/*  peço que hospedem tudo vocês mesmos (inclusive as imagens) e para   */
/*  não retirarem os créditos (pode mudar seu local, no entando,        */
/*  desde que esteja visível). Também não disponibilize este ou         */
/*  qualquer outro recurso gráfico disponibilizados por 4luada, com     */
/*  excessão de se ter autorização escrita.                             */
/*                                                                      */
/************************************************************************/
</script>

<style type="text/css">
/* IMAGENS */
body { background:url('top_bg.jpg'); }
#container { background-image:url('top.jpg'); }
#menu li > a { background-image:url('file.gif'); }
#menu li.submenu > a.closed {
 background-image:url('folder-closed.gif'); }
#menu li.submenu > a { background-image:url('folder.gif'); }
#bottom { background-image:url('bottom.jpg'); }

/* NAO MODIFICAR DAQUI PRA FRENTE */
html {
 width:100%;
 height:100%;
 margin:30px 0 0 0; }
body {
 width:100%;
 margin:0;
 background-color:#FFF;
 background-position:top;
 background-repeat:repeat-x; }
#container {
 margin:0;
 width:1000px;
 padding:10px 0 0 0;
 background-position:top left;
 background-repeat:no-repeat; }

/* Titles */
#titles h1 {
 margin:20px 20px 10px 0;
 cursor:default;
 color:#7A9FAB;
 font-family: 'Roboto Slab', serif;
 font-size:48px;
 font-weight:400;
 text-align:right;
 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, 0 0 10px #fff; }
#titles h2 {
 margin:0 20px 0 0;
 cursor:default;
 color:#7A9FAB;
 font-family: 'Roboto Slab', serif;
 font-size:11px;
 font-weight:400;
 letter-spacing:1px;
 text-align:right;
 text-shadow:1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff; }
#titles h4 {
 text-align:right;
 margin:0 10px 0 0;
 cursor:default;
 color:#fff;
 font-family:Helvetica, sans-serif;
 font-size:10px;
 letter-spacing:2px;
 text-shadow:1px 1px 0 #5E8592, -1px 1px 0 #5E8592, 1px -1px 0 #5E8592, -1px -1px 0 #5E8592; }

/* Menu */
#menu {
 float:left;
 width:230px;
 padding:60px 12px 0 20px;
 font-family:Verdana, Geneva,sans-serif;
 font-size:12px; }
#menu h3 {
 margin:20px 0 5px 0;
 color:#7A9FAB;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:18px;
 font-weight:bold; }
#menu a {
 display:block;
 border-bottom:#333 thin dotted;
 padding:5px 0 5px 10px;
 cursor:pointer;
 color:#747B7D;
 text-decoration:none;
 transition: color 0.5s;
  -webkit-transition: color 0.5s; /* Safari */ }
#menu a:hover { color:#000; }
#menu p { margin:5px 0; }
#menu ul.categorias {
 margin:0;
 padding:0;
 list-style:none; }
#menu ul.categorias ul {
 padding-left:20px;
 list-style:none; }
#menu li > a {
 border-bottom:0;
 padding-left:18px;
 background-repeat:no-repeat;
 background-position:left center; }

/* Main */
#main {
 float:left;
 width:700px;
 margin-top:25px;
 border:4px solid #fff;
 border-radius:10px;
 padding:15px;
 background:#D2E8EE;
 box-shadow:0 0 15px #fff, 0 0 5px #fff inset;
 color:#3F4446;
 font-family:Tahoma, Geneva, sans-serif;
 font-size:13px;
 text-align:justify; }
#main a {
 color:#177691;
 transition: color 0.5s;
  -webkit-transition: color 0.5s; /* Safari */ }
#main a:hover { color:#009; }
.post-footer {
 padding:7px 0 5px 0;
 border-bottom:5px dotted #FFF;
 text-align:right;
 font-weight:bold; }
.post-footer a {
 color:#95B1BB;
 text-decoration:none; }
.post-footer a:hover { color:#71ADC0; }
#main h3 {
 margin:0 0 20px 0;
 padding:0 5px 10px 0px;
 color:#FFF;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:32px;
 font-weight:normal;
 text-align:right;
 text-shadow:1px 1px 0 #AFB8BA; }
#main h1, #main h1 a, #main h1 a:hover {
 margin:25px 0 0 0;
 color:#82AEBD;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:24px;
 font-weight:bold;
 text-decoration:none; }
#main h2 {
 margin:0;
 padding-left:10px;
 color:#747B7D;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:12px;
 font-weight:normal; }
#main h4 {
 margin:20px 0 0 0;
 padding-left:10px;
 color:#537b8b;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:18px; }
#main h5 {
 margin:0 0 0 0;
 color:#4b636c;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:14px;
 font-weight:bold; }
/* Coments **/
.formcomentarios dl dd { margin:10px 0 20px 20px; }
/* Bottom */
#bottom {
 width:100%;
 margin-top:-100px;
 padding-top:180px;
 height:70px;
 background-position:bottom left;
 background-repeat:repeat-x; }
#bottom h2 {
 width:975px;
 margin:0;
 cursor:default;
 color:#7A9FAB;
 font-family: 'Roboto Slab', serif;
 font-size:16px;
 font-weight:400;
 letter-spacing:2px;
 text-align:right;
 text-shadow:1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0 0 15px #fff; }
#bottom a {
 float:left;
 margin:0 0 0 20px;
 box-shadow:0 0 5px #fff;
 border-radius:10px;
 padding:5px 15px;
 background: rgb(255, 255, 255) transparent;
 background: rgba(255, 255, 255, 0.6);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C4E5E, endColorstr=#FFFFFF);/* IE 5.5 - 7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C4E5E, endColorstr=#FFFFFF)";/* IE 8 */
 color:#49A0BD; font-family:Verdana, Geneva, sans-serif; text-decoration:none; text-shadow:1px 1px 0 #fff; font-weight:bold;
 transition: color 0.5s; -webkit-transition: color 0.5s; /* Safari */ }
#bottom a:hover { color:#154858; }
</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">
/********************************************/
/* Script para a arvore multi-level do menu */
/* by 4luada                                */
/*   based on jQuery TreeView Menu (v1.4)   */
/*   from http://www.dynamicdrive.com/      */
/********************************************/
$(document).ready(function(){
 var credits="<h2>
Layout by 4luada © 2011</h2>
";
 credits += "<h2>
:: Winter :: version 1.3</h2>
";
 $("#bottom").append(credits);
 
 treeMenu.init();
 $(".submenu").on("click", function(){
  treeMenu.menuToggle(this);
 });
});

var treeMenu = {
 init:function(){
  $(".subtree").hide();
  $(".submenu a").addClass("closed");
 },
 menuToggle:function(subtreeTitle){
  $(subtreeTitle).children("a").toggleClass("closed");
  $(subtreeTitle).children(".subtree").toggle("blind");
 }
};
</script>


<title>Winter Is All Around</title>

</head>

<body>
<div id="container">
 <div id="titles">
  
  
  
   <!-- titulos no topo da pagina -->
    <h4>
Melhor vizualizado em Firefox, Chrome e Safari.</h4>
<h1>
Winter Is All Around</h1>
<h2>
O que acontece quando a neve derrete? Chega a primavera...</h2>
<h2>
--Fruits Basket</h2>
<!-- fim titulos no topo da pagina -->
    
    
    
  </div>
<div id="menu">



  <!-- Menu lateral - As tags H3 sao reservadas para os titulos dos menus -->
  <h3>
Menu</h3>
<a href="<$BlogURL$>">Home</a>
  <a href="">Link</a>
  <a href="">Link</a>
  
  <h3>
Sobre Mim</h3>
<p>
<b>Apelido:</b> 4luada</p>
<p>
<b>Idade:</b> 24 anos</p>
<p>
<b>Signo:</b> Libra, Dragão</p>
<p>
<b>Profissão:</b> estudante</p>
<p>
<b>Atividades:</b> softbol, livros, museus, flauta</p>
<h3>
<$I18NPreviousPosts$></h3>
<bloggerpreviousitems>
    <a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
  </BloggerPreviousItems>
  
  <h3>
Categorias</h3>
<ul class="categorias">
<li><a href="">Categoria 1</a></li>
<li class="submenu"><a>Categoria 2</a><ul class="subtree">
<li><a href="">Cat.2 - Link 1</a></li>
<li><a href="">Cat.2 - Link 2</a></li>
<li><a href="">Cat.2 - Link 3</a></li>
</ul>
</li>
<li><a href="">Categoria 3</a></li>
<li class="submenu"><a>Categoria 4</a><ul class="subtree">
<li><a href="">Cat.4 - Link 1</a></li>
<li><a href="">Cat.4 - Link 2</a></li>
<li><a href="">Cat.4 - Link 3</a></li>
</ul>
</li>
<li class="submenu"><a>Categoria 5</a><ul class="subtree">
<li><a href="">Cat.5 - Link 1</a></li>
<li><a href="">Cat.5 - Link 2</a></li>
<li><a href="">Cat.5 - Link 3</a></li>
</ul>
</li>
</ul>
<mainorarchivepage>
  <h3>
<$I18NArchives$></h3>
<bloggerarchives>
    <a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
  </BloggerArchives>
  <archivepage>
    <a href="<$BlogURL$>"><$I18NCurrentPosts$></a>
  </ArchivePage>
  </MainOrArchivePage>
  
  <h3>
Créditos</h3>
<a href="http://4luada.blogspot.com.br/" target="_blank">Layout: 4luada</a>
  <a href="http://kodama3.skr.jp/" target="_blank">Imagem: Yuichiro</a>
  <!-- fim Menu lateral -->



 <!-- Arquivos Inicio - NAO EDITAR -->
  
  <h3>
Arquivos</h3>
<a href="http://4luadaviewwinterisallaround.blogspot.com.br/2013_05_01_archive.html">Maio 2013</a>
  
  
  
  <!-- Arquivos Fim -->
  
  <h3>
Powered by</h3>
<a href="http://www.blogger.com" title="Powered by Blogger" style="text-align:center; border:none;"><img src="http://buttons.blogger.com/bloggerbutton1.gif" border="0" style="border:none;" /></a>
  
  </div>
<!-- end of MENU -->
  
  <div id="main">
  <!------------------------ Posts Inicio - NAO EDITAR ------------------------>
    
    
    <!-- Início Tags do Blogger  - Não mexer daqui pra frente -->
  
   <blogger>
     <a name="<$BlogItemNumber$>"></a>
        
      <!-- Post Title -->
      <blogitemtitle>
        <span style="float:right"><$BlogItemControl$></span>
        <h1>
<a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemTitle$></a></h1>
<h2>
Por <$I18NPostedByAuthorNickname$> - <$BlogItemDateTime$></h2>
</BlogItemTitle>
      
      <!-- Post Body -->
      <div class="post-text">
      <p>
<$BlogItemBody$></p>
<!-- Post Footer -->
      <div class="post-footer">
        <blogitemcommentsenabled>
          <a class="comment-link" style="float:right" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>>
           <$I18NNumComments$>
          </a>
        </BlogItemCommentsEnabled>
        <br clear="all" />
      </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>
    
    
    <!-------------------------- Posts Fim ------------------------->
<br clear="all" />
  </div>
<br clear="all" />
</div>
<div id="bottom">



 <!-- Links no final da pagina -->
 <a href="">Link</a>
  <a href="">Link</a>
  <a href="">Link</a>
 <!-- fim Links no final da pagina -->



</div>

</body>
</html>

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

WinterIsAllAround-imgs.rar (4shared)

(Requer Winzip, Winrar ou outro descompactador semelhante)

Hospede cada uma das imagens no servidor de sua preferência (eu recomendo Photobucket 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.

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

4luada's Place

place of my happy thoughts

Marcadores

Arquivos

Minhas Páginas

Contador

Winter Is All Around

Postado por 4luada, 10 de abril de 2012, às 01:44

0 Comentários

Informações

Download HTML Design

Download Blogger Template

0 Comentários

Postar um comentário