Spring Is All Around

Postado por 4luada, 11 de abril de 2012, às 01:58

0 Comentários

Atualização (25/05/2013): atualizei o layout de modo que o título não fizesse parte da imagem, mas sim, fosse uma tag de título. Também fiz um template para blog a partir desde design.

Postagem tipo caixa! Na verdade as caixas tinham um fundo atrás do título bem mais enfeitado, mas tava muito saturado, então fiz essa versão mais simples. Eu até tentei ver como ficava sem fundo nenhum, mas ficou estranho.

Enfim, este é o segundo Design da série de estações do ano! Achei que ela ficou bem brega com tanto rosa. Não foi à toa que foi a época em que menos postei. Mas a mudança foi boa para organizar os arquivos do site.

Eu havia planejado usar uma imagem do Loki do mangá de Fairy Tail, mas ele não combinava muito com rosa, então decidi usar essa imagem do Happy com a cabeça da Lucy que achei fofinho. Essa imagem era do segundo capítulo especial de Fairy Tail, "Mira-sensei's transformation magic lesson".

Este layout foi usado por um tempo pela minha homepage, então para adaptá-la para uso geral, apenas modifiquei o título para "Spring is all around", seguindo o título do design de inverno.

Como extras do layout, fiz uma caixa personalizada (diferente da caixa de posts) que pode ter um título ou não. Ela tem um coração no fundo, num canto, mas que não atrapalha a leitura. Há também mais 3 títulos personalizados (além dos usados nas postagens), sendo um deles usado nas caixas.

Informações

Tema: Primavera
Série: Fairy Tail
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:

SpringIsAllAround.rar (4shared)

(Requer Winzip, Winrar ou outro descompactador semelhante).

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" />
<title>Spring Is All Around</title>

<link href='http://fonts.googleapis.com/css?family=Copse' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marck+Script' 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.          */
/*                                                                      */
/************************************************************************/


/************************************************************************/
/*                        Spring is all Around                          */
/************************************************************************/
/*                                                                      */
/*                           TERMOS DE USO                              */
/*                                                                      */
/*  O uso é livre e gratuito. Não precisa nem avisar que vai usar o     */
/*  template. 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">
/* IMAGES - Mudar os endereços - Change the urls */
#container {background-image:url('top.jpg');}
.categorias li > a {background-image:url('file.gif');}
.categorias li.submenu > a {background-image:url('folder.gif');}
.categorias li a.closed {background-image:url('folder-closed.gif');}
#main h1 {background-image:url('post-title-bg.png');}
.post-title {background-image:url('post-bg.png');}
.box {background-image:url('box_bg.jpg');}

/* LAYOUT */
html {margin-top:35px;}
body {background-color:#FFF; font-size:0.8em;}
h1, h2, h4, h5 {cursor:default; text-decoration:none !important;}
h3 {cursor:default;}
a{
 cursor:pointer;
 color:#804DA7;
 transition:color 0.5s; }
a:hover { color:#8F00F7; }
#container {
 position:relative; width:999px; margin:0 auto; padding-top:25px;
 background-color:#F3E0FE;
  background-repeat:no-repeat;
  background-position:top center, bottom-center;
 box-shadow:0 0 10px 10px #fff inset; }

/* FOOTER */
#footer {
 clear:both;
 position:relative;
 margin:20px; }
#footer h1 {
 margin:0 0 -20px -20px;
 color:#FFF;
 font-family: 'Copse', serif;
 font-size:4.5em;
 text-align:left;
 text-shadow:0 0 3px #fff, 0 0 2px #fff, 0 0 4px #fff; }
 
/* HEADER */
#titles h1 {
 margin:0 50px;
 color:#fff; font-family: 'Copse', serif; font-size:4.5em; text-align:right;
 text-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000,
  1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
  2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000; }
#titles h2 {
 float:right; margin:0; padding:5px 0 0 0;
 color:#fff;
 font-family: 'Copse', serif;
 font-size:1.7em;
 font-weight:500;
 text-align:right;
 text-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000,
  1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;}
#titles-quote {
 float:right; width:260px; padding:5px 50px; cursor:default;
 font-family:'Marck Script', cursive;
 text-align:right; }
#titles-quote p {margin:0; color:#AD7FD0;}

/* MENU */
#menu {
 float:left; width:220px; margin:0 0 0 30px;
 color:#000;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size:1.12em; }
#menu h3 {
 margin:15px 0 5px 0;
 color:#AC7FD0;
 font-family:Georgia,"Times New Roman",Times, serif;
 font-size:1.3em; }
#menu h3:first-child { margin:0px 0 5px 0; }
#menu a {
 display:block; margin-left:8px; padding:4px 0 4px 0;
 border-bottom:#333 thin dotted;
 color:#666;
 text-decoration:none;
}
#menu a:hover {color:#C3F;}
#menu ul.categorias {margin:0 0 3px 0; padding:0; list-style:none;}
#menu ul.categorias ul {padding-left:20px; list-style:none;}
#menu ul.categorias li {padding:1px 0 1px 0;}
#menu ul.categorias li > a {border-bottom:none; padding:0 0 0 18px; background-repeat:no-repeat; background-position:left center;}
#menu p { font-size:.8em; }
#menu p a { margin-left:0; border-bottom:0; padding:0; display:inline; }
#menu p.creditos {margin:0;}

/* MAIN */
#main {
 float:left; width:699px; margin:5px 30px 25px 20px;
 color:#333;
 font-family:Verdana, Geneva, sans-serif;
 text-align:justify;}
#main h1 { /*Título do Post - Post Title*/
 margin:0; padding:8px 10px 0 16px; background-position:left bottom; background-repeat:no-repeat;
 color:#71399E;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size:36px;}
#main h2 { /*Autor e data do post - Post Author and Date */
 margin:3px 10px 10px 35px;
 color:#62437A;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size:13px;
 font-weight:normal;}
#main h3 {/*Título da seção de Comentários - Comments Section Title*/
 margin:0;
 color:#AD7FD0;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:26px;
 font-weight:normal;
 text-decoration:underline;}
#main h4 {/*Título Secundário - Posts Subtitle*/
 margin:20px 0 0 0; padding-left:10px;
 color:#5F228D;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size:18px;}
#main h5 {/*Título de comentários - Comments titles*/
 display:block; margin:0 0 2px 0; border:2px solid #743E9B; padding:0 0 0 4px; background:#9F80B7;
 color:#FFF;
 font-family:"Palatino Linotype","Book Antiqua",Palatino,serif;
 font-size:15px;}
#main img {
 border:2px solid #743E9B;
 padding:1px;
 background:#FFF;}
#main .post-text {
 margin-left:10px; margin-right:10px;
 font-size:.9em;}
#main textarea { margin-left:10px; margin-right:10px; }

/* POSTS */
.post {width:700px; margin:25px 0 0 0; border:#AD7FD0 solid 1px; background:#FFF;}
.post:first-child {margin:0px 10px 0 0; }
.post-title {background-color:#DCCBEB; background-position:bottom; background-repeat:repeat-x;}
.post-title a {text-decoration:none;}
.post-footer {
 margin:15px 0 10px 0; border:#AD7FD0 solid 1px; padding:2px 10px 2px 10px; background:#D9AEF7;
 color:#804DA7;
 font-weight:bold;}
.post-footer *{margin:0; padding:0;}
.post-footer a {
 text-decoration:none;
 font-weight:normal;}
.post-footer a:hover {
 color:#FFF !important;
}
.blogger-labels {float:left;}
.comment-link {float:right; font-weight:bold !important;}
/* COMMENTS */
.box {
 margin:10px 30px; border:3px #8243B1 solid; padding:5px;
 background-color:#F4EEF8;
  background-position:bottom right;
  background-repeat:no-repeat;
 font-size:1em;}
#main h5 a {
 color:#EDE6F3;
 text-decoration:none;}
#main h5 a:hover {
 color:#8341BE;}
#main h5 img {margin-top:5px;}
</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 o layout Spring Is All Around */
/* by 4luada                                 */
/*   Menu Multi-level is                     */
/*   based on jQuery TreeView Menu (v1.4)    */
/*   from http://www.dynamicdrive.com/       */
/*********************************************/
$(document).ready(function(){
 $("#footer").append($("<h1></h1>").text("design by 4luada - Primavera 1.3"));
 $(".post-text").each(function(){
  $(this).children(".post-footer").prepend($(this).children(".blogger-labels").detach());
 });
 treeMenu.init();
 $(".submenu").on("click", function(){
  treeMenu.menuToggle(this);
 });
});
var treeMenu = {
 init:function(){
  $(".submenu ul").hide();
  $(".submenu a").addClass("closed");
 },
 menuToggle:function(subtreeTitle){
  $(subtreeTitle).children("a").toggleClass("closed");
  $(subtreeTitle).children("ul").toggle("blind");
 }
};
</script>
</head>

<body>
<div id="container">
<div id="titles">



<!-- TITULOS DA PAGINA -->

  <!--  Titulo da Pagina / Title of the page -->
  <h1><$BlogTitle$></h1>
  <!-- Uma citação ou descrição da página / A quotation or description of the page -->
  <div id="titles-quote">
    "It's Spring Fever. (...)<br />
    you don't quite know what it is you want,<br />
    but it just fairly makes your heart ache,<br />
    you want it so!"
    <p>-- Mark Twain</p>
  </div>
  <!-- Pequeno subtítulo / Short subtitle -->
  <h2>Versão 1.3 - Primavera</h2>

<!-- fim TITULOS DA PAGINA -->




<br clear="all" />
</div>
<div id="menu">




<!-- MENU LATERAL -->

 <!-- Perfil / Profile -->
  <h3>Sobre Mim</h3>
  <p>Olá, Meu nome é 4luada. Nasci em São Paulo há tantos anos atrás. Adoro ler livros, principalmente de romance ou de ficção e aventura.</p>
 
  <!-- Links Principais / Main links -->
  <h3>Principal</h3>
  <a href="<$BlogURL$>">Home</a>
  <a href="">Link</a>
  <a href="">Link</a>
  <a href="">Link</a>
  
  <!-- Posts Recentes / Recent posts -->
  <h3><$I18NPreviousPosts$></h3>
  <BloggerPreviousItems>
    <a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
  </BloggerPreviousItems>
  
  <!-- Árvore de categorias / Categories tree -->
  <h3>Categorias</h3>
  <ul class="categorias">
  <li><a href="">Categoria 1 (0)</a></li>
  <li class="submenu"><a>Categoria 2 (3)</a>
    <ul>
    <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 (1)</a></li>
  <li class="submenu"><a>Categoria 4 (2)</a>
    <ul>
    <li><a href="">Cat.4 - Link 1</a></li>
    <li><a href="">Cat.4 - Link 2</a></li>
    </ul></li>
  <li class="submenu"><a>Categoria 5 (4)</a>
    <ul>
    <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>
    <li><a href="">Cat.5 - Link 4</a></li>
    </ul></li>
  </ul>
  
  <!-- Arquivos / Archives - NAO EDITAR / DO NOT EDIT -->
  <MainOrArchivePage>
  <h3><$I18NArchives$></h3>
  <BloggerArchives>
    <a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
  </BloggerArchives>
  <ArchivePage>
    <a href="<$BlogURL$>"><$I18NCurrentPosts$></a>
  </ArchivePage>
  </MainOrArchivePage>
  
  <!-- Feeds -->
  <h3>Feeds</h3>
  <p><$BlogFeedsVertical$></p>

<!-- fim MENU LATERAL -->




<!-- NAO EDITAR DAQUI PRA FRENTE -->
<!-- NAO EDITAR DAQUI PRA FRENTE -->
<!-- NAO EDITAR DAQUI PRA FRENTE -->
<!-- NAO EDITAR DAQUI PRA FRENTE -->
<!-- NAO EDITAR DAQUI PRA FRENTE -->

<h3>Créditos</h3><p class="créditos">Layout & scripts: <a href="http://4luada.blogspot.com.br/" class="nbl">4luada</a><br />Imagem: <a href="http://www.mangatraders.com/" class="nbl">MangaTraders</a><br />Brushes: <a href="http://yanagi-san.deviantart.com/art/Yanagi-Love-Brushes-32178317" class="nbl">Yanagi-san</a>, <a href="http://www.obsidiandawn.com" class="nbl">Obsidian Dawn</a></p>
<h3>Powered by</h3><a href="http://www.blogger.com" title="Powered by Blogger" style="margin:0 0 0 10px; border:none;"><img src="http://buttons.blogger.com/bloggerbutton1.gif" border="0" style="border:none;" /></a>
</div>
<div id="main">

<!-- TAGS DO BLOGGER -->

<Blogger>
<!-- POST -->
<div class="post">

  <!-- post anchor -->
  <a name="<$BlogItemNumber$>"></a>
  <!-- post title -->
  <div class="post-title">
   <BlogItemTitle>
   <BlogItemUrl><a href="< $BlogItemURL$>"></BlogItemUrl><h1><$BlogItemTitle$><span style="float:right"><$BlogItemControl$></span></h1><BlogItemUrl></a></BlogItemUrl>
   </BlogItemTitle>
    <!-- Edit icon -->
    <!-- post sign: author @ date/time -->
   <h2>Por <$I18NPostedByAuthorNickname$> @ <$BlogItemDateTime$></h2>
  </div>
  <!-- post body -->
  <div class="post-text">
    <p><$BlogItemBody$></p>
    <div class="post-footer">
      <BlogItemCommentsEnabled>
        <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$I18NNumComments$></a>
      </BlogItemCommentsEnabled>
      <br clear="all" />
  </div>
  </div>
</div>
<!-- end POST -->

<!-- COMMENT AREA -->
<ItemPage>
<BlogItemCommentsEnabled>
 <a name="comments"></a>
  <h3 style="margin-top:30px"><$I18NNumComments$>:</h3>
  
  <div id="comments-block">
    <$CommentPager$>
    <BlogItemComments>
      <!-- comment title -->
      <div class="box">
        <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>

<p style="margin:20px 0 0 0;padding-left:20px;"><a href="<$BlogURL$>"><< Voltar ao <$I18NHome$></a></p>

</ItemPage>
<!-- fim COMMENT AREA -->

</Blogger>
<!-- fim TAGS DO BLOGGER / POSTS -->

</div>
<div id="footer"></div>
</div>
</body>
</html>

Cole na caixa Editar HTML do modelo. Faça download de das imagens:

SpringIsAllAround-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, Fairy Tail, Templates Blogger, Web Layouts

4luada's Place

place of my happy thoughts

Marcadores

Arquivos

Minhas Páginas

Contador

Spring Is All Around

Postado por 4luada, 11 de abril de 2012, às 01:58

0 Comentários

Informações

Download HTML Design

Download Blogger Template

0 Comentários

Postar um comentário