13 dezembro 2015

Como usar esse layout



Ajustando postagens e data

Primeiro você irá baixar o código desse layout (disponível no fim desse post) aprenda aqui.

Em seguida vá em layout >> Postagens no blog >> Editar >> número de postagens da página principal>> Deixe em 5 para a paginação numerada funcionar e salve. (print abaixo)





Configurações >> formato da data >> Selecione a penúltima opção como no print abaixo e salve





Alterar Cabeçalho

Para alterar o cabeçalho com o nome do seu blog  primeiro salve a base abaixo (clique para abrir em tamanho real) e escreva o nome do seu blog como quiser em algum programa de edição de imagens.



Em seguida faça o uploud da sua imagem no site imgur ou no próprio blogger


Abra o Html do seu blog >> Clique em algum lugar do código >> tecle ctrl +f >> cole essa url http://i.imgur.com/HNpTwT7.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)





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 


Layout >> abaixo do gadget do layout clique em adicionar um gadget >> selecione a opção html/javascript 





E nele cole o código abaixo e salve

<div style="position: absolute; margin-top: -370px; left: -px;"><center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
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:#e943cd; /*==COR AREA DE TITULO==*/
display: block;
clear: left;
font-family: 'arial', 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/AVvXsEi3Yj6jn2-Oy3PgOw3dFL1JYqShsfh9OCNTAVdvMmCUkPKSW3yy5HoSrS_4GKdWfgP9YiJwQpZPKDQBjFpH0qMLzzxMQwPRglKKdYdiG8NcU_KSbElNbOjJwJfAU8H5DjG-i8kKM8GsJcX8/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></div>


Pronto! Seu layout ficará pronto e funcionando perfeitamente!


Eu nesse layout usei o background abaixo, você pode usar o que preferir.





É TOTALMENTE PROIBIDO RETIRAR OS CRÉDITOS



Um comentário: