26 julho 2014

Layout Forest Green

|

Este é mais um layout em comemoração aos 132 seguidores do Princess Tutoriais, coloquei o nome de Forest Green por que fiz todo verde. Peço que não retirem os créditos do layout.
O layout Forest Green contém:
.Slide no cabeçalho,
.Menu de páginas no cabeçalho,
.Área das postagens e sidebar separadas,
.Marcadores personalizados,
.Menu no gadget welcome,
.Menu para afiliados,
.Postagens populares personalizadas,
.Postagem relacionada nas páginas internas do blog,
.Negrito, ítalico, sublinhado e tachado
.redes sociais no cabeçalho,
.comentários personalizados,
.links de navegação personalizados,
.seleção de texto colorida,
.blockquote personalizado,
.caixinha de busca personalizada,
.tags e comentários abaixo do título da postagem.

ESTE É O BLOCKQUOTE



REDES SOCIAIS e SLIDE

No html de seu blog procure por </header>, acima desta tag está o menu de redes sociais e o slide.
Modifique o que se pede:


Nome de usuário do Twitter
Link do Facebook
Link do Tumblr

Link do slide: coloque o link da postagem que quer que apareça,
Legenda da imagem: coloque o nome que quer que apareça.
MENU DE PÁGINAS

Vá em adicionar um gadget, escolha páginas e coloque nomes e links.


WELCOME

No gadget html/java script coloque;

<a href="/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Avatar/icon1.png" /></a>
 <div style="float: left; width: 27%;">
 </div>ESCREVA SUA INTRODUÇÃO AQUI-ESCREVA SUA INTRODUÇÃO AQUI-ESCREVA SUA INTRODUÇÃO AQUI-ESCREVA SUA INTRODUÇÃO AQUI-ESCREVA SUA INTRODUÇÃO AQUI-
<br />
<a href="http://LINK/"><micka>Nome</micka></a>
 <a href="http://LINK/"><micka>Nome</micka></a>
 <a href="http://LINK/"><micka>Nome</micka></a>
<a href="http://LINK/"><micka>Nome</micka></a>

Onde tem:
http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Avatar/icon1.png, pode trocar por sua imagem.
LINK: coloque o link para ser redirecionado para o que quiser
Nome: coloque o nome do link.

MARCADORES

Vá em adicionar um gadget, escolha marcadores e faça assim:


Pronto, seus marcadores já estão personalizados.

AFILIADOS

Vá em adicionar um gadget, escolha o gadget html/java script e coloque:

<a href="LINK DO BLOG" title="NOME DO AFILIADO"><img class="love" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagem%20Afiliados/affies3.png" /></a>
<a href="LINK DO BLOG" title="NOME DO AFILIADO"><img class="love" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagem%20Afiliados/affies3.png" /></a>
<a href="LINK DO BLOG" title="NOME DO AFILIADO"><img class="love" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagem%20Afiliados/affies3.png" /></a>
<a href="LINK DO BLOG" title="NOME DO AFILIADO"><img class="love" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagem%20Afiliados/affies3.png" /></a>
<a href="LINK DO BLOG" title="NOME DO AFILIADO"><img class="love" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagem%20Afiliados/affies3.png" /></a>
<a href="LINK DO BLOG" title="NOME DO AFILIADO"><img class="love" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagem%20Afiliados/affies3.png" /></a>
<a href="LINK DO BLOG" title="NOME DO AFILIADO"><img class="love" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagem%20Afiliados/affies3.png" /></a>
<a href="LINK DO BLOG" title="NOME DO AFILIADO"><img class="love" src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagem%20Afiliados/affies3.png" /></a>



POSTAGENS POPULARES

Vá em adicionar um gadget, escolha postagens populares e faça assim:


ESTÁ PERDIDO?

CAIXINHA DE BUSCA:
Vá em adicionar um gadget, escolha o gadget html/java script e coloque:

<div style='position:absolut; margin-top:0px; margin-left: 0px;'>
<style>
#search {
float:right;
height:30px;
margin:10px 0 0 0;
}
#search input.field {
font-family: "Arial","Lucida Sans Unicode",Arial,Verdana,sans-serif;
background-position:top right;
background-repeat:no-repeat;
width: 130px;
padding:7px;
outline: none;
font-size: 13px;
border: none;
z-index: 1;
height:16px;
float:left;
padding-right:30px;
}
#search input.field:focus {
background-position:top right;
background-repeat:no-repeat;
}
#search input.submit {
width:auto;
height:30px;
font-weight:bold;
float:left;
border:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
cursor:pointer; margin:0 0 0 1px;
}
#search input.field {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8mkG3UMWGWnSHDgoH_v6F25dq5RccWI0n43n7dVGHTCz8Bl-UBBebw4qFIs8ddHWhG3TxgXjbRW0DDAAO7KB1_vl88Zl7UjvQIVHyWheCgIddn9iQV7LqBoowjh7Lfx87MgDFjxMDF-xu/s30/search_icon.png);
background-color:#96AC8D; /*cor de fundo de onde digitamos a busca*/
color: #fff;/*cor de fonte*/
}
#search input.field:focus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8mkG3UMWGWnSHDgoH_v6F25dq5RccWI0n43n7dVGHTCz8Bl-UBBebw4qFIs8ddHWhG3TxgXjbRW0DDAAO7KB1_vl88Zl7UjvQIVHyWheCgIddn9iQV7LqBoowjh7Lfx87MgDFjxMDF-xu/s30/search_icon.png);
background-color:#E6D1D0;/*cor de fundo do botão Buscar em estado hover*/
}
#search input.submit {
background-color:#CDDBC7; /*cor de fundo do botão Buscar*/
color:#fff;/*cor da fonte do botão Buscar*/
}
</style>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Digite sua busca..&apos;;}' onfocus='if (this.value == &apos;Digite sua busca..&apos;) {this.value = &apos;&apos;;}' type='text' value='Digite sua busca..'/>
<input class='submit' name='submit' type='submit' value='Buscar'/></div>
</form>
</div></div>

CRÉDITOS:

Vá em adicionar um gadget, escolha o gadget html/java script e coloque:

Para construir esse layout utilizei tutoriais dos seguintes blogs:
<a href="http://dany-place.blogspot.com.br"title='Danys place'>x</a>
<a href="http://misterblogando.blogspot.com.br"title='Mister Blogando'>x</a>
<a href="http://princesstutoriais.blogspot.com.br"title='Princess Tutoriais'>x</a> 

POSTAGENS RELACIONADAS

Está direto no html, se quiser mudar o número de postagens que aparece nas páginas internas do blog, procure por:
var maxresults=5; 
mude o número 5 pelo valor que desejar.

PEÇO QUE COLOQUEM O GADGET DE CRÉDITOS

3 Comentários

Design por Claudine Ribeiro © Princess Tutoriais - 2014 Todos os direitos reservados. Tecnologia do Blogger.