RO Crawler

Postado por 4luada, 15 de abril de 2012, às 02:32

0 Comentários

Este era para ser meu blog de Ragnarök Online. Claro que ele não vingou. Eu não tenho paciência para manter um blog, muito menos assunto. E algo que falta em mim é poder de conversação. Gosto de ser uma pessoa sucinta e direta, e com certeza não tenho muito o que falar. Não queria colocar builds, não desta vez. Mas nas páginas sobre cada personagem eu descrevia-o, contava sua história e tudo o que aprendi sobre a classe com ele.

Ele é bem simples, ainda mais se comparado a outros layouts que tenho feito (ou refeito) esses dias. E muito clean, sem muitas figuras por aí. E o destaque fica para a faixa de personagens. Tentei fazê-lo cinza metálico, mas ficou horrível. Talvez eu devesse fazê-lo uma cor única, mas ficaria meio... liso demais. Acabei chegando nessa versão e assim ficou.

Como extra para este layout, há apenas mais um título personalizado, além dos usados nas postagens.

Informações

Tema: Personagens
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:

RO_Crawler.rar

O arquivo está compactado em .rar, portanto requer Winzip, Winrar ou outro descompactador semelhante.

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.

Marcadores: Design, Ragnarok Online, Web Layouts

NightRO

Postado por 4luada, 14 de abril de 2012, às 02:27

0 Comentários

Esta é uma nova tentativa de se fazer um fansite de RO. Como sempre, por causa de todo o trabalho que um fansite atrai, desisti da idéia. Mas gostei muito do design. Ele foi criado em Novembro do ano passado, 2011.

Minha idéia inicial era fazer um tipo diferente de fansite, tendo meus personagens apresentando as informações num modo meio Role-Play. Um personagem iria conversar com o outro, coisas do tipo. Além disso, iria fazer guias para iniciantes, o que é bastante difícil de se encontrar por aí. Me lembro do desespero pelo que passei ao criar um personagem pela primeira vez e não saber como andar por aí. Acostumada com video-games e com experiência limitada com jogos online (CS e Gunbound apenas), tentei andar com as setas do teclado. Super Fail.

Para esse site, preferia um visual moderno, portanto, ao invés de usar os layouts já prontos, que eu já tinha feito, e como tenho quase um vício de fazer layouts de RO, acabei fazendo esse.

E de onde saiu o nome NightRO? A primeira coisa que decidi no layout é que usaria a figura da cidade de Comodo. E como está de noite da figura, por que não? E sempre achei engraçado o fato da palavra "Night", que significa noite em inglês, soar parecido com "Knight", cavaleiro em inglês. E abreviei para NitRO, que é mais interessante do que sem o 't' no meio. O problema é que muita gente vai ver o nome e pensar que é um Private Server. Não tenho a intenção de enganar ninguém, é apenas um nome simples e comum.

Claro que deixei arquivos fontes (.psd do Adobe Photoshop) para que você possa mudar o título da webpage e até a classe que aparece na imagem principal e na imagem ao final. Também deixei o arquivo fonte da imagem no topo do post, onde aparece o nome e o "avatar" do autor. Para aqueles que não têm Photoshop, há também a imagem padrão do post, onde não há figura de personagem nenhum.

No topo da página há duas bandeiras. Cada uma é um link. Você pode usá-las para ir a páginas traduzidas para outras línguas. Acho que isso seria interessante para um fansite de algo tão "internacionalmente" popular. Mas se não quiser, você pode remover todo o <div id="top"> e seu conteúdo.

Há também dois títulos personalizados para serem usados em páginas secundárias.

Informações

Tema: Noite em Comodo
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:

NightRO.rar

O arquivo está compactado em .rar, portanto requer Winzip, Winrar ou outro descompactador semelhante.

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.

Marcadores: Design, Ragnarok Online, Web Layouts

Light RO

Postado por 4luada, 13 de abril de 2012, às 02:14

0 Comentários

A idéia de fazer um fansite de RO é antiga. Sempre adorei fazer site de coisas que gosto, e com certeza, RO sempre foi um dos meus temas favoritos para webdesign. Contudo, o trabalho para se construir o conteúdo de um fansite é muito grande. Portanto, desisiti.

Esse layout é meio antigo na verdade, de 2009! A primeira versão era simples, com caixas no menu. Em 2010 eu fiz uma versão melhorada, que é essa, basicamente, apenas com algumas mudanças no código e no menu (que era pouco visível). Eu nunca pretendi usar esse layout. Fiz de feliz e para praticar.

O nome, LightRO, veio por causa dos brushes de raio que usei. "Light" é luz em inglês, mas a palavra "Lightning" ("raio" em inglês) vem de "Light". E achei interessante... "Luz", para dar uma luz para você. Eu poderia dizer que é para iluminar seu caminho, mas ia com um tom... religioso? Enfim, o nome pouco importa, e sim o conteúdo. Claro que o nome é importante, afinal é a "Capa" do site, mas na verdade não estou com idéias muito boas esses dias. Enfim, só espero que as pessoas olhem esse nome e pensem que é um servidor de RO.

Deixei o arquivo fonte da imagem principal (arquivo .psh, de photoshop) para aqueles que queiram mudar o título da página ou os links na imagem principal.. Também deixei o arquivo fonte do título dos posts para que se possa mudar a imagem do autor dos posts e o nome. E peço perdão aos que não usam photoshop. Mas para estes, deixo uma imagem padrão como imagem de título de posts.

Caso você não tenha a fonte do título, você pode procurá-la pela internet. Ela se chama 'Harrington'. Que eu me lembre ela é uma das fontes padrão que já vieram instaladas no Windows, mas nunca se sabe...

Para este layout há 3 títulos personalizados. Mas um deles é usado como título da caixa que personalizei. É apenas uma DIV com bordas e margem para se colocar um conteúdo em destaque.

Informações

Tema: Raios
Série: Ragnarök Online
Recursos: HTML (div), 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:

LightRO.rar

O arquivo está compactado em .rar, portanto requer Winzip, Winrar ou outro descompactador semelhante.

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.

Marcadores: Design, Ragnarok Online, Web Layouts

Summer Is All Around

Postado por 4luada, 12 de abril de 2012, às 02:00

0 Comentários

Voltando ao modo convencional de postagem. O diferencial deste design é o fato dele "esticar" horizontalmente de acordo com a largura da tela do visitante. Isso deu um pouco de trabalho e muitas pesquisas para aprender um pouco de Javascript para finalmente conseguir esse efeito. Eu quis fazer algo assim para que a visualização da página por celular ainda fosse confortável, já que eu ainda não sei nada de webdesign para aparelhos móveis. Digo "ainda" porque eu pretendo aprender!

PS: pensando bem, em telas enormes (principalmente aquelas da Apple), esse layout deve ficar largo até demais. Eu até poderia limitar a largura do site, mas quer saber? Espero que os usuários de telas gigantescas não se importem.

Esta é o terceiro design do tema Estações do Ano. Assim como os anteriores dessa série de designs, este tem o nome "Summer is all around", versão Fairy Summer. O que isso significa? Quem sabe eu faça novas versões com outros desenhos? O deste é do Natsu no topo e Elza, Lucy e Gray no final, todos personagens do mangá Fairy Tail, de Hiro Mashima. Nos outros designs do tema, usei um menu multi-level de pastas. Como achei que ele não ia combinar com este layout, procurei outra forma para fazer o menu de categorias. Gostei do resultado final.

Este layout demorou bastante para ficar pronto, principalmente por causa dos Javascripts, que tive que adaptar para este layout. Eu nunca havia mexido tanto em Javascript. Demorei 3 dias para terminar. É bastante tempo para um design relativamente simples.

Para este layout personalizei mais 3 títulos. Um deles, o H5, pode ser usado como título da caixa que personalizei para este layout.

Informações

Tema: Verão
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:

SummerIsAllAround.rar (4shared)

(Requer Winzip, Winrar ou outro descompactador semelhante).

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 Blogger Template

Copie o código abaixo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Link das fontes Google usadas pelo design -->
<link href='http://fonts.googleapis.com/css?family=Life+Savers:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>

<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>
/************************************************************************/
/*                                                                      */
/*    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.blogspot não se responsabiliza pelo conteúdo de sites que   */
/*          usam seus designs, templates ou gráficos diversos.          */
/*                                                                      */
/************************************************************************/


/************************************************************************/
/*                        Summer 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>


<!-- Título da Página -->
<title><$BlogTitle$></title>



<style type="text/css">
/* IMAGES - Mudar os endereços - Change the urls */
html, body {background-image:url('imgs/bg.gif');}
#header {background-image:url('imgs/top-bg.jpg');}
#header-img {background-image:url('imgs/natsu.png');}
#content h4 {background-image:url('imgs/fairytail-icon.png');}
#footer-img {background-image:url('imgs/lucy.png');}

html, body {
 width:100%;
 margin:0;
 color:#333;
 font-family: 'Roboto Slab', serif;
 font-size:1em;
}
h1, h2, h3, h4, h5 {
 cursor:default;
}
a {
 color:#115691;
 transition:color 1s;
  -webkit-transition:color 1s;
  -moz-transition:color 1s;
  -o-transition:color 1s;
 cursor:pointer;
}
a:hover {color:#FF8A00;}
h1 > a { color:inherit; text-decoration:none; }
code {
 font-size:1.3em;
}

/* major divs style */
#main-container,
#header,
#footer {
 position:relative;
 width:85%;
 margin:0 auto;
 border:6px solid #fff;
}

#main-container {
 border-top:none;
 border-bottom:none;
 margin-top:-5px;
 background:#FFF;
}

/* HEADER ****************************************************/
#header {
 height:169px;
 margin-top:20px;
 border-bottom:none;
 border-top-right-radius:20px;
 border-top-left-radius:20px;
 background-repeat:repeat-x;
}

#header-img {
 float:left;
 width:194px;
 height:164px;
 background-position:left top;
 background-repeat:no-repeat;
}

#header-title {
 width:100%;
 height:100%;
 position:absolute;
}
#header-title h1,
#header-title h2 {
 text-align:right;
 white-space:nowrap;
 transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -webkit-transform:rotate(7deg); /* Safari and Chrome */
}
#header-title h1 {
 margin:20px 10px 0 -13px;
 color:#20AEE9;
 font-family: 'Finger Paint', cursive;
 font-size:3.2em;
 font-weight:400;
 letter-spacing:-4px;
 line-height:35px;
 text-shadow:0 0 5px #fff,
  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;
}
#header-title h2 {
 margin:-5px 100px 0 0;
 color:#1D7EA6;
 font-family: 'Just Me Again Down Here', cursive;
 font-size:1.8em;
 text-shadow:0 0 5px #fff,
  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;
}

/* MENU ******************************************************/
#menu {
 float:left;
 width:200px;
 margin:3px 0 0 8px;
 font-family:Tahoma, Geneva, sans-serif;
}

.menu-section {
 margin-bottom:10px;
 padding-bottom:32px;
 border-radius:32px;
 background-color:#E2D5A0;
}

#menu h1 {
 margin:0 0 5px 0;
 padding:3px 0 3px 0;
 border-bottom:#FFF dotted 3px;
 color:#FFF;
 font-size:1.3em;
 text-align:center;
}

#menu a.expanded {background-color:#3C659D; color:#FFF;}
#menu a > b {float:right; padding:3px 3px; font-size:11px; font-weight:normal;}

.menu-section > a,
.menutree a {
 display:block;
 padding:3px 3px 3px 8px;
 border-bottom:#FFF solid 1px;
 color:#4C493D;
 text-decoration:none;
 transition:color .5s, background-color .5s;
  -webkit-transition:color .5s, background-color .5s;
  -moz-transition:color .5s, background-color .5s;
  -o-transition:color .5s, background-color .5s;
}
.menu-section > a:hover,
.menutree a:hover {background-color:#578DD6; color:#FFF;}

#menu p {
 margin:3px 10px;
 font-size:.8em;
}
#menu p:first-of-type {margin-top:10px;}
#menu p:last-child {margin-bottom:-5px;}

ul.menutree,
ul.menutree ul {
 margin:0;
 padding:0;
 list-style:none;
}
ul.menutree ul a {
 padding-left:20px !important;
 font-size:.9em;
}
ul.menutree a.all {
 border-bottom:#FFF solid 2px !important;
 background:#C6BB8C;
}

/* CONTENT ***************************************************/
#content {
 float:left;
 margin:-5px 0 0 15px;
 padding-bottom:20px;
 font-size:0.85em;
 text-align:justify;
}
#content h1 {
 margin-bottom:0;
 color:#138CBF;
 font-family: 'Life Savers', cursive;
 font-size:2.2em;
 text-shadow:1px 1px 0 #A3A3A3;
}
#content h2 {
 margin:0 0 15px 15px;
 color:#0D5F81;
 font-family: 'Life Savers', cursive;
 font-size:.9em;
 text-shadow:0 0 2px #fff;
}
#content h3 {
 margin:0 0 15px 0;
 color:#2F8FB7;
 font-family: 'Life Savers', cursive;
 font-size:2em;
 text-shadow:1px 1px 0 #A3A3A3;
 text-align:center;
}
#content h4 {
 margin:3px 0 0 0;
 padding:5px 0 0px 28px;
 background-position:center left;
 background-repeat:no-repeat;
 color:#1B7BA3;
 font-family: 'Life Savers', cursive;
 font-size:1.2em;
 text-decoration:underline;
}
#content h5 {
 margin:3px 0 8px 0;
 padding:0 0 3px 30px;
 border-bottom:#495D7B dotted 1px;
 color:#495D7B;
 font-family: 'Life Savers', cursive;
 font-size:18px;
 font-weight:bold;
}

/*coloca borda em todas as imagens - retire se preferir*/
#content img { border:2px #495D7B solid; } 

.box {
 margin:4px 20px;
 padding:4px 4px 4px 4px;
 border:2px #495D7B solid;
 background:#EFECE0;
}
.box p { margin-bottom:0; }
.box p:first-child{ margin-top:0; }
.box+.box { margin-top:20px; }

/* Posts */
.post-footer {
 margin-bottom:5px;
 padding:2px 15px 0 10px;
 font-family: 'Just Me Again Down Here', cursive;
 font-size:1.5em;
 font-weight:bold;
 text-align:right;
 border-bottom:3px double #627B9C;
}
.blogger-labels {
 margin:0;
 font-weight:400;
 float:left;
}
.post-footer a {
 text-decoration:none;
}

/* FOOTER ****************************************************/
#footer {
 height:165px;
 margin-bottom:20px;
 border-top:0;
 border-bottom-right-radius:20px;
 border-bottom-left-radius:20px;
 background-color:#578DD6;
}
#footer-img {
 position:absolute;
 right:0;
 width:175px;
 height:100%;
 border-bottom-right-radius:20px;
 background-position:bottom left;
 background-repeat:no-repeat;
}
#footer-msg {
 position:absolute;
 width:100%;
 height:100%;
 color:#3F618F;
 font-family: 'Just Me Again Down Here', cursive;
 font-size:1.3em;
 line-height:15px;
 text-shadow:0 0 5px #fff,
  1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}
#footer-msg div {
 padding:10px 0 0 50px;
}
#footer-msg p {
 cursor:default;
}
#footer-msg .sign {
 padding-left:150px;
}
 
/*Spacious Ugly Things: Gradients*/
#header-title {
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 59%, rgba(255,255,255,1) 89%, rgba(255,255,255,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(59%,rgba(255,255,255,0)), color-stop(89%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 59%,rgba(255,255,255,1) 89%,rgba(255,255,255,1) 100%);background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 59%,rgba(255,255,255,1) 89%,rgba(255,255,255,1) 100%);background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 59%,rgba(255,255,255,1) 89%,rgba(255,255,255,1) 100%);background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 59%,rgba(255,255,255,1) 89%,rgba(255,255,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
#footer-msg {
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC43MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(top,  rgba(255,255,255,0) 1%, rgba(255,255,255,0) 42%, rgba(255,255,255,0.72) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,0)), color-stop(42%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.72)));background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 1%,rgba(255,255,255,0) 42%,rgba(255,255,255,0.72) 100%);background: -o-linear-gradient(top,  rgba(255,255,255,0) 1%,rgba(255,255,255,0) 42%,rgba(255,255,255,0.72) 100%);background: -ms-linear-gradient(top,  rgba(255,255,255,0) 1%,rgba(255,255,255,0) 42%,rgba(255,255,255,0.72) 100%);background: linear-gradient(to bottom,  rgba(255,255,255,0) 1%,rgba(255,255,255,0) 42%,rgba(255,255,255,0.72) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#b8ffffff',GradientType=0 );
}
</style>

<script type="text/javascript">
var elementsWidth = {
 setWidths:function(){
  var current = $("#header").width();
  var margins = 8 + 15 + 10; //margin-left (menu) + margin-left (content) + margin-right (content)
  if(current < 500){
   $("#main-container, #header, #footer").css("width",500);
   this.current = 500;
  }
  else if(current > 1000){
   $("#main-container, #header, #footer").css("width",1000);
   this.current = 1000;
  }
  var newWidth = current-margins-$("#menu").width();
  $("#content").animate({width:newWidth});
 },
 init:function(){
  elementsWidth.setWidths();
  $(window).resize(function(){
   elementsWidth.setWidths();
  });
 }
}
var menuTree = {
 menuToggle:function(title){
  $(".menutree a").not(title).removeClass("expanded");
  $(".menutree a").not(title).next().hide("blind",{direction:"up"});
  $(".menutree a").not(title).children("b").text("+");
  $(title).toggleClass("expanded");
  $(title).next().toggle("blind",{direction:"up"});
  $(title).children("b").text(($(title).children("b").text() == "+")? "-" : "+");
 },
 init:function(){
  $(".menutree li ul").hide();
  $(".menutree li ul").prev().append($("<b></b>").text("+"));
  $(".menutree li ul").prev().on("click", function(){
   menuTree.menuToggle(this);
  });
 }
}
$(document).ready(function(){
 elementsWidth.init();
 menuTree.init();
});
</script>
</head>

<body>

<div id="header">
 <div id="header-img">
</div>
<div id="header-title">
    <!----------- INICIO TITULOS ----------------->
    <!--   O titulo principal da pagina fica    -->
    <!--  dentro de uma tag <h1>
 enquanto que o -->
    <!--    subtitulo fica dentro da tag <h2>
   -->
    <!-------------------------------------------->
   <h1>
<a href="<$BlogURL$>"><$BlogTitle$></a></h1>
<h2>
Version 3.3 - Summer Blogger</h2>
<!------------- Fim Titulos ------------------>
  </div>
</div>
<div id="main-container">
 <div id="menu">
  <!------------- INICIO MENU ------------------>
  <!-- Cada seção do menu deve ser envolvida  -->
  <!--     por uma tag <div>
 com a classe     -->
  <!--   "menu-section". Os links devem vir   -->
  <!--    a seguir, sem precisar usar <br />  -->
  <!-------------------------------------------->
  <div class="menu-section">
   <h1>
Principal</h1>
<a href="<$BlogURL$>">Home</a>
    <a href="javascript:extras.show()">Extras</a>
    <a href="http://4luada.blogspot.com.br/">4luada</a>
  </div>
<div class="menu-section">
   <h1>
Sobre Mim</h1>
<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>
<!-- Quando o conteudo de uma seção do menu é um texto, coloque-o numa tag <p>
-->
  </div>
<div class="menu-section">
    <h1>
<$I18NPreviousPosts$></h1>
<bloggerpreviousitems>
      <a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
    </BloggerPreviousItems>
  </div>
<div class="menu-section">
   <h1>
Categorias</h1>
<ul class="menutree">
<li><a href="">Categoria 1</a></li>
<li><a>Categoria 2</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>
<li><a href="" class="all">Todos Cat.2 (3)</a></li>
</ul>
</li>
<li><a href="">Categoria 3</a></li>
<li><a href="">Categoria 4</a></li>
<li><a>Categoria 5</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>
<li><a href="" class="all">Todos Cat.5 (4)</a></li>
</ul>
</li>
</ul>
</div>
<!-- Arquivos / Archives - NAO EDITAR / DO NOT EDIT -->
  <div class="menu-section">
    <mainorarchivepage>
    <h1>
<$I18NArchives$></h1>
<bloggerarchives>
      <a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
    </BloggerArchives>
    <archivepage>
      <a href="<$BlogURL$>"><$I18NCurrentPosts$></a>
    </ArchivePage>
    </MainOrArchivePage>
  </div>
<!-- Feeds -->
  <div class="menu-section">
    <h1>
Feeds</h1>
<p>
<$BlogFeedsVertical$></p>
</div>
<div class="menu-section">
   <h1>
Créditos</h1>
<p>
<b>Layout & Script:</b> <a href="http://4luada.blogspot.com.br/" target="_blank">4luada</a></p>
<p>
<b>Background:</b> <a href="http://vplace.atspace.com/index2.htm" target="_blank">Vicky's</a></p>
<p>
<b>Imagem:</b> <a href="http://animeslr.blogspot.com.br/p/fairy-tail.html" target="_blank">Crazy Animes</a></p>
</div>
<!--------------- Fim Menu ------------------->
  </div>
<div id="content">
  
   <!-- 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 -->
    <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>
<!-- 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>
    
    <!------------- Fim Conteudo ----------------->
  </div>
<br clear="all" />
</div>
<div id="footer">
 <div id="footer-img">
</div>
<div id="footer-msg">
   <div>
    <!------------ INICIO RODAPE ----------------->
    <!-- Você pode tanto deixar essa área vazia -->
    <!-- quando colocar links ou textos. Seja o -->
    <!-- que for, ele vai ser um texto azul com -->
    <!--            uma borda branca.           -->
    <!-- Você também pode usar a classe "sign"  -->
    <!--  para algo que você queira que fique   -->
    <!--        alinhado mais à direita.        -->
    <!-------------------------------------------->
    <p>
"Se você desistir no inverno,<br />
    perderá as promessas da primavera,<br />
    a beleza do verão,<br />
    e a expectativa do outono.<br />
    Portanto jamais desista dos seus sonhos."</p>
<p class="sign">
-- <a href="">Cleide Rebouças</a></p>
<!-------------- Fim Rodape ------------------>
    </div>
</div>
</div>

</body>
</html>

Cole na caixa Editar HTML do modelo.

Em seguida, faça download de das imagens:

SpringIsAllAround-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.

Marcadores: Design, Fairy Tail, Templates Blogger, Web Layouts

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

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

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

Dreams Come True (v.2)

Postado por 4luada, 9 de abril de 2012, às 21:00

0 Comentários

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. Depois de muito tempo, fiz essa terceira versão do layout. As cores são mais escuras e coloquei 3 das novas terceiras classes. Fiz uma "borda" cinza para a transição entre a imagem e o fundo cinza ficasse mais suave.

Como na terceira reforma do layout original, usei apenas DIVs e folha de estilo. Tive uns problemas ao adaptar para o blogger, mas nada que não pudesse ser resolvido. Mudei diversas coisas para deixar o código muito mais simples e fácil de se usar. Principalmente o conteúdo da sidebar (o menu lateral).

A idéia de mudar o layout dessa maneira, tirando as bordas, veio derrepente. Eu sempre achava ela feia, e no final, retirá-las foi uma boa. Pensei também em outras coisas, como fazer com que o menu principal horizontal fosse multi-level, cada link um drop-down. Acabei desistindo. Com o menu lateral, ia ficar tudo muito tumultuado, e haja conteúdo para preencher tanto menu. Mas fica a idéia. O DynamicDrive tem scrips que podem ser usados para criar um menu multi-level.

É até estranho não usar javascript depois de tanto tempo abusando deles. Na verdade, chega a ser um alívio. Faz tempo que não faço um layout simples assim.

Desta vez há duas versões do mesmo design. Eles são iguais exceto que a versão 3 tem limites laterais. A versão 2 não.


Versão 2.1 (sem limites)	Versão 2.2 (com limites laterais)

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: Classes 3
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 (versão 2.1):

Web Layout - ?? KB
Template Blogger (modelo clássico) - ?? KB

O arquivo está compactado em .rar, portanto requer Winzip, Winrar ou outro descompactador semelhante.

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 (versão 2.2):

Web Layout - ?? KB
Template Blogger (modelo clássico) - ?? KB

O arquivo está compactado em .rar, portanto requer Winzip, Winrar ou outro descompactador semelhante.

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.

Os arquivos estão compactados em .rar, portanto requer Winzip, Winrar ou outro descompactador semelhante.

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

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

Designs - Índice Visual

Postado por 4luada, 8 de abril de 2012, às 19:43


Dreams Come True v1.4	Dreams Come True v.2/v.3	Winter Is All Around


Spring Is All Around	Summer Is All Around	Light RO


Night RO	RO Crawler	RO Wedding Diary

RagnaröX Diary 2.0

Instalando Templates

Postado por 4luada, 7 de abril de 2012, às 19:16

Instruções Blogger/Blogspot

Faça download do arquivo Template Blogger disponibilizado anteriormente
Descompacte o arquivo
Se seu modelo for o moderno (assim que se cria um blog, o modelo é o moderno), siga os passos:
- Na interface atualizada: vá em MODELO e clique em "REVERTER PARA OS MODELOS CLÁSSICOS" e em "REVERTER PARA O MODELO CLÁSSICO".
- Na interface antiga: vá na aba "DESIGN", "EDITAR HTML" e em "MODELOS ANTIGOS", clique em "VOLTAR AO MODELO CLÁSSICO".
Agora, com o modelo clássico, para modificarmos o código:
- Na interface atualizada: vá em "MODELO".
- Na interface antiga: vá para a aba "MODELO" e em "EDITAR HTML".
Copie o código inteiro no arquivo "blogger.txt"
Cole na caixa "Editar HTML do modelo".
Hospede a imagem que você quer usar no topo, main.jpg ou altmain.jpg, no servidor de sua preferência (eu recomendo Photobucket e ImageShack). Copie o endereço da imagem que o servidor fornece.
No código do template, há uma indicação onde você deve colar o endereço da imagem. Substitua o que está entre o parênteses, 'main.jpg', e cole o endereço da imagem.
Clique no botão "SALVAR MODELO"! Pronto!

Instruções CSS (Webs)

Faça download do arquivo Template CSS (Webs) disponibilizado anteriormente
Descompacte o arquivo
No site do Webs.com, vá em "MODIFY TEMPLATE" e escolha o último modelo, chamado "Blank"
Ainda no assistente de personalização do template, vá em "ADVANCED CSS"
Copie todo o código no arquivo "css.txt"
Cole no espaço indicado
Hospede a imagem que você quer usar no topo, main.jpg ou altmain.jpg, no servidor de sua preferência (eu recomendo Photobucket e ImageShack). Copie o endereço da imagem que o servidor fornece.
No código, há uma indicação onde você deve colar o endereço da imagem. Substitua o que está entre o parênteses, 'main.jpg', e cole o endereço da imagem.
Clique no botão verde "SAVE" e pronto!

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

place of my happy thoughts

Marcadores

Arquivos

Minhas Páginas

Contador

Postado por 4luada, 15 de abril de 2012, às 02:32

Informações

Download:

Postado por 4luada, 14 de abril de 2012, às 02:27

Informações

Download:

Postado por 4luada, 13 de abril de 2012, às 02:14

Informações

Download:

Postado por 4luada, 12 de abril de 2012, às 02:00

Informações

Download HTML Design

Download Blogger Template

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

Informações

Download HTML Design

Download Blogger Template

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

Informações

Download HTML Design

Download Blogger Template

Postado por 4luada, 9 de abril de 2012, às 21:00

Informações

Download (versão 2.1):

Download (versão 2.2):

Postado por 4luada, 8 de abril de 2012, às 19:43

Postado por 4luada, 7 de abril de 2012, às 19:16

Instruções Blogger/Blogspot

Instruções CSS (Webs)

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

Informações

Download HTML Design

Download Blogger Template