19 de abr. de 2014

Layout free Blue

|| ||
Trouxe mais um layout, este se chama Layout Blue por ser azul.
Fiz este layout mais simples, nas cores azul e cinza, espero que apreciem.

Este layout contém:

Seguidores só com um botão
Sidebar personalizada
Postagens separadas

Blockquote
Menu para categorias
Menu na lateral do gadget welcome
Data personalizada
Tooltip personalizado
Seleção de texto 
Caixa de pesquisa personalizada
Barra de rolagem colorida
Negritoitálicosublinhado, e tachado ( riscado)
Links de navegação personalizado
Título da postagem personalizado
Marcadores, comentários e autor abaixo do título da postagem

COLOCANDO OS GADGETS

Seguidores com um botão
Coloque no gadget html/java script
<a href="http://www.blogger.com/follow-blog.g?blogID=SEU ID COLADO AQUI" title="O TITULO DO TOOLTIP" target="_blank"><img src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagem%20para%20seguidores/botoseguidores4.png" border="0" /></a>

Onde tem SEU ID COLADO AQUI- coloque o id de seu blog
Onde tem O TITULO DO TOOLTIP- coloque o título que aparece quando clicado

O gadget welcome
Coloque no gadget html/java script

DESCRIÇÃO:
<img src="http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Afiliados/imagemparaafiliados1.png" class="border" align="left"/> ESCREVA AQUI SUA BREVE DESCRIÇÃO-ESCREVA AQUI SUA BREVE DESCRIÇÃO-ESCREVA AQUI SUA BREVE DESCRIÇÃO-ESCREVA AQUI SUA BREVE DESCRIÇÃO
<br />
MENU LATERAL:
<div style="position: absolute; margin-left:240px; margin-top: -85px;">
<div class="menu">
<a href="URL"><p>♥</p></a>
<a href="URL"><p>♥</p></a>
<a href="URL"><p>♥</p></a>
<a href="URL"><p>♥</p></a>
<a href="URL"><p>♥</p></a>
<a href="URL"><p>♥</p></a>
</div></div>
CAIXA DE PESQUISA
 <style>
#searchb {
float: left;
margin: 30px 0
}
#searchb input[type="text"], #searchb textarea {
background: none repeat scroll 0 0 #F9F9F9; /*cor de fundo onde digitamos a pesquisa*/
 border: 0 none;
 float: left;
 height: 20px;
    padding: 5px 10px;
    width: 120px;
    -webkit-border-radius: 2px 2px 2px 2px; /*grau de arredondamento da área onde digitamos*/
    -moz-border-radius: 2px 2px 2px 2px; /*grau de arredondamento da área onde digitamos*/
    border-radius: 2px 2px 2px 2px;/*grau de arredondamento da área onde digitamos*/
    -webkit-box-shadow: 0 2px 2px #c0c0c0, 0 3px 10px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 2px 2px #c0c0c0, 0 3px 10px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 2px 2px #c0c0c0, 0 3px 10px rgba(0, 0, 0, 0.4) inset;
    font-family: arial, helvetica, sans-serif; /*tipo de fonte*/
    font-size: 15px; /*tamanho da fonte */
    }
#searchb .go {
    -webkit-border-radius: 2px 2px 2px 2px;  /*grau de arredondamento do botão Buscar*/
    -moz-border-radius: 2px 2px 2px 2px; /*grau de arredondamento do botão Buscar*/
    border-radius: 2px 2px 2px 2px; /*grau de arredondamento do botão Buscar*/
    -webkit-box-shadow: 0 2px 2px #c0c0c0, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 2px 2px #c0c0c0, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 2px 2px #c0c0c0, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;
    background: #98B6D0; /*cor normal do botão*/
    border: 0 none;
    font-size: 15px; /*tamanho da fonte do botão Buscar*/
   font-family: arial, helvetica, sans-serif; /*tipo de fonte do botão Buscar*/
    height: 30px;
    margin: 0 10px;
    padding-bottom: 3px;
    text-shadow: 0 1px rgba(255, 255, 255, 0.35);
    width: auto;
    cursor: pointer
 }
#searchb .go:hover {
         background: #ccc; /*cor do botão Buscar em estado hover*/
}
</style>
<form id="searchb" action="ENDEREÇO COMPLETO DE SEU BLOG/search-results/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="ID DE SEU BLOG:yojsvasam2s" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" placeholder="Pesquise no site"/>
    <input type="submit" name="sa" value="Buscar" class='go'/>
  </div>
</form></div>

O menu você deve ajustar a posição se não ficar ao lado em
 margin-left:240px; margin-top: -85px;

Para mudar o avatar procure por:
http://i765.photobucket.com/albums/xx293/Claudinenetto/Imagens%20Afiliados/imagemparaafiliados1.png

No botão de pesquisa você deve colocar o id de seu blog e o endereço

Gadget categorias
Coloque no gadget html/java script
<div style="float: left; width: 50%">
<a href="LINK"><div class="tags">Categoria</div></a>
<a href="LINK"><div class="tags">Categoria</div></a>
<a href="LINK"><div class="tags">Categoria</div></a>
</div>
<div style="float: left; width: 50%">
<a href="LINK"><div class="tags">Categoria</div></a>
<a href="LINK"><div class="tags">Categoria</div></a>
<a href="LINK"><div class="tags">Categoria</div></a>
</div>
<br />

Gadget créditos
Coloque no gadget html/java script
<cred><a href="http://princesstutoriais.blogspot.com.br">Princess Tutoriais</a> <img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/02lrty.gif" />Personalização </cred><br />
<cred><a href="http://www.b-cake.com/2013/01/menu-de-creditos.html">Birthday Cake</a> <img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/02lrty.gif" />Menu de créditos</cred><br />
<cred><a href="http://enjoythelittllethings.blogspot.com">Enjoi the Littlle Things</a> <img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/02lrty.gif" />Comentários</cred>

Para mudar o avatar do título das postagens siga este tutorial:
Como colocar avatares no título do post 

PEÇO POR GENTILIZA COLOCAR OS CRÉDITOS DO LAYOUT




Nenhum comentário:

Postar um comentário

© Layouts Free - 2014. Todos os direitos reservados.
Criado por: Claudine.
Tecnologia do Blogger.
Wonderland Layout-Layout Free