Layout Free para blog (instalação)

layouts para blog

Layout free para blogger

 Layout para blog desenvolvido por Fernanda Oliveira da Fernanda Oliveira Design e Programação. Aqui você encontra o passo a passo para instalação do tema.

O layout tem a licença Creative Commons e não pode ser vendido em hipótese alguma. É permitido alterações, mas deve-se dar os devidos créditos.

Depois de instalar o template em seu blog, deixe o link nos comentários para que eu possa conhecê-lo e ver como ficou. :)

O primeiro passo após o download é extrair os arquivos. Na pasta você vai encontrar um arquivo de texto (que é o XML do template) e um arquivo de imagem que é o cabeçalho do blog.

Entre no seu blog, vá em MODELO -> FAZER BACKUP/RESTAURAR (que fica do lado direito superior). Na janelinha que abre clique em ESCOLHER ARQUIVO. Procure pelo arquivo de texto que você fez download e clique em FAZER UPLOAD.

Agora você poderá seguir os demais passos.


Inserindo o Menu no topo

No gadget ao lado do favicon, com nome "HTML/JavaScript" clique em EDITAR e cole o código abaixo:

<div id="menufixo">
<div id="menufixo_int">
<li><a href="ENDEREÇO DO LINK/">Home</a></li>
<li><a href="ENDEREÇO DO LINK/">Menu1</a></li>
<li><a href="ENDEREÇO DO LINK/">Menu2</a></li>
<li><a href="ENDEREÇO DO LINK/">Menu3</a></li>
<li><a href="ENDEREÇO DO LINK/">Menu4</a></li>
</div>
</div>

Altere o texto ENDEREÇO DO LINK pelos links do seu blog e Home, Menu1 pelo nome do link.


Alterando o formato da data

Vá em configurações -> idioma e formatação e escolha o formato de data "06 março 2015".


Alterando foto da assinatura

Vá em Modelo -> Editar HTML -> Ctrl+F e pesquise por "avatar.png". Você verá o seguinte código:

<span class="author">
<img src="http://3.bp.blogspot.com/-EGwhAoqdTKI/VPkFKIlNEyI/AAAAAAAADnY/SmOrPY04JiU/s1600/avatar.png" />
</span>

Altere o endereço da imagem pelo endereço da sua foto.


Inserir perfil

Para inserir o perfil clique no gadget perfil do lado esquerdo e insira o segunte código:

<div align="center">
<img align="center" alt="MinhaFoto" src="http://2.bp.blogspot.com/-iMxv7b9mIhw/VPdt6FBMDpI/AAAAAAAADl4/kP6nE8iF-lo/s1600/perfil.png" /></div> <div style="align: center; background-color: white; font-family: Muli; padding: 10px 10px; text-align: justify;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div>

Altere o link da imagem e o texto.


Redes Sociais

Insira no gadget o seguinte código e coloque o link de suas redes sociais.

<center>
<a class="external" href="ENDEREÇO DO LINK/ " target="_blank" title="Facebook"><img src="http://2.bp.blogspot.com/-s_VoVkq_nPA/VPd3MnsPmNI/AAAAAAAADmQ/WwZ-1l9WX8Y/s1600/facebook.png" /></a>

<a class="external" href="ENDEREÇO DO LINK/" target="_blank" title="Twitter"><img src="http://2.bp.blogspot.com/-hulTLGlmvF8/VPd3Ms-k5WI/AAAAAAAADmM/S9iPFenXZgw/s1600/TWITTER.png" /></a>

<a class="external" href="ENDEREÇO DO LINK/" target="_blank" title="You Tube"><img src="http://4.bp.blogspot.com/-VskKk_yuKO4/VPd3NEWtrSI/AAAAAAAADmY/mNZEiDm21bY/s1600/youtube.png" /></a>

<a class="external" href="ENDEREÇO DO LINK/" target="_blank" title="Instagram"><img src="http://3.bp.blogspot.com/-d2DIUcrchAM/VPd3MoJIpuI/AAAAAAAADmI/R1QcgYn4VMc/s1600/INSTAGRAM.png" /></a>
</center>

Arquivo do blog

Clique em EDITAR e escolha a opção de MENU SUSPENSO.


Adicionar posts em destaque

O gadget de "Posts em destaque" não deve ser modificado para que funcione perfeitamente. Clique em EDITAR no gadget HTML/JavaScript acima do gadget de "Postagens no blog" e adicione o código:

<center>
<style type="text/css">
.bsrp-gallery {
margin-top:70px;
width:1000px;
float:center;
clear:both;
}

.bsrp-gallery:after {
display: table;
clear: both;
}

.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 10px 15px 0;
text-decoration: none;
}

.bsrp-gallery .bs-item .ptitle {
background-color: #C0E4D0;
display: block;
transition: ease .7s;
clear: left;
font: 20px 'Muli';
height: 25%;
width:91%;
position: absolute;
bottom:0%;
text-align: center;
padding:80px 10px 80px 10px;
color:#fff;
word-wrap: break-word;
overflow:hidden;
text-transform: uppercase;
padding-top: 85px;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}

.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
transition: ease .7s;
opacity:0.9;
}

.bsrp-gallery a img {
background: #fff;
float: left;
}

.bsrp-gallery a:hover img {
}
</style>

<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Fernanda Oliveira Design">
'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">
', item, '</div>
');
}
html.push('</div>
');
document.write(html.join(""));
}
hoje = new Date()
numposts =1
var bsrpg_thumbSize = 220;

var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

Para colocar um cabeçalho com o nome do seu blog, disponibilizei o arquivo topo.png onde você pode escrever o nome e inserir no seu layout.

Após editar o cabeçalho com o nome do blog, vá em Modelo -> Editar HTML -> Ctrl+F e pesquise por "topo.png".

Você verá o seguinte código:

#talatopo {background: url("http://1.bp.blogspot.com/-2QRd17UAqVo/VPodBCWrR_I/AAAAAAAADow/Cv7Q1PzJBHY/s1600/topo.png") repeat-x scroll center 0 transparent; width: 100%;}
Substitua o endereço em negrito, pelo endereço da imagem de topo.

É isso meninas, espero que gostem do layout e qualquer dúvida deixem uma mensagem.

Beijocas!

Para fazer download do tema, clique aqui.



57 comentários :

  1. São ótimos esses posts que ensinam essas coisas. Eu acabava sempre deixando algo para trás hahahah

    Blog do Sofá

    ResponderExcluir
  2. eu amei o layout mais infelizmente não consegui colocar no meu blog pois dá erro :('

    ResponderExcluir
  3. O gadget de 'Posts em destaque' não está funcionando no meu blog.

    ResponderExcluir
    Respostas
    1. Thais, deve haver algum erro no código :(

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
    3. Ah sim, obrigada Luana!
      www.thaislopess.com

      Excluir
  4. http://bestmapsamigas.blogspot.com.br/

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. meninaespertaecomplicada.blogspot.com
    Muito Obrigada!

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. Ameeeeei, vou usar aqui http://agapi-c.blogspot.com.br/

    ResponderExcluir
  9. o meu cabeçalho está dando erro , o que eu faço ?

    ResponderExcluir
  10. Este comentário foi removido pelo autor.

    ResponderExcluir
  11. Oi linda, eu queria fazer o meu proprio layout posso pegar alguns gadgets aqui? Eu não vender não

    ResponderExcluir
  12. Olá Fernanda!
    Amei o layout e estou usando no meu blog: ahbonita.blogspot.com.br
    Obrigada por nos deixar usar...
    Beijos

    ResponderExcluir
  13. Queria saber como coloca as tag's (marcadores) ... É só adicionar mesmo ? Obrigada pelo layout , ficou divo !

    ResponderExcluir
  14. Muito bom, estou usando, obrigada por dividir conosco seu esforço, você está de parabéns
    http://tavirandocliche.blogspot.com.br/

    ResponderExcluir
  15. Este comentário foi removido pelo autor.

    ResponderExcluir
  16. Adorei, estou usando, obrigada por dividir conosco seu esforço! http://garotasnamoda-blog.blogspot.com.br/

    ResponderExcluir
  17. No começo estava dando super errado o meu cabeçalho , mas agora ja resolvi tutinho , só o silder com os posts recentes que não esta dando! MUUUUUUUITO OBRIGADA vc é demais

    ResponderExcluir
    Respostas
    1. Como coloco o nome do meu blog geovana ?????

      Excluir
    2. Jana, quando você baixar, a imagem do cabeçalho vai vir inclusa. Agora é só você editar a imagem e ser feliz :D

      Excluir
    3. Geovana,o que fez para o seu cabeçalho dar certo?Eu editei e tudo mais,mas na hora de instalar quando procuro por topo.png não aparece nada.

      Excluir
  18. Estou usando no meu! obrigada. mas como faço pra usar o slide?
    http://blogadorotudoisso.blogspot.com.br/

    ResponderExcluir
  19. Oi, não consigo mudar a imagem da assinatura do post oq pode estar dando errado?

    ResponderExcluir
    Respostas
    1. Olá Garotas, percebi que muita gente está com dificuldade de modificar a foto na assinatura de post e é bem prático! Arrastem a foto (da menina de cabelo rosa)que vem no modelo até a barra onde vocês digitam o URL, depois vocês copiam esse link e vão até o HTML, apertem Ctrl+F e pesquisem o link, só substituir pela link da foto que vocês quiserem e está pronto <3(Lembrando que a foto precisa ser do tamanho certinho pra caber e precisa está hospedada em algum lugar)

      Espero ter ajudado!
      http://algumasgarotasdizem.blogspot.com.br/

      Excluir
  20. Realmente tem erro no post em destaque, mas eu consegui!!!
    Falta eu agora o topo!
    www.thaislopess.com

    ResponderExcluir
  21. Não consigo colocar posts em destaque, alguém pode me ajudar??

    ResponderExcluir
  22. Ameiiii o layout , obrigadaaaaa
    Estou usando no meu blog

    http://totalmentedelearianaeka.blogspot.com.br/

    Só não consigo mudar a foto da assinatura e os posts em destaque ... alguem conseguiu ?

    ResponderExcluir
    Respostas
    1. Também não consigo, já tentei mil vezes

      Excluir
    2. Olá Garotas, percebi que muita gente está com dificuldade de modificar a foto na assinatura de post e é bem prático! Arrastem a foto (da menina de cabelo rosa)que vem no modelo até a barra onde vocês digitam o URL, depois vocês copiam esse link e vão até o HTML, apertem Ctrl+F e pesquisem o link, só substituir pela link da foto que vocês quiserem e está pronto <3(Lembrando que a foto precisa ser do tamanho certinho pra caber e precisa está hospedada em algum lugar)

      Espero ter ajudado!
      http://algumasgarotasdizem.blogspot.com.br/

      Excluir
  23. Oi, eu não tô conseguindo colocar o cabeçalho. Fiz tudo como vc pediu, mas ele não aparece, o que eu faço? URGENTE
    http://docefulana.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu também não consigo. Nem a parte de apresentação do autor... :(

      Excluir
  24. Consegui! Meu blog ficou maravilhoso, não vejo a hora de chegar 2016 e iniciar as postagens <3

    Obrigada Fernanda.
    http://algumasgarotasdizem.blogspot.com.br/

    ResponderExcluir
  25. Não consigo baixar :(... É lindo ♥

    ResponderExcluir
  26. Este comentário foi removido pelo autor.

    ResponderExcluir
  27. Oi Fernanda, o layout é lindo, fiquei encantada! No meu caso, usei somente a imagem do topo para usar no meu background e mantive o layout que eu já usava antes, já que você disse que poderíamos fazer a alteração que quiséssemos. Nesse caso, coloquei os créditos referente ao background no rodapé do meu blog ok? www.meumundocoloridoblog.blogspot.com.br

    ResponderExcluir
  28. Olá Garotas, percebi que muita gente está com dificuldade de modificar a foto na assinatura de post e é bem prático! Arrastem a foto (da menina de cabelo rosa)que vem no modelo até a barra onde vocês digitam o URL, depois vocês copiam esse link e vão até o HTML, apertem Ctrl+F e pesquisem o link, só substituir pela link da foto que vocês quiserem e está pronto <3(Lembrando que a foto precisa ser do tamanho certinho pra caber e precisa está hospedada em algum lugar)

    http://algumasgarotasdizem.blogspot.com.br/

    ResponderExcluir
  29. eu quero colocar o perfil do lado direito mas nao consigo!! ele ficou automaticamente do lado esquerdo, e também quero editar a escrita, alguem me ajuda, olhem como ficou http://feitodepink.blogspot.com.br/

    ResponderExcluir
  30. eu quero colocar o perfil do lado direito mas nao consigo!! ele ficou automaticamente do lado esquerdo, e também quero editar a escrita, alguem me ajuda, olhem como ficou http://feitodepink.blogspot.com.br/

    ResponderExcluir
  31. Achei ele lindo e simples ao mesmo tempo, do jeito q eu queria <3

    http://euamotudos2.blogspot.com.br/

    ResponderExcluir
  32. Como colocar istagram?curta a fã page?

    ResponderExcluir
  33. Adorei o layout, venha dar uma olhada em como ficou no meu blog!
    www.romanceacontracapa.blogspot.com.br

    ResponderExcluir
  34. Adoreiiii! http://pequenacarolina.blogspot.com.br/
    muiito lindo. *-*
    lindo simples e muiito perfeito, nem parece q é free hihihi parabéns

    ResponderExcluir
  35. O meu layout ficou com o nome "Página Inicial" no início do corpo das postagens. Alguém sabe resolver isso?

    ResponderExcluir
  36. O Layout é lindo, mais não consegui colocar no meu blog, o topo ficou todo em branco,não apareceu minha foto no lado direito, a fanpage só apareceu o nome e o instagram também,não consigo entender porque segui corretamente o passo a passo e o pior não estou sabendo como voltar ao layout que estava antes. Estou muito triste e queria que você me orientasse por favor ou alguém que saiba. Enfim, desde já obrigada.
    http://www.thamiresaugusta.com/

    ResponderExcluir
  37. Que giro
    http://retromaggie.blogspot.pt/

    ResponderExcluir
  38. Gostei muito desse template, mais to tendo um pouco de dificuldade em pequenas coisas. será se você poderia me ajudar?
    https://minutoscomrosy.blogspot.com.br/
    de cara você já vai ver do que to me referindo. aguardo respostas e sua ajuda. bj e parabens pelo post e seus desingner

    ResponderExcluir