Layout Free

Layout Responsivo Free

~
Olá meus amores, antes de tudo peço desculpas pela minha ausencia... como algumas de voces sabem, eu estou super corrida com o trabalho de verao aqui na italia, o que é bem puxado e ocupa boa parte do meu tempo, mas é por apenas alguns dias, logo tudo voltará ao normal. Hoje vim trazer para voces um Layout Responsivo Free, personalizado por mim ultilizando a Base Free da querida Lariz do Blog ButLariz.

Essa é a aparencia do Blog:

O arquivo não esta zipado, ou seja esta em arquivo xml, voce pode baixar diretamente no seu pc e adcionar automaticamente pelo blogger, ou clicar sobre o arquivo com o botao direito do mause e abrir com a opção BLOCO DE NOTAS, selecioar tudo e copiar, colando na area do html do seu blog, lembrando de fazer sempre o backup caso algo dê errado!

Os codigos que seguem abaixo, é necessario adcionar na gadget do blog.

Em questao a paginacao do blog, apos alguns testes nao consegui ativa las, precisaria de mais tempo o que eu nao tenho rs... entao SE você for usar esse layout, o ideal é voce entender de html para testar alguns tutoriais, ou  na opcao de configuração no Layout do blog em MAIN (na gadget de Postagens do Blog), onde tem Número de postagens na página principal: 05 ... Altere esse valor para 20 ou mais, assim aparecera seus ultimos 20 posts ou mais.

Infelizmente peguei só a  base  que a Lariz disponibilizou, mas nao tive tempo para trabalhar nela 100% ... e como tem uns 2 meses que nao posto um layout free, trouxe esse para quem quiser usar!
Estou com mtas saudades de trazer mais novidades, mas logo logo estarei aqui com  muitas coisas boas especialmente para vocês!

Espero que tenham gostado!
Segue abaixo os codigos!


Para adcionar o Menu no topo:
<div id='nav'>
<ul>
<li><a href='/'>  Início </a></li>
<li><a href='/p/sobre.html'>  Sobre </a></li>
<li><a href='/p/contato.html'> Contato </a> </li>
<li><a href='/p/anuncie.html'>  Anuncie </a></li>
<li><a href='/p/blogroll.html'>  Blogroll </a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
 $("#nav").addClass("js").before('<div id="menu"><img src="http://i.imgur.com/wvad5ud.png"/></div>');
 $("#menu").click(function(){
  $("#nav").toggle();
 });
 $(window).resize(function(){
  if(window.innerWidth > 900) {
   $("#nav").removeAttr("style");
  }
 });
</script>

Para adcionar a galeria de imagens com Posts recentes: 


<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
margin-left: -30px;
width:1120px; ==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 0px 0px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#FFF; /*--cor de fundo das miniaturas ao passar o mouse --*/



display: block;
clear: left;
font-size: 16px;
font-family: arial;
text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
height:320px;
height: 57.4%; /*--define a altura da legenda --*/
width:100%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding: 119px 0px 0px 0px;
color:#999; /*== COR DA FONTE DO TEXTO==*/
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;
filter:alpha(opacity=90);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/*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/AVvXsEg_afExFUrMmqu6Wk1djRAqaEpgtRii0scLaxHLOpKQKBJ5Ud2VuyStvfgOCIan2asJQPOxkyiUcdwJorBtCgwrti1MUfSHPEObOdQlZHQrs2Bd4ZVwshwU27B8jl8zrNaALIw_uAd7qntb/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="' + '">' + 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 = 280;



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>

Renata Massa

You Might Also Like

33 comentários

  1. Fofaevaidosa.blogspot.com.br04 agosto

    Amei, pena que troquei meu layout um dia desses rsrs. parabéns Re ficou lindo

    ResponderExcluir
  2. Vanilla04 agosto

    Ficou muito lindo, muito legal a iniciativa de postar ele layouts free, adorei.

    meninavanillaworld.blogspot.com.br

    ResponderExcluir
  3. Anônimo07 agosto

    PEGUEI, amei demais. Obrigadaaaaa

    ResponderExcluir
    Respostas
    1. Renata Massa09 agosto

      <3
      Depois manda o link do blog p eu ver como ficou! bjus

      Excluir
  4. Anônimo07 agosto

    Flor, só agora percebi que quando clico nos títulos das postagens não funciona, o post não abre, não consigo clicar. Pode por favor me dizer o que aconteceu?Gostei muito desse lay :(

    www.sentaaileitor.com.br

    ResponderExcluir
  5. BLOGCHILLI09 agosto

    Amei, ficou lindo, Parabéns pelo seu trabalho, estão cada dia mais lindo.Bjos

    ResponderExcluir
  6. Unknown10 agosto

    Onde eu coloco o código para adicionar as imagens?

    ResponderExcluir
  7. Fofisses de uma garota12 agosto

    Oi Reh!
    Que layot lindo!
    Tem como você fazer um tutorial ensinado a fazer um?
    Obg!

    ResponderExcluir
  8. BRUNA15 agosto

    Eu amei Renata, estou criando coragem de comprar um layout, só que os preços estão muito alto, pelo valor que eu estou ganhando no meu blog, e você me ajudou muito, muito obrigada. :*
    modaevidaforever.blogspot.com

    ResponderExcluir
  9. Unknown19 agosto

    Amei o layout , coloquei ele no meu blog, el e perfeito !

    so não estou conseguindo colocar meus dados no menu do topo , pra clicar e abrir direto nas minhas informaçoes. como faço Re.

    ResponderExcluir
  10. Canal da Lívia19 agosto

    Muito obrigada! Ficou lindo no meu Blog!
    Passei horas procurando o template certo, e quando vi este não tive dúvidas.
    <3
    http://odiariodelivia5.blogspot.com.br/
    Beijos!

    ResponderExcluir
  11. Unknown23 agosto

    Eu adoro seus layouts... esse é lindo.
    Beijo.

    https://meucantoomeumundoo.blogspot.pt/

    ResponderExcluir
  12. Unknown01 outubro

    oi Rê !! caso eu queira mudar a imagem do fundo?

    ResponderExcluir
  13. Unknown07 outubro

    OIII, amei muito o layout, mas quando vejo meu blog pelo celular não fica o mesmo layout, o que eu faço pra arrumar?

    ResponderExcluir
  14. Unknown07 outubro

    E onde eu coloco aquele código do menu e da galeria?

    ResponderExcluir
  15. emily ferreira12 outubro

    Este comentário foi removido pelo autor.

    ResponderExcluir
  16. Unknown14 outubro

    OI lindona peguei esse aqui pro meu blog ta? confesso que não sei mexer nada do tal de HTLM,mas eu vendo uns videos aqui consegui colocar a minha fotinho do canto, espero não te incomodar com isso, nossa eu amei de paixão esse bem a minha cara ,muito obrigada por compartilhar seus trabalho gratuito,isso ajuda a muitas pessoas a não desistir do sonhos de ter um blog como eu,grande beijinho e se quiser dar uma olhadinha e vê como ficou esse é o link,beijinhos
    http://preciosaporsilvanaeloy.blogspot.com.br/

    ResponderExcluir
  17. emily ferreira15 outubro

    oi, consegui colocar tudo, mas quando coloquei a galeria de imagens com Posts recentes ficou redondo e eu gostaria de deixar quadrado como vc deixou de exemplo. Você pode me dizer como deixar quadrado?
    onrigada, ficou lindo o seu trabalho.

    http://meumelhormomentto.blogspot.com.br/

    ResponderExcluir
  18. sessaodemaquiagem@gmail.com28 novembro

    oii eu baixei o layout e ameiiii , porem n estou conseguindo q elq fique igual no celular , n e responsivo ... no celular n da pra ler as postagens costa tudo fica mt bugado ... pfv me ajude !
    http://sessaodemaquiagem.blogspot.com.br/

    ResponderExcluir
  19. N. Reis08 dezembro

    Renata, baixei o layout para o meu blog e amei como ficou. Muuuito obrigada por postar layouts tão incríveis, eu amei de vdd!
    Já estou te seguindo e vou add seu blog nos favoritos com ctz.
    Um beijo.

    ResponderExcluir
  20. Unknown15 dezembro

    ola me chamo camila sou nova no ramo blog gente amei baixei agora to rebolando para colocar as coisas no lugar kkk muito obgda e mil beijos

    ResponderExcluir
  21. Unknown07 fevereiro

    Oieeeeeeeee.... Re estou vendo aqui, se consigo usar um desses, ta bem? Amei o tutorial... Bju.

    ResponderExcluir
  22. Cheias de Fé03 março

    Como colocar os dados no menu do topo?

    ResponderExcluir
  23. Unknown13 março

    Não estou conseguindo colocar o menu no topo, pode me ajudar?

    ResponderExcluir
  24. Unknown26 março

    oi renata eu coloquei esse no meu blog porem as redes pra compartilhar os post n estar funcionando o q faco

    ResponderExcluir
  25. Vera03 junho

    Nossa que lindo, estou usando ele no meu blog

    ResponderExcluir
  26. Firefly02 julho

    Lo tengo en mi blog pero no puedo abrir los enlaces en las entradas, ni puedo seleccionar contenido, como hago?

    ResponderExcluir
  27. Danny Soares21 agosto

    olá depois que agente adiciona o codigo que vc deixou para coloca menun no blog como se faz para editar esse menu?
    eu ja fui em editar paginas nao troca continua em branco !

    ResponderExcluir
  28. Anônimo27 fevereiro

    muito lindo, sabes me dizer se ele pode ser usado no wordspress ?

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.

instagram