Torne-se Um(a) Expert em Layout




Oi todo mundo!!
Sei que tem muita gente desesperado atrás de um layout para o blog, e não tem a minima ideia de como fazer ou não tem dinheiro para pagar um profissional.
Então resolvi dar uma ajudinha pra vocês entenderem um layout e se tornar um expert.

Vamos lá
   Layout é o nome dado à estrutura gráfica do site (o desenho do site). É através dela que os seus leitores irão navegar em seu site. Uma boa aparência fara a diferença na internet, com os elementos acessíveis aos olhos do leitor.
   Sempre que alguém entra em um blog e encontra um visual muito poluído, cheio de informações e desorganizado, acaba desistindo de comentar, seguir e perde o interesse por seu conteúdo. O mesmo vale para empresas: um blog organizado e profissional chama muito mais a atenção, e tem maiores chances de conseguir boas parcerias e anúncios.

Entendendo o layout


1- Cabeçalho: Essa é a área do logo, descrição, slogan, banner e outros elementos de preferência do blogueiro, é onde os leitores vão identificar seu blog.

2- Menu: O menu facilita a navegação, pois ele permite que os leitores acessem as principais informações de seu blog, e vá direto ao que interessa à ele.

3- Postagens: Nesta área fica o conteúdo publicado, as postagens do Blog, o corpo da página. Procure fazer textos claros que seus leitores tenham vontade de ler.

4- Pesquisa: È a caixa de pesquisa do blog, onde os leitores poderão procurar por algo dentro do blog. (Aqui no blog tem um tutorial de Caixa de Pesquisa Personalizada, Click aqui para ver)

5- Widgets\Gadgets: Ótimo lugar para colocar informações importantes que facilitem a vida do seu leitor, como a caixa de pesquisa, seu perfil, suas redes sociais, seus seguidores, as categorias de seu blog, anúncios e tudo o mais que você achar necessário. È uma área lateral direita, mas pode ser esquerda, ou o blog pode ter as duas laterais(os Widgets, gadgets). 
Dica importante: Muita informação na barra lateral tirará o foco do conteúdo do blog.

6- Por ultimo temos o rodapé da página, nesta parte também se coloca mini aplicações, informações sobre o layout ou algo que você queira colocar, induzindo o leitor a conhecer outros conteúdos de seu blog.

Agora que você entendeu o layout, separei 2 vídeos que vão te ajudar a criar o seu próprio Layout:

Não me esqueci de vocês, deixei uns links de alguns layouts free. 
È só escolher

Clique aqui para baixar


Clique aqui para baixar

Clique aqui para baixar


Créditos: Cbbloguer / Amarinoblogue

Espero que tenhas gostado, agora eu quero ver todo mundo de layout bonito e criativo.
Não esqueçam de comentar, hein!
Um beijo!

Compartilhe
Pin ThisShare on TumblrShare on Google PlusEmail This

Caixa de Pesquisa Personalizada (Simples)


Oieee gente, aqui quem fala é a Thamires, e hoje vim ensinar um modelo de caixa de pesquisa simples. Espero que gostem, bora ao tutorial?

1. Vá na aba Layout

2. Adicione um gadget HTML JAVA SCRIPT

3. Quando a janela abri cole o código abaixo |
                                                                         
<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/AVvXsEhuJUcGQjp6sOR0WS9AWO5jB9TIOkJh1FLNXU73px_Vso4fYRmkrogGl0JcJFW05acTT2aoepJ46rv5riDcXG5Xc-z4il9QO2rxJNJaBQFRZ2NSAyavFI193f3Cq768RdBhJDJytydyIGfi/s30/search_icon.png); 
background-color:#eeeeee; /*cor do fundo de onde digitamos a pesquisa*/
color: #fff;/*cor da fonte*/
}
#search input.field:focus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuJUcGQjp6sOR0WS9AWO5jB9TIOkJh1FLNXU73px_Vso4fYRmkrogGl0JcJFW05acTT2aoepJ46rv5riDcXG5Xc-z4il9QO2rxJNJaBQFRZ2NSAyavFI193f3Cq768RdBhJDJytydyIGfi/s30/search_icon.png); 
background-color:#fff;/*cor de fundo do botão Buscar em estado hover*/
}
#search input.submit {
background-color:#daf8ff; /*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;Pesquise aqui..&apos;;}' onfocus='if (this.value == &apos;Pesquise aqui..&apos;) {this.value = &apos;&apos;;}' type='text' value='Pesquise aqui..'/>
<input class='submit' name='submit' type='submit' value='Buscar'/></div>
</form>
</div>

Resultado

Essa imagem da ferramenta do lado não vai aparecer certo?

Créditos ao blog: Elaine Gaspareto - algumas coisas foram alteradas


Compartilhe
Pin ThisShare on TumblrShare on Google PlusEmail This