09 março 2014

Lay Free Candy Girl

| |
Este layout free contém praticamente tudo que tem no Blue Rose, o que muda é a paleta de cores, o brushe de cabeçalho, alguns efeitos, o leia mais e eu acho que só, de resto é igualzinho até os créditos dos blogs dos quais eu utilizei tutoriais, por fala nisso eu peço pra que não tirem nada deles e me desculpem se são muitos, haha. É que eu realmente não manjo muitos dos HTML então eu acabo usando tutoriais de todo tipo, por mais bestas que sejam :v Ah e sobre o nivelamento, eu usei desse tipo como demonstração mas se alguém quiser fazer igual ao do Wonder eu não ligo. Pra esse, a imagem de início que eu usei o tamanho 625x100 que eu achei ser o ideal mas o que eu uso no Wonder é 100x260 que pra mim é o ideal, dá pra colocar quatro postagens na pag. principal usando esse de agora e cinco usando o da imagem no canto, eu falo o resto depois do leia-mais que é super fofinho e pra ficar certinho escreva 9 linhas aqui ou dez se quiser completar direito.

Negrito / Itálico / Sublinhado / Riscado
Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote Blockquote
Para organizar os gadgets:
Se quiserem colocar essa imagem mesmo como cabeçalho é só colocar isso no primeiro gadget. Eu recomendo colocar junto com a imagem de welcome. Vou fazer uma coisa melhor e vou deixar aqui já o código todo, ai fica mais fácil pra vocês:
Welcome - Cabeçalho
<div style="position: absolute; margin-top: -493px; left: -15px;"><img src="http://i1328.photobucket.com/albums/w539/NekoGiih/Brushe583EDT_zps996c5b2c.png" /></div>

Imagem e mensagem.
<title="Welcome!"><img src="http://i1328.photobucket.com/albums/w539/NekoGiih/IlustCandy01_zpsddbf1c0b.png" width="270" /></title="welcome!">
<center>SUA MENSAGEM DE WELCOME</center>
As partes em itálico são das imagens. Mudem se não quiserem essas que estão aqui.
E da imagem do cabeçalho, os valores que estão em negrito é a posição da imagem, se mudarem a imagem no cabeçalho mudem os valores. Eu recomendo a imagem ser na largura 310px, se bem que eu recomendo não mudar porque pode acabar que a imagem seja muito pequena e tenha que mudar a altura da sidebar ai... meus caros, vocês se viram :v
Menu deslizante.
<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Créditos</a> |
<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> |
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center>
<div id="rabbit" style="display:none">
Não retirem nada dos créditos.
<br />
Design por: Neko - <a href="http://letswondering.blogspot.com">Wonder</a><br />
Tutoriais: IIRTW - OTAI - CB - SMP - GC - GeD - BC - Bunny C. - KW - AN - FB - C&C - EAHTML - CE - TM - TpM - OS - JP - HC - AHTML - Imaginarium.
</div>
<div id="dog" style="display:none">
Conteúdo do menu deslizante 2
</div>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 3
</div>
Os créditos estão na primeira aba do menu deslizante, não tirem nada mas podem mudar de lugar, se quiserem colocar em uma página ou em outro gadget.
Perfil do autor:
<img src="http://i1328.photobucket.com/albums/w539/NekoGiih/IlustCandyGirl01_zps1ad9b7e6.png" style="width: 50px; float: left; margin: 0px 3px 3px 0px;"; />Aqui vocês colocam uma descrição de vocês mesmos(as), tentem não fazer muito grande se querem que fique do tamanho exato da imagem, acho que com a fotinho do lado fica super fofo, não? Aqui vocês colocam uma descrição de vocês mesmos(as), tentem não fazer muito grande se querem que fique do tamanho exato da imagem. 7 linhas pra dar certo!
<br />
<br />
Esse é o código que está ali no gadget, igualzinho, a imagem e tudo. Podem mudar a vontade.
Agora vou colocar a imagem dos afiliados que é um pouquinho mais complicado porque deve ser colocado cada imagem separada, vou colocar aqui o código com a imagem que está agora. Se quiserem fazer vocês mesmos eu recomendo usar o PhotoScape para separarem usando o "divisão".
<div class="efeito">
<a href="LINK_DO_BLOG" title="Nome do blog"><img class="painel" src="http://i1328.photobucket.com/albums/w539/NekoGiih/PainelCandyRose_001_zps269d541b.png" /></a>
<a href="LINK_DO_BLOG" title="Nome do blog"><img class="painel" src="http://i1328.photobucket.com/albums/w539/NekoGiih/PainelCandyRose_002_zps42e51ead.png" /></a>
<a href="LINK_DO_BLOG" title="Nome do blog"><img class="painel" src="http://i1328.photobucket.com/albums/w539/NekoGiih/PainelCandyRose_003_zpsd32b75a2.png" /></a>
<a href="LINK_DO_BLOG" title="Nome do blog"><img class="painel" src="http://i1328.photobucket.com/albums/w539/NekoGiih/PainelCandyRose_004_zpsfcf5f5e7.png" /></a>
<a href="LINK_DO_BLOG" title="Nome do blog"><img class="painel" src="http://i1328.photobucket.com/albums/w539/NekoGiih/PainelCandyRose_005_zpsf02df9f7.png" /></a>
<a href="LINK_DO_BLOG" title="Nome do blog"><img class="painel" src="http://i1328.photobucket.com/albums/w539/NekoGiih/PainelCandyRose_006_zps70625df7.png" /></a>
</div>
Eu recomendo que vocês usem a imagem dividida de lado mesmo porque pra mim, quando eu uso outro tipo de divisão, fica bugado e eu não consigo arrumar. Enfim, se os valores das imagens de vocês forem diferentes desses (esse é 47x200) vocês devem procurar o código do efeito acima de ]]></b:skin>, procurem pelo código que começa por .painel{ e alterem o valor das imagens.
Agora para arrumar o último gadget, que é o das tags. Esse é o código que já está com a caixa de pesquisa.
<center>
<div class='lado-esquerdo'>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
</div>
<div class='lado-direito'>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
</div>
</center>
<br />
<center> Coloque aqui uma pequena mensagem para não deixar muito junto, mas se não quiserem apenas deixem os br's para separar.<br /><br /></center>
<center><form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='' type="text" value="Digite o que procura" /> </form></center><br />
O que está em itálico é o código da caixa de pesquisa, se quiserem mudar de lugar ela.
Agora vamos falar do menu do topo, ele deve ser colocado acima das postagens:
Para alterar o lugar dele na barrinha deve ir novamente em ]]></b:skin> e procurar por Menus HEAVEN (está logo acima) e alterar o margin-left. O resto é no próprio gadget. Aqui o código. Alterem apenas o necessário.
<div style="background: rgba(255, 255, 255, 0.65); top: 0px; left: 0px; width: 100%; height: 42px; z-index: 100; position: fixed;"><div id="margin"><a href="/" title="Titulo"><div class="menuoneexclusive">Home</div></a><a href="/" title="Titulo"> <div class="menuexclusive">About</div></a> <a href="/" title="Titulo"><div class="menuexclusive">ASK</div></a> <a href="/" title="Titulo"><div class="menuexclusive">Tutoriais</div></a> <a href="/" title="Titulo"><div class="menuexclusive">Free</div></a> <a href="/" title="Titulo"><div class="menuexclusive">Créditos</div></a></div></div>
Bem, acho que é isso. Eu tentei deixar o mais explicado possível, mesmo sabendo que as vezes o arquivo XML quando colocado ele já arruma os gadgets mas nem sempre, as vezes vem uma bagunça então eu tentei deixar bem explicadinho. Qualquer dúvida me perguntem pelos comentários no post do Wonder ou pela Ask, eu vou tentar ajudar vocês :3

É isso! Obrigada a quem usar :)
PS: se forem usar me mandem o link dos blogs de vocês para eu ver como ficou. E se tiverem dúvidas não hesitem em me perguntar! Estou até com medo de vocês não entenderem algo, haha.

Nenhum comentário:

Postar um comentário

Observação: somente um membro deste blog pode postar um comentário.