Instalação do código fonte
Primeiro você irá baixar o código desse layout (disponível no fim desse post) aprenda aqui.
Ajustando a Data
Configurações >> formato da data >> Selecione a penúltima opção como no print abaixo e salve
Alterar o Cabeçalho
Primeiro Salve a base do cabeçalho e em algum editor de imagens coloque o nome do seu blog, recomendo o photoscape que é fácil e simples ou até mesmo o paint vai de sua escolha.
Clique na imagem para salvar o tamanho real
Em seguida faça o uploud da sua imagem no site imgur ou no próprio blogger e guarde o link
Abra o Html do seu blog >> Clique em algum lugar do código >> tecle ctrl +f >> cole essa url http://i.imgur.com/cO7gZm7.png e dê enter, ela iré ficar marcada em amarelo. Substitua pela url da imagem com o nome do seu blog e salve. (print abaixo)
Salve essa imagem transparente
Agora vá em layout >> header (cabeçalho) selecione a opção escolha uma imagem >> selecione a imagem que você salvou a cima >> selecione Em vez do titulo e descrição e salve. (print abaixo)
Para por os slides automáticos (posts recentes)
Layout >> abaixo do gadget do layout clique em adicionar um gadget >> selecione a opção html/javascript
Para o usar o gadget " A Blogueira " Adicione um gadget de HTML/Javascript na sidebar e cole nele o seguinte código
<center>
<img src="SUA-FOTO" style="-moz-border-radius: 1000px; -webkit-border-radius: 1000px; -o-border-radius: 1000px; width:300px; heigh:auto;" />
<br />
Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui,Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui,
</center>
Faça o uploud da sua foto em algum site, recomendo o imgur ou blogger, e cole onde e está em vermelho. Altere sua descrição também, e salve.
Gadget do instagram
Use o site lightwidget para colocar o gadget do instagram, basta entrar no site colocar seu user, configurar como quiser e clicar em get code. Copie e cole num gadget de HTML/Javascript
E pronto seu layout estará pronto e totalmente funcionando.
Eu nesse layout usei o background abaixo, você pode usar o que preferir.
Agora vá em layout >> header (cabeçalho) selecione a opção escolha uma imagem >> selecione a imagem que você salvou a cima >> selecione Em vez do titulo e descrição e salve. (print abaixo)
Editar links do menu
Abra o Html do seu blog >> Clique em algum lugar do código >> tecle ctrl +f >> e procure por <body
Logo abaixo dele vai estar o código do menu, aonde está "seu link" você cola o seu link e onde está "nome" você coloca o nome da sua página ( o que você quer que apareça no menu)
Print, Altere tudo e salve
Layout >> abaixo do gadget do layout clique em adicionar um gadget >> selecione a opção html/javascript
Nele cole o código abaixo
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:-230px;
width:1300px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
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:#000; /*==COR AREA DE TITULO==*/
display: block;
clear: left;
font-family: 'georgia', cursive; ==FONTE DO SLIDE==
font-weight:200;
text-transform:uppercase; /*==TDS LETRAS MAIÚSCULAS==*/
font-size:13px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:0%;
text-align: center; /*==POSIÇÃO DO TITULO==*/
color:#fff; /*== COR DO TITULO==*/
width:95%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
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/AVvXsEhkYmpITsiPnXOatKQXbojNvgU7K218XzLv5iOkrjuVweX2mnrqxHipq3bHkL0Rc_1YKUa3nLYfDnNxzKGjfSWt66FQgjfTUvipSHJpGUoyX1zBsvmpHpavSoX42FTfwcgf6_3VlQXdVOUn/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 = 255;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>
Para o usar o gadget " A Blogueira " Adicione um gadget de HTML/Javascript na sidebar e cole nele o seguinte código
<center>
<img src="SUA-FOTO" style="-moz-border-radius: 1000px; -webkit-border-radius: 1000px; -o-border-radius: 1000px; width:300px; heigh:auto;" />
<br />
Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui,Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui, Sua descrição aqui,
</center>
Faça o uploud da sua foto em algum site, recomendo o imgur ou blogger, e cole onde e está em vermelho. Altere sua descrição também, e salve.
Gadget do instagram
Use o site lightwidget para colocar o gadget do instagram, basta entrar no site colocar seu user, configurar como quiser e clicar em get code. Copie e cole num gadget de HTML/Javascript
E pronto seu layout estará pronto e totalmente funcionando.
Eu nesse layout usei o background abaixo, você pode usar o que preferir.
Você pode:
Alterar o que quiser e usar
Pode usar como base para outro layout
É TOTALMENTE PROIBIDO TIRAR OS CRÉDITOS
Teste!
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOiii Adorei o layout e estou usando no meu blog! Gostaria apenas de saber, como remover a imagem que fica no final da página? Não quero usá-la :(
ResponderExcluirE também aparece seu rosto com a frase "escrito po Gleicy haner" no início dá minha postagem e também no final! Como removo isso??
E parabéns os seus layouts são incríveis!
Aguardo! Super beijo
www.beautyecia.com.br
Oi Querida! muito obrigada!
ExcluirPara remover a imagem do final (rodapé) procure no HTML por http://i.imgur.com/ongB9dL.png e quando achar é só deletar.
O layout não tem assinatura automática, eu não entendi bem essa parte, se quiser pode entrar em contato comigo no facebook que a gente conversa direitinho
Oiee, tudo bom? Eu amei muito esse layout, ele é perfeito para mim.
ResponderExcluirEu estou tendo um probleminha, não estou conseguindo colocar a imagem do cabeçalho acima da guias, fica sobrando muito espaço, como posso resolver?