Layout Free: Lovely Rabbit

Yooo bunnys!!! Venho trazer mais um layout free, sei que a maioria gosta de fazer seus próprios layouts, mas sempre tem aqueles precisa de um layout free de ultima hora, como hoje estou com o humor lááááá em cima, sem me importar com os avisos de erro do computador dando muita cacetada nele e ouvindo hyunna festejando uma novidade mara, claro que não vou dizer ainda. Primeiro quero ter certeza se vai acontecer mesmo. Esse layout foi o que fico menos tempo aqui no blog o chamei de "Lovely Rabbit". Acho que só fico uns 20 dias o removi por vários motivos, enjoo rápido de rosa, uma semana depois troquei o domínio do blog então troquei novamente o layout sem dizer fiquei super desgostosa dele por me acusarem de plagio na época, apenas por usar "The End" em um dos gadgets. É claro que tudo se acerto mas só pelo acontecimento já fiquei desanimada dele, então estou dando para vocês agora. Então vamos lá ver como é esse bolo gigantesco de morango?

O modelo possui tema asiático, slide, comentários personalizados, links em fade, blockquote arrumado, gadgets personalizados, espaço para divulgação e blogroll no cabeçalho, três menus e quatro tipo de efeito nas imagens já o resto e necessário para um layout bonito.

 DEMO || DOWNLOAD

No pacote se encontra o PSD do cabeçalho e a fonte que usei. Podem fazer modificações no cabeçalho e no layout mas sem remover os créditos, tá bom?  Esse layout eu usei faixinhas numeradas, então irei mostrar abaixo como arrumar todo ele e os códigos também.

Regras:

-Não remover os créditos

-Não disponibilizar para download

-Não falar que foi você que fez

-Se for usar o layout, comente

-Pode fazer pequenas modificações, mas não remova os créditos

Arrumando o Layout:

~Cabeçalho~

Eu já deixei todos códigos arrumados, só para vocês adicionarem dentro dos gadget. Assim facilitando vocês. Agora vamos adicionar os códigos que fazem o slide e mais os outros apetrechos do cabeçalho aparecer.   Adicionarem os códigos na gadget, qual irei mostrar abaixo:

Copie todo código a baixo e cole ele dentro da gadget, arrume os links do menu e das tops postagens, mas cuidado para não mexer na posição e trocar tudo de lugar.

Slide e Divulgação:

<div id='topo'> </div> <div style="position: absolute; margin-top: -310px; left: 417px;"> <div class="view"> <img style="width: 100px; height: 100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzzdA3ajyzq1p1AY-VgoYJb5tOO8yr4sPUV_eA68PgnD1hyphenhyphennehM1mGGfpIv-vdpL1PiKUDDkFN2UkYa_JG9mqFGsymSokn2PkwqStKfuDcSOB4hG5-XQJHXPgUICjmiuPIlUgpDt8-QA/s1600/18.png" /> <div class="mask"> <h4> NOME</h4> <a href="http://www.blogger.com/LINK" class="info">Visite!</a> </div> </div> <div class="view"> <img style="width: 93px; height: 100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKq4ZyC0kBWU7aFUtCvYgHXG7gaBFIkLj2AuE608dh6u4Cc3vKIMl2-SBaWAHiggFV8y-xu8lyXc5bsXh-UZJpjGNIYZej7_4OP4S5I7TxErdSTYDFTRGrueGXz27T4SprhgctbDsiQck/s1600/7.png" /> <div class="mask"> <h4> NOME</h4> <a href="http://www.blogger.com/LINK" class="info">Visite!</a> </div> </div> <div class="view"> <img style="width: 93px; height: 100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6HtX_qHN4HSnPT6i6jIy7n9ykmfr0l3GSlVTdxBpTCUvW_mbuuarKidisp6k1aLz05b2rMGPNRctmGzKBWiwmz8w5yFru43H5tryc3A0GkL7X5bYEjuBwbH-O_fDSW32-ZFSF-NR0L0/s1600/5.png" /> <div class="mask"> <h4> NOME</h4> <a href="http://www.blogger.com/LINK" class="info">Visite!</a> </div> </div> </div> <div style="position: absolute; margin-top: -172px; left: 455px;"> <a href="SEULINK"><figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJIV6xmJc1I3K23XDPUmxV0jtKwC49ZwRq4FQBpMJAjs0DLBn97hz59GATAOjIVXjYv8KX97Kz20XszQlt7-u1OGx0M_1St0NkYVAci7ASJg49gK-5fYt0I_UgMq1PiptzidxuRFckG4/s1600/22.png" width="120" alt=""/><figcaption>NOME</figcaption></figure></a> <a href="SEULINK"><figure><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJIV6xmJc1I3K23XDPUmxV0jtKwC49ZwRq4FQBpMJAjs0DLBn97hz59GATAOjIVXjYv8KX97Kz20XszQlt7-u1OGx0M_1St0NkYVAci7ASJg49gK-5fYt0I_UgMq1PiptzidxuRFckG4/s1600/22.png" width="120" alt=""/><figcaption>NOME</figcaption></figure></a> </div> <div style="position: absolute; margin-top: -304px; left: 5px;"> <div id="w2bSlideContainer"> <div id="w2bNivoSlider"> <a href="LINK_DO_SLIDE_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMr82p5rU6MrYvWNX-XLtHIWqfGT6ex9eRI4UyzOJVMKoPXhCV7WjmVQmB12WVyJi2XGN3nR9Pfpxh5L6KzIoSYFco5tjSjJhRfERGN_-c04n-vWAcZ9OXJWTIsPnkiDx1IN0Vkhyphenhyphenk5Rk/s1600/slide+1.png" title="LEGENDA DA IMAGEM 1"/></a> <a href="LINK_DO_SLIDE_2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_GGfxC3I7bXyXLRQrV_COQ5sPyMC1-UDySmpw3IapdpHqYhu-DeFJLHuzWfyn_pKegClT_fxAn92bg1VGLXuWHkX5Wlfa3UFfs1YXpzZfoQOe-y20Hveu8w2kBgL3tFZqznJZmGRsyY/s1600/slide+2.png" title="LEGENDA DA IMAGEM 2"/></a> <a href="LINK_DO_SLIDE_3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZ_rTcTXNh6yVi4xNSoVOu6S5Lj_BQWG7-dbvwk_KjMkZzVIYtgNdzAKYuW24mfnq0gyMyMi-wuEZE4lwvteef7OHAR-o1T4b1ev6m53TifQ9gCvJHPTBH3kgDxfZzKbDtHnveJQ3eBw/s1600/slide+3.png" title="LEGENDA DA IMAGEM 3"/></a> <a href="LINK_DO_SLIDE_4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqy5vByXhw8nMlS71mpO8zU0tfMYXD_IHLRUbLTUqbUekr3R22fcYCB7J5fzN2Bw8Z0dG2AsCRhyrXOPPDo5W9T7pbXOZq49NwsSbYsfU-pmE7OzNUTFinXM08qKuJH-dQhgQhGHjRZq4/s1600/slide+4.png" title="LEGENDA DA IMAGEM 4"/></a> </div> </div> </div>

Codificação:

Cabeçalho: <div id='topo'></div>
Slide: <div id="w2bSlideContainer"> [...mais codigos]
Divulgando 1: <div class="mask"><h4>NOME</h4> <a href=" [...mais codigos]
Divulgando 2: <a href="SEULINK"><figure><img src [...mais codigos]

Blogroll:

<div style="position: absolute; margin-top: -330px; left: 810px;"> <table class="faixa" style="height: 253px; width: 175px;" border="0" cellpadding="1" cellspacing="1"><tbody> <tr><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"> <img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td></tr> <tr><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td></tr> <tr><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td></tr> <tr><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a></td><td style="vertical-align: top;"> <a href="LINK AQUI" target="_blank" title="BLOGROLL"><img onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" class="borderimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykvAhEpkiOd0pB4tGvwWFNRDi_q_pXk_qVrv2I4JuUZUBIboFwDe0u6iSjkmadojOAdZOs9T8fiu-DPRnxHLsrtofVAjugp4W8NheYWJJfNuCed_e63EagkJyw4Ijuc5gQt83PFf1FxE/s1600/blog+irmao.png%20" style="height: 60px; width: 60px;" /></a> </td></tr> </tbody></table> </div>

Na época eu era iniciante então fiz uma enrolação na parte do blogroll, mas funciono isso que importa!!!haha Mas para arrumar do seu modo use o Ctrl+F e pesquise pelos trechos que mostro abaixo, assim e só você ir trocando. O código fico gigante porque usei efeito de opacidade e umas barrinhas para ele fica reto só as barras já e metade do código:

LINK AQUI: URL do blog
BLOGROLL: Nome
IMAGEM: LINK AQUI

Cabeçalho em PNG:  [1]

Wellcome:

<div id="demo-5" class="demobox">
<img style="width: 240px; height: 164px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCKIQjRur9nMcJjKA8u8LJnAFEaE0Rf2UkLG7zY_YdAClfMJ3EmoG0jcq0j5eYfV7mDmCCnptLuD23Fdj2drhuku_RtvHLNAXKT-yS1fynPgGs-1mUJ85HWVtbjgb44SukMXX5dGeNKaU/s450/welcome.png" />
<div class="details">
<h3>Wellc❤me</h3> <p>AQUI E O TEXTO QUE APARECE SOBRE A IMAGEM,  FALE UM POUCO SOBRE SEU BLOG, </p></div></div>

<div class="menugirarosa">
<a href="LINK">Home</a>
<a href="LINK">Tumblr</a>
<a href="LINK">Twitter</a>
<a href="LINK">Créditos</a>
</div>

<div style="text-align: center;">
<span style="color: rgb(255, 255, 255);">~</span>~ Estatística ~</div>
<div class="heart">Dona:Wendy-Chan</div>
<div class="heart">Sigla:BC</div>
<div class="heart">Desde: 00/00/00</div>
<div class="heart">Meta:500 Seguidores <strike>Help?</strike></div>

Tags+Vistas:

<div class="menututos">
<a href="LINK AQUI">Animes</a></div>
<div class="menututos">
<a href="LINK AQUI">Mangás</a></div>
<div class="menututos">
<a href="LINK AQUI">Utilitários</a></div>
<div class="menututos">
<a href="LINK AQUI">Tutorial</a></div>
<div class="menututos">
<a href="LINK AQUI">Blá Blá Blá</a></div>
<div class="menututos">
<a href="LINK AQUI">Ver todas as TAGs</a></div>

The End:

<div style="text-align: center;">
<img onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" class="shake" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYXcDAoI4xBlf-Y2nlcVW1cnbvxGEU0pqHu8XbfyhQW36tfZ6Ap_EQhQByZaLZ1q9Iq6ytLgKeKNywp_SfHF6kezJTLrg8HgkPTn4W_thXT_LwLQSKZ1-9BqvKVmV1x-CSVr2G1WDufWs/s1600/fim.png" style="height: 142px; width: 235px;" /></div>
<div style="text-align: justify;">

Pesquisa:

<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form>

~Arrumando as faixas~

Não é nem um bicho de 7 cabeças, para arrumar faça um seguinte. Pegue o nome de um dos seus gadgets, como exemplo vou usar a apalavra "Wellcome", vá ate seu HTML e procure por ela você vai achar algo similar a isso:

<b:widget id='HTML1' locked='false' title='Wellcome' type='HTML'/> 

A parte que destaquei em negrito é a ID e em itálico é o nome do seu gadget. Lembrando que em determinados gadgets os IDs são diferentes, quando é de imagem entra apalavra 'Image1' quando é seguidores entra 'Followers1' e por ai vai. Agora copie o ID de seu gadget e separe ele, então procure por ]]></b:skin>, e acima dele adicione esse código:

#IDDOGADGET h2 { background: url('URL DE SUA FAIXA') no-repeat; color: transparent; width: 310px; height: 55px; margin-top: -6px; margin-left: -32px; float:left; }

Onde esta IDDOGADGET coloque o ID que pegou antes, onde esta "url de sua faixa", basta colocar o link de sua faixinha. As medidas dentro do layout já estão arrumadas basta colocar as imagens. Se quiserem ver o tutorial completo clique aqui [Ribbons determinados gadgets].

~Crédito dos codigos~

Peço a todos que creditem esses blogs, pois foi deles que peguei tutoriais para montar esse lindo layout, fico faltando dois, um é de onde peguei as imagens de navegação outro e da faixinha...porem não me lembro qual se alguem saber me alerte por favor. Sites/Blog: CB-KW-GMH

Bom é isso espero que tenham gostado do layout free e não esqueçam de dizer o que acharam viu? E bom proveito ate a próxima.