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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaGGskyUktlDPhJug9SgUsd-Hevzmg4x59hjbiw7V71dWGbwkpnVK3f54I5B6lefYxrSQoU5zI3bNaTO5EbWmNpWrVncPQQq9j5J93rGVAfhDdkYJfEkSRjxT5_vrLUh3u4X-RAhzUQZw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA0l_shUGCbNdTcTqM2cNhJJI4entMGZImnbCIvcPX1FsPqkEbTPc-kaNxM86wOshxlqBcnaFMuMbFF808WKXkovIaNSQMqzmROuaOcRYFjLcyMQOxed36XZVHFK-S8MVKFFbe1IWRLwqV/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQbMh5qHQr4wcsvNGGOCBoEOi-mWV4w9uZRGBnDPAV8FK39SnrsqRIbzca7PTxrwh2_ZZEFxg8RHknU55WAGImGHYeu6f7nf-MM4JdM62QgkWRxm31o547T5rSMWIitZ7-5nieRevBj66e/s1600/facebook.png" /></a>
<a class="external" href="ENDEREÇO DO LINK/" target="_blank" title="Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji_5h9PpxbP1Enw0D_8K2Iy31sOODFPY4lXn847GWwhMAjjN8KDyro1aUHQFaSm3skeui0b7sDEobLqIMMgHnsBCFYK89-PweKHR4N-3s8wrVtyio_TyqPNZDkwa-m8YBtGy589mTgOlj7/s1600/TWITTER.png" /></a>
<a class="external" href="ENDEREÇO DO LINK/" target="_blank" title="You Tube"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLObMk2rlXMQtK0YZxMsqcRDJvgA4-8ak2buYoSzHFbiY9YC7RlL2RgVeupKmgGxCfcn5HZbJ1maVEVEZV8R24fJGRlvMUGH9hg38cUjQYFVcTj0tpLWrYsi3Tg34-U6oUq24n3b10tTaJ/s1600/youtube.png" /></a>
<a class="external" href="ENDEREÇO DO LINK/" target="_blank" title="Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6hfdpB2y80WkVyM1GIC4mQtNr7Pw_GS0yk1ueD-orEyrDWK51iCLnslOE246j4s2LF2G3VvtjLF6H9UfOiWUU_oK6NtLrBuPxjH1EbLohSThpAndWg2vEteKdVNyx-GSNjHEAl_F2sEWc/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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiASNWjMFROOKKw8IpRHRMJkojNQPlKEDYjLJ4lbfqasFlZDTVmQvKpkZ52_qQgIIRpnG6LbYAKkEd5xQb5-MXXBUyTWaUPhWHOQQsSS96-oWmx8inLGOlCxF485IJS3TmWPSVlqIvdnkev/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:
Substitua o endereço em negrito, pelo endereço da imagem de topo.#talatopo {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7E1tFnyT04hKa5Q6KlacyOzPJdohOmlmm62OnQvjS3rQNB9UrEsSD3ty1lgq02cj8Ww2jkHa0gR1CP2Cm2tW7LbAK9RiS_hr31xyd0Vm_fDH2CviLQw_lrX-Yus7GEIA6d2BCin0aEIm/s1600/topo.png") repeat-x scroll center 0 transparent; width: 100%;}
É isso meninas, espero que gostem do layout e qualquer dúvida deixem uma mensagem.
Beijocas!
Para fazer download do tema, clique aqui.
São ótimos esses posts que ensinam essas coisas. Eu acabava sempre deixando algo para trás hahahah
ResponderExcluirBlog do Sofá
eu amei o layout mais infelizmente não consegui colocar no meu blog pois dá erro :('
ResponderExcluirO gadget de 'Posts em destaque' não está funcionando no meu blog.
ResponderExcluirtambem não funciona no meu
ExcluirNem no meu flores
ExcluirNo meu também não! Pq???
ExcluirThais, deve haver algum erro no código :(
ExcluirEste comentário foi removido pelo autor.
ExcluirAh sim, obrigada Luana!
Excluirwww.thaislopess.com
http://bestmapsamigas.blogspot.com.br/
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirmeninaespertaecomplicada.blogspot.com
ResponderExcluirMuito Obrigada!
Este comentário foi removido pelo autor.
ResponderExcluirAmeeeeei, vou usar aqui http://agapi-c.blogspot.com.br/
ResponderExcluiro meu cabeçalho está dando erro , o que eu faço ?
ResponderExcluirMeu cabeççalho também dá erro..
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirOi linda, eu queria fazer o meu proprio layout posso pegar alguns gadgets aqui? Eu não vender não
ResponderExcluirOlá Fernanda!
ResponderExcluirAmei o layout e estou usando no meu blog: ahbonita.blogspot.com.br
Obrigada por nos deixar usar...
Beijos
Queria saber como coloca as tag's (marcadores) ... É só adicionar mesmo ? Obrigada pelo layout , ficou divo !
ResponderExcluirMuito bom, estou usando, obrigada por dividir conosco seu esforço, você está de parabéns
ResponderExcluirhttp://tavirandocliche.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluirAdorei, estou usando, obrigada por dividir conosco seu esforço! http://garotasnamoda-blog.blogspot.com.br/
ResponderExcluirNo 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
ResponderExcluirComo coloco o nome do meu blog geovana ?????
ExcluirJana, quando você baixar, a imagem do cabeçalho vai vir inclusa. Agora é só você editar a imagem e ser feliz :D
ExcluirGeovana,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.
ExcluirEstou usando no meu! obrigada. mas como faço pra usar o slide?
ResponderExcluirhttp://blogadorotudoisso.blogspot.com.br/
Oi, não consigo mudar a imagem da assinatura do post oq pode estar dando errado?
ResponderExcluirOlá 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)
ExcluirEspero ter ajudado!
http://algumasgarotasdizem.blogspot.com.br/
Realmente tem erro no post em destaque, mas eu consegui!!!
ResponderExcluirFalta eu agora o topo!
www.thaislopess.com
Como você conseguiu flor ?
ExcluirNão consigo colocar posts em destaque, alguém pode me ajudar??
ResponderExcluirhttp://doce-espelho.blogspot.com.br/
ResponderExcluirAmeiiii o layout , obrigadaaaaa
ResponderExcluirEstou 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 ?
Também não consigo, já tentei mil vezes
ExcluirOlá 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)
ExcluirEspero ter ajudado!
http://algumasgarotasdizem.blogspot.com.br/
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
ResponderExcluirhttp://docefulana.blogspot.com.br/
Eu também não consigo. Nem a parte de apresentação do autor... :(
ExcluirConsegui! Meu blog ficou maravilhoso, não vejo a hora de chegar 2016 e iniciar as postagens <3
ResponderExcluirObrigada Fernanda.
http://algumasgarotasdizem.blogspot.com.br/
Não consigo baixar :(... É lindo ♥
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOi 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
ResponderExcluirOlá 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)
ResponderExcluirhttp://algumasgarotasdizem.blogspot.com.br/
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/
ResponderExcluireu 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/
ResponderExcluirAchei ele lindo e simples ao mesmo tempo, do jeito q eu queria <3
ResponderExcluirhttp://euamotudos2.blogspot.com.br/
Como colocar istagram?curta a fã page?
ResponderExcluirAdorei o layout. É lindo :)
ResponderExcluirAll We Need Is... ❤
Adorei o layout, venha dar uma olhada em como ficou no meu blog!
ResponderExcluirwww.romanceacontracapa.blogspot.com.br
Adoreiiii! http://pequenacarolina.blogspot.com.br/
ResponderExcluirmuiito lindo. *-*
lindo simples e muiito perfeito, nem parece q é free hihihi parabéns
Não consegui...mas o layout é lindo!
ResponderExcluirComo eu posso mudar o plano de fundo?
ResponderExcluirO meu layout ficou com o nome "Página Inicial" no início do corpo das postagens. Alguém sabe resolver isso?
ResponderExcluirO 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.
ResponderExcluirhttp://www.thamiresaugusta.com/
Gostei muito desse template, mais to tendo um pouco de dificuldade em pequenas coisas. será se você poderia me ajudar?
ResponderExcluirhttps://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