Layout Responsivo Free

05:52

~
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 : '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="' + '">' + 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>

Você pode gostar também

21 comentários

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

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

    meninavanillaworld.blogspot.com.br

    ResponderExcluir
  3. Respostas
    1. <3
      Depois manda o link do blog p eu ver como ficou! bjus

      Excluir
  4. 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. Amei, ficou lindo, Parabéns pelo seu trabalho, estão cada dia mais lindo.Bjos

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

    ResponderExcluir
  7. Fofisses de uma garota12 de agosto de 2016 07:27

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

    ResponderExcluir
  8. 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. 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. 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. Eu adoro seus layouts... esse é lindo.
    Beijo.

    https://meucantoomeumundoo.blogspot.pt/

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

    ResponderExcluir
  13. 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. E onde eu coloco aquele código do menu e da galeria?

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

    ResponderExcluir
  16. 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. 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. 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

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda