23/04/2016

Como usar esse layout

| |



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)





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



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 



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 : '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 = 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



5 comentários:

  1. Este comentário foi removido pelo autor.

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

    ResponderExcluir
  3. Oiii 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 :(

    E 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

    ResponderExcluir
    Respostas
    1. Oi Querida! muito obrigada!

      Para 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

      Excluir

.